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.