How to apply theme on MaterialButton or RaisedButton?
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'),
),
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 MaterialApp
will 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
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)
)),
);
}
}
[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.