CODEWITHSUNDEEP
fluttermaterial-design
nonybrighto
nonybrighto

Reputation: 9581

Change color of RaisedButton from theme not working

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(),
    );

Upvotes: 11

Views: 16580

Answers (7)

diegoveloper
diegoveloper

Reputation: 103421

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,

Updated

This is the code updated using the new API

ThemeData(
  colorScheme: ColorScheme(
    primary: Color(0XFF212845),
    background: Color(0XFF212845),
    secondary: Colors.yellow,
    surface: Color(0XFFF8D320),
    onSurface: Colors.green,
    brightness: Brightness.light,
    onError: Colors.red,
    primaryVariant: Colors.blue,
    secondaryVariant: Colors.blueAccent,
    onBackground: Colors.white,
    onPrimary: Colors.white,
    onSecondary: Colors.black,
    error: Colors.red,
  ),
);

Upvotes: 7

Anushka Pubudu
Anushka Pubudu

Reputation: 427

Most of the above answers are deprecated with the time I have posting this.

      theme: ThemeData(
    primaryColor: Color(0XFF212845),
    scaffoldBackgroundColor: Color(0XFF212845),
    primarySwatch: Colors.yellow,
    colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.green),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
        textStyle: MaterialStateProperty.all<TextStyle>(
          TextStyle(
            fontSize: 30.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ),
  ),

Upvotes: 1

live-love
live-love

Reputation: 52366

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: () {},

Upvotes: 3

Raj A
Raj A

Reputation: 592

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.

Upvotes: 1

Richard Bonneau
Richard Bonneau

Reputation: 1214

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()))

Upvotes: 0

Dyary
Dyary

Reputation: 800

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

Upvotes: 12

Suragch
Suragch

Reputation: 511736

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

Upvotes: 54

Related Questions