Change color of RaisedButton from theme not working

user_3572546 0
Viewed 14879

I tried changing the color of all my RaisedButtons from the themeData but it refused to work. All other properties, such as fontSize and fontWeight changed successfully. The color of the text only changes from black to white when the brightness property of themeData is changed to Brightness.dark.

Is there a way I can solve this issue? What could I be doing wrong?

Here is my sample code: 

 return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primaryColor: Color(0XFF212845),
        scaffoldBackgroundColor: Color(0XFF212845),
        primarySwatch: Colors.yellow,
        buttonColor: Color(0XFFF8D320),
        textTheme:  TextTheme(
          button: TextStyle(
            color: Colors.green, // This is not working.
            fontSize: 30.0,
            fontWeight: FontWeight.bold
          )
        )
      ),
      home:MenuPage(),
    );
material-design flutter
6 Answers

For other people coming to this question, one reason that a button may not change colors is that it is disabled, which happens when you don't have the onPressed method set.

RaisedButton(
  color: Theme.of(context).accentColor,
  onPressed: () {}, //                        <-- need to add this
  child: Text(...),
),

enter image description here

user_36818800

if you are giving a color to the color property and it doesn't show ,then probably you haven't implemented the onPressed property, because in this state the button will show it's disabled color , which is no color at all.

set it like this: 

onPressed: () {},

giving it an anonymous function like that while not implementing anythig ( or something if you wish) will give it color

user_98901750

Add buttonTheme and accentColor to your ThemeData , like this:

  ThemeData(
            primaryColor: Color(0XFF212845),
            scaffoldBackgroundColor: Color(0XFF212845),
            primarySwatch: Colors.yellow,
            buttonColor: Color(0XFFF8D320),
            buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.accent),
            accentColor: Colors.green,
user_6662210

Even though primarySwatch might have been added, you still need to add buttonColor to add the color to the buttons, like this:

child: MaterialApp(
        home: Wrapper(),
        theme: ThemeData(
          primarySwatch: Colors.blue,
          buttonColor: Colors.blue // this is needed
        ),
      ),

primarySwatch - used to configure default values for several fields, including: primaryColor, primaryColorBrightness, primaryColorLight, primaryColorDark, toggleableActiveColor, accentColor, colorScheme, secondaryHeaderColor, textSelectionColor, backgroundColor, and buttonColor.

Also, make sure onPressed in your RaisedButton is set:

onPressed: () {},
user_4363410

Make sure you haven't customize the RaisedButton() itself, else it will override the ThemeData. If you have customized color property in RaisedButton it will override the properties set in ThemeData.

user_142192210

I believe the correct way is to declare a buttonColor property in your ThemeData Widget.

MaterialApp(
        theme: ThemeData(
          fontFamily: 'Pirata',
          primaryColor: Color.fromRGBO(71, 86, 87, 1),
          accentColor: Color.fromRGBO(71, 86, 87, 1),
          buttonColor: Color.fromRGBO(238, 238, 238, 1),

        ),
        home: App()))
user_100072950
Related