How to Change the Elevated Button Color in Flutter?

The ElevatedButton button is one of the most commonly used widgets in Flutter. It is a material design button which was introduced in Flutter v1.22 to replace the old RaisedButton.

If you have first time created a Flutter application and added an Elevated button to it, you might have noticed that by default its background color is blue. Actually, when you add an elevated button to your application and do not specify its background color explicitly, it by default uses the primarySwatch color of your application’s theme which is set to blue by default.

To change the elevated button color, you can pass a style parameter inside the ElevatedButton widget and then use the styleFrom() method of the ElevatedButton class to specify the background and foreground colors. The backgroundColor parameter of the styleFrom() method specifies the background color whereas the foregroundColor parameter specifies the text color of the button.

The ElevatedButton.styleFrom() method also takes several other styling parameters such as shadowColor, padding, shape, minimumSize, etc. to change the look of the Elevated button.

The following example shows how you can change the foreground and background color of an Elevated button:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.red,   // background color
    foregroundColor: Colors.white, // text color
  ),
  onPressed: () {},
  child: const Text('Elevated Button'),
),

Here is a full Flutter example that has two Elevated buttons, one with default styling and another with explicitly specified background and foreground color:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final String _title = 'Elevated Button Demo';
  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: Container(
          alignment: Alignment.center,
          child: Column(
            children: [
              ElevatedButton(  // button 1
                // uses default colors
                onPressed: () {},
                child: const Text('Elevated Button 1'),
              ),
              ElevatedButton(  // button 2
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.red, // background color
                  foregroundColor: Colors.white, // text color
                ),
                onPressed: () {},
                child: const Text('Elevated Button 2'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output:

Change the Elevated Button Color Globally

In some cases, you may prefer to apply a common color to all buttons in your app rather than specifying the color for each button individually.

In this scenario, you can use the ThemeData widget to define the color that should be used for the buttons. The ThemeData widget provides a way to define styles and colors that can be applied consistently across multiple widgets in your app.

The following example shows how you can specify the color at a global level for all the buttons across your app. The first two buttons use the colors specified in the ThemeData whereas the third button overrides the globally defined colors and uses its own colors:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final String _title = 'Elevated Button Demo';
  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.red,
            foregroundColor: Colors.white,
          ),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: Container(
          alignment: Alignment.center,
          child: Column(
            children: [
              ElevatedButton(
                // uses globally defined colors
                onPressed: () {},
                child: const Text('Elevated Button 1'),
              ),
              ElevatedButton(
                // uses globally defined colors
                onPressed: () {},
                child: const Text('Elevated Button 2'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green, // background color
                  foregroundColor: Colors.white, // text color
                ),
                onPressed: () {},
                child: const Text('Elevated Button 3'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output:

Conclusion

In this article, we learned how we can change the Elevated button color in Flutter.

In summary, to change the color of an Elevated button, you can use the ElevatedButton.styleFrom() method of the ElevatedButton class and specify the background and foreground colors of the button by passing the backgroundColor and foregroundColor parameters to it.

If you want to set the button styles globally, you can use the ThemeData widget.

Thanks for reading.