Question 75098 in Flutter Question posted in
The official Flutter documentation can be found here.

Background color of ElevatedButton in Flutter

I have some troubles with ThemeData. I’m trying to use a custom Theme for my app, and the problem is that ElevatedButton doesn’t change it’s background color as I want.

So the code in ThemeData is:

static ThemeData get lightTheme {
    return ThemeData(
      appBarTheme: const AppBarTheme(
        backgroundColor: Color.fromARGB(255, 24, 166, 64),
      ),
      primaryColor: const Color.fromARGB(255, 24, 166, 64),
      scaffoldBackgroundColor: Colors.white,
      brightness: Brightness.light,
      buttonTheme: const ButtonThemeData(
        buttonColor: Color.fromARGB(255, 24, 166, 64), //  <-- light color
        textTheme:
            ButtonTextTheme.primary, //
      ),
      textTheme: GoogleFonts.kanitTextTheme(),
    );
  }

and the code for the button is:

child: ElevatedButton(
                              onPressed: () {
                                Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (context) =>
                                            const ColinaMenu()));
                              },
                              child: const Text('Comanda'),

As you can see, I expect the background color to be kinda green, but all recieve is blue (i think is the color set by default by lightTheme). I know that button must get the color automatically once i set up in ThemeData.

Tags:

2

Answers


  1. 0

    If you want to set a custom ElevatedButton theme you need to use the ElevatedButtonThemeData instead of the ButtonThemeData.

    Something like this:

    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.black, // background (button) color
        foregroundColor: Colors.white, // foreground (text) color
      ),
    ),
    Login or Signup to reply.
  2. 0

    Try this (Colors.white if you are in your DarkTheme of course, otherwise Colors.black):

    elevatedButtonTheme: ElevatedButtonThemeData(
        style: ButtonStyle(
      backgroundColor: MaterialStateProperty.all(Colors.white),
    )),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search