有人能帮助指出我们如何定义按钮的基本主题,并在每个按钮上使用它吗?我到处看都只找到textTheme而不是buttonTheme的例子?即使在buttonTheme上,我们如何定义文本颜色?因为在按钮本身上我们可以像color: Colors.blue一样直接执行
textTheme
buttonTheme
color: Colors.blue
exdqitrt1#
一种方法是在theme中定义buttonTheme:例如:
theme
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 )), ); } }
有了这个MaterialApp下定义的所有按钮将携带这个主题样式。文本颜色将是ThemeData中定义的accentColor,因为我定义了textTheme: ButtonTextTheme.accent,所以它将选择accentColor按钮拾取主题样式如theme中定义
MaterialApp
ThemeData
accentColor
textTheme: ButtonTextTheme.accent
ugmeyewa2#
[2020年8月- Flutter 1.20]
从1.20开始,您可以根据按钮类型创建不同的按钮主题配置。颜色设置示例代码:
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'), ), ], ), ), ); } }
重要flutter发行说明(您可以在迁移指南中找到有关选项的更多信息):
FlatButton、RaisedButton和OutlineButton分别被TextButton、ElevatedButton和OutlineButton替换。ButtonTheme已被TextButtonTheme、ElevatedButtonTheme和OutlinedButtonTheme取代。原始类很快将被弃用,请迁移使用它们的代码。flutter.dev/go/material-button-migration-guide中的新按钮和按钮主题类有一个详细的迁移指南。
j2datikz3#
看起来您还需要为按钮提供textColor。如何创建您的自定义按钮?
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, )), ); } }
你也可以像answer given above/below一样定义按钮的颜色。
**[UPDATE]***根据评论的要求,这是如何传递onPressed的函数 *
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) )), ); } }
laawzig24#
您可以定义主题的材料部件一样内部MaterialApp小部件
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))),
使用
ElevatedButton( onPressed: () => print('okay'), child: Text('Elevated Button'), ),
cwdobuhd5#
要将通用颜色应用到按钮和其他类似的小部件上,请将ThemeData和primarySwatch传递到根目录的MaterialApp的theme参数。因此材质应用程序将使用不同色调的原色。
primarySwatch
static const Color colorPrimary = Color(0xffFFFFFF); ThemeData( primaryColor: colorPrimary, primarySwatch: MaterialColor( colorPrimary.value, const <int, Color>{ 50: colorPrimary, 100: colorPrimary, 200: colorPrimary, 300: colorPrimary, 400: colorPrimary, 500: colorPrimary, 600: colorPrimary, 700: colorPrimary, 800: colorPrimary, 900: colorPrimary, }, ), );
5条答案
按热度按时间exdqitrt1#
一种方法是在
theme
中定义buttonTheme
:例如:
有了这个
MaterialApp
下定义的所有按钮将携带这个主题样式。文本颜色将是
ThemeData
中定义的accentColor
,因为我定义了textTheme: ButtonTextTheme.accent
,所以它将选择accentColor
按钮拾取主题样式如
theme
中定义ugmeyewa2#
[2020年8月- Flutter 1.20]
从1.20开始,您可以根据按钮类型创建不同的按钮主题配置。
颜色设置示例代码:
重要flutter发行说明(您可以在迁移指南中找到有关选项的更多信息):
FlatButton、RaisedButton和OutlineButton分别被TextButton、ElevatedButton和OutlineButton替换。ButtonTheme已被TextButtonTheme、ElevatedButtonTheme和OutlinedButtonTheme取代。原始类很快将被弃用,请迁移使用它们的代码。flutter.dev/go/material-button-migration-guide中的新按钮和按钮主题类有一个详细的迁移指南。
j2datikz3#
看起来您还需要为按钮提供textColor。如何创建您的自定义按钮?
你也可以像answer given above/below一样定义按钮的颜色。
**[UPDATE]***根据评论的要求,这是如何传递
onPressed
的函数 *laawzig24#
您可以定义主题的材料部件一样
内部MaterialApp小部件
使用
cwdobuhd5#
要将通用颜色应用到按钮和其他类似的小部件上,请将
ThemeData
和primarySwatch
传递到根目录的MaterialApp的theme参数。因此材质应用程序将使用不同色调的原色。