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

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

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

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

Answer 2

做到这一点的方法之一是定义buttonTheme在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

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

Answer 3

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

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

Answer 4

看起来您还需要向按钮提供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,
          )),
    );
  }
}

您也可以像上面/下面给出的答案一样定义按钮颜色 。

[更新] 根据评论的要求，这就是您传递函数的方式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)
      )),
    );
  }
}