Question

有人可以帮助我们指出如何为按钮定义基本主题并将其用于每个按钮吗？我到处都只发现textTheme而不是buttonTheme的例子？

即使在buttonTheme上，我们如何定义文本颜色？因为在按钮本身上，我们可以像color: Colors.blue

那样直接进行操作

Answer 1

[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'),
            ),
          ],
        ),
      ),
    );
  }
}

重要发行说明（您可以在迁移指南中找到有关这些选项的更多信息）：

FlatButton，RaisedButton和OutlineButton分别被TextButton，ElevatedButton和OutlinedButton取代。 ButtonTheme已由TextButtonTheme，ElevatedButtonTheme和OutlinedButtonTheme取代。原始类很快将被弃用，请迁移使用它们的代码。 flutter.dev/go/material-button-migration-guide中提供了有关新按钮和按钮主题类的详细迁移指南。

Answer 2

一种方法是在buttonTheme的{{1}}中定义theme：

例如：

MaterialApp

与此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中的accentColor定义，就像我定义的ThemeData一样，因此它将选择textTheme: ButtonTextTheme.accent

按accentColor中定义的按钮选择主题样式

Answer 3

看起来您还需要向按钮提供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中一样定义按钮颜色。

Answer 4

您可以在材质小部件上定义主题，例如

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'),
        ),

如何在MaterialButton或RaisedButton上应用主题？

4 个答案: