Category

Flutter

Category

3 Ways To Change Elevated Button Color In Flutter

Do you want to change color of Elevated Button?

Then you are in the right place.

So let’s start with a simple example.

Most of the time, this is the one you really needed.

How To Change Elevated Button Color?

change elevatedbutton color

  • Use style property of ElevatedButton and pass ElevatedButton.styleFrom().
  • Inside, ElevatedButton.styleFrom(), give primary parameter and color as value.
  • You can use onPrimary property to change Text Color of ElevatedButton.

ElevatedButton(
                  child: const Text('ElevatedButton'),
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    primary: Colors.deepOrangeAccent,
                    //onPrimary: Colors.black,
                  ),
                ),

How To Change Elevated Button Color Using Theme?

elevated button color change using theme widget
Sometimes you need to set same color and text color for a group of ElevatedButtons used in a form or section. You don’t need to use style property for each one. In these situations, You can use Theme widget.

  • This example, I have used Column for holding two ElevatedButton and the Column is wrapped with Theme Widget.
  • Theme widget provides elevatedButtonTheme property to set our style.
  • You need to specify with ElevatedButtonThemeData object and style values.
  • It affects all the children inside of it.

Theme(
                  data: ThemeData(
                    elevatedButtonTheme: ElevatedButtonThemeData(
                      style: ElevatedButton.styleFrom(
                        onPrimary: Colors.white,
                        primary: Colors.green,
                      ),
                    ),
                  ),
                  child: Column(
                    children: [
                      ElevatedButton(
                        child: const Text('ElevatedButton 1'),
                        onPressed: () {},
                      ),
                     const SizedBox(
                        height: 10,
                      ),
                      ElevatedButton(
                        child: const Text('ElevatedButton 2'),
                        onPressed: () {},
                      ),
                    ],
                  ),
                )

How To Change Elevated Button Color Using Theme – App level

  • Using this MaterialApp theme property, you can change all ElevatedButton color in your app with simple piece of code.
  • You should give ThemeData object and elevatedButtonTheme property value should be ElevatedButtonThemeData

return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter ElevatedButton Color Change Example',
      theme: ThemeData(
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: Colors.red,
          ),
        ),
      ),

Complete Source Code

elevated button color flutter

  • In this, main example, I have used 3 different ways mentioned above in this post.
  • First example uses the color given by App theme data. So it chooses, Red color.
  • Second, ElevatedButton overrides app level theme color by using its own style. So here, ElevatedButton uses Orange color and also black for text color.
  • Third one, we have used Theme Widget, using that you can change color of all the children (ElevatedButton)inside of Theme Widget.
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter ElevatedButton Color Change Example',
      theme: ThemeData(
        //primarySwatch: Colors.red,
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: Colors.red,
          ),
        ),
      ),
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter ElevatedButton Color Change Example'),
          ),
          body: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
        //It uses applevel theme color
        ElevatedButton(
                  child: const Text('ElevatedButton'),
                  onPressed: () {},
                ),
//Here It uses own style color by overriding app level color.
                ElevatedButton(
                  child: const Text('ElevatedButton'),
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    primary: Colors.deepOrangeAccent,
                    onPrimary: Colors.black,
                  ),
                ),
//Here, Theme provides color for the ElevatedButton.
                Theme(
                  data: ThemeData(
                    elevatedButtonTheme: ElevatedButtonThemeData(
                      style: ElevatedButton.styleFrom(
                        primary: Colors.green,
                      ),
                    ),
                  ),
                  child: Column(
                    children: [
                      ElevatedButton(
                        child: const Text('ElevatedButton 1'),
                        onPressed: () {},
                      ),
                      const SizedBox(
                        height: 10,
                      ),
                      ElevatedButton(
                        child: const Text('ElevatedButton 2'),
                        onPressed: () {},
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

If you like this post, please share it with your family and friends.
Thanks.

Please disable your adblocker or whitelist this site!