How to apply theme on MaterialButton or RaisedButton?

Question

Can someone help to point how do we define base theme for button and use it on every button? Everywhere I look only found textTheme but not buttonTheme example?

Even on buttonTheme how do we define text colors? Because on the button itself we can do it directly like color: Colors.blue

Answer 1

One way to do it is to Define buttonTheme in theme in MaterialApp:

E.g:

void main() {
  runApp(MaterialApp(
    home: Home(),
    theme: ThemeData(
        accentColor: Colors.redAccent,
        buttonTheme: ButtonThemeData(
           buttonColor: Colors.blueAccent,
           shape: RoundedRectangleBorder(),
           textTheme: ButtonTextTheme.accent,
           ....
    )),
  ));
}

class Home extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("Button Theme"),
          backgroundColor: Colors.green),
      body: Center(
          child: RaisedButton( //Button Color is as define in theme
        onPressed: () {},
        child: Text("Send"), //Text Color as define in theme
      )),
    );
  }
}

with this all the Buttons defined under this MaterialAppwill Carry this Theme Style.

Text Color will be the accentColor define in the ThemeData as i have defined textTheme: ButtonTextTheme.accent so it will Pick accentColor

Button picking Theme Style As Defined in theme

Answer 2

[August 2020 - Flutter 1.20]

Since 1.20 you can create different button theme configurations based on button types.

Sample code for color settings:

void main() {
  runApp(
    MaterialApp(
      home: Home(),
      theme: ThemeData.from(
        colorScheme: ColorScheme.light(),
      ).copyWith(
        textButtonTheme: TextButtonThemeData(
          style: TextButton.styleFrom(
            primary: Colors.orange,
          ),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            onPrimary: Colors.yellow,
            primary: Colors.blue,
          ),
        ),
        outlinedButtonTheme: OutlinedButtonThemeData(
          style: OutlinedButton.styleFrom(
            primary: Colors.purple,
            backgroundColor: Colors.green,
          ),
        ),
      ),
    ),
  );
}

class Home extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              onPressed: () {},
              child: Text('TextButton'),
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text('ElevatedButton'),
            ),
            OutlinedButton(
              onPressed: () {},
              child: Text('OutlinedButton'),
            ),
          ],
        ),
      ),
    );
  }
}

Important release notes from flutter (you can find more information about the options in the migration guide):

FlatButton, RaisedButton, and OutlineButton have been replaced by TextButton, ElevatedButton, and OutlinedButton respectively. ButtonTheme has been replaced by TextButtonTheme, ElevatedButtonTheme, and OutlinedButtonTheme. The original classes will be deprecated soon, please migrate code that uses them. There's a detailed migration guide for the new button and button theme classes in flutter.dev/go/material-button-migration-guide.

Answer 3

Looks like you also need to provide textColor to your button. How about creating your Custom Button?

class MyButton extends StatelessWidget {
  final String text;
  final Color textColor;
  final Color buttonColor;
  final Function() onPressed;
  MyButton({
    @required this.text,
    this.buttonColor = const Color(0xFF000000) /** Default buttonColor */,
    @required this.onPressed,
    this.textColor = const Color(0xFFDDDDDD) /** Default textColor */,
  });
  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      color: buttonColor,
      onPressed: onPressed,
      child: Text(text,
          style: TextStyle(
            color: textColor,
            fontSize: 20.0,
          )),
    );
  }
}

You can define your button color like the one in the answer given above/below too.

[UPDATE] As per request from the comments, this is how you pass a function for onPressed

class Home extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("Button Theme"),
          backgroundColor: Colors.green),
      body: Center(
        child: MyButton( //My custom button 
        text: "Hit me",
        onPressed: () { print("Ouch! Easy pal!! :p ") },
        textColor = const Color(SOME CUSTOM COLOUR)
      )),
    );
  }
}

Answer 4

You can define theme on material widget like

Inside MaterialApp Widget

    theme: ThemeData(     
      elevatedButtonTheme: ElevatedButtonThemeData(
          style: TextButton.styleFrom(
              backgroundColor: Colors.black,
              padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
              side: BorderSide(color: Colors.red, width: 2),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10)),
              textStyle: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  wordSpacing: 2,
                  letterSpacing: 2))),

Use

  ElevatedButton(
          onPressed: () => print('okay'),
          child: Text('Elevated Button'),
        ),

Answer 5

For applying generic color for buttons add primarySwatch as below in your ThemeData. Thus material app will use different shades of your primary color.

primarySwatch: const MaterialColor(
      0xFF2B893A,
      <int, Color>{
        50: colorPrimary,
        100: colorPrimary,
        200: colorPrimary,
        300: colorPrimary,
        400: colorPrimary,
        500: colorPrimary,
        600: colorPrimary,
        700: colorPrimary,
        800: colorPrimary,
        900: colorPrimary,
      },
    )