Flutter 为每个按钮类型指定 Button Theme

Question

我正在开发 Flutter 应用程序，需要为每种按钮类型指定自定义 ButtonTheme，即凸起、轮廓和扁平。

我在ThemeDataclass中找到的参数只有buttonTheme，而这个ButtonThemeData是为所有按钮定义的：

static ThemeData darkTheme = ThemeData(
   buttonTheme: const ButtonThemeData(
      colorScheme: ColorScheme(
        primary: Color(Constants.PrimaryColor),
        primaryVariant: Color(Constants.PrimaryVariant),
      ),
      textTheme: ButtonTextTheme.normal,
    ),
)

现在的问题是，如何为每个按钮类型定义一个单独的主题来更改，例如背景和文本颜色？

Answer 1

class SubmitButton extends StatelessWidget {
  final String title;
  final Function onPressed;
  const SubmitButton({Key key, this.title, this.onPressed}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
      buttonTheme: const ButtonThemeData(
      colorScheme: ColorScheme(
        primary: Color(Constants.PrimaryColor),
        primaryVariant: Color(Constants.PrimaryVariant),
      ),
      textTheme: ButtonTextTheme.normal,
    ),   
   ),
      child: RaisedButton(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(18.0),
          side: BorderSide(color: Colors.red),
        ),
        color: Colors.red,
        // color: Colors.transparent,
        // disabledColor: Colors.grey
        textColor: Colors.white,
        onPressed: onPressed,
        child: Container(
          child: Text(title),
        ),
      ),
    );
  }
}

在这里你可以用 FlatButton 或 outlinedButton 替换 RaisedButton 并为所有类型的按钮赋予特定主题。所以你可以重复使用它。

你可以这样使用它：

   SubmitButton(
                  title: "View Details",
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => GeneratePDF(),
                      ),
                    );
                  },
                ),

Answer 2

在我看来，最好的方法是创建您自己的自定义小部件，其行为就像一个按钮。您将更好地控制按钮的功能。 https://flutter.dev/docs/development/ui/interactive 这样您就可以定义自定义回调并避免通常按钮的标准行为。例如，如果您想要特定按钮的不同动画。

class MyFlatButtonCustomWidget extends Stateless/Stateful {

  @override
  Widget build(BuildContext context) {
   return Container{
      // create the shape of a button and add your custom widget tree and behavior
    } 
  }

}

另一种方法是创建一个扩展默认小部件的自定义小部件：

class MyFlatButton extends FlatButton {

}

但你也可以简单地

class MyFlatButton {

  @override
  Widget build(BuildContext context) {
   return FlatButton{
      // put your stylings here
    } 
  }

}

如果您愿意，可以在定义 ThemeData 时定义按钮的主题 https://api.flutter.dev/flutter/material/ThemeData-class.html

theme: ThemeData(
       primarySwatch: Colors.green,
       splashColor: Colors.pink,
       buttonTheme: ButtonThemeData(
        // splashColor:Colors.pink,   //we don't define the splashColor in ButtonThemeDaa
        height:60
      )
   ),

作为我使用的来源： https://www.ernegonzal.com/theme-flutter-buttons/ 一篇涵盖该主题的好文章。

Flutter 为每个按钮类型指定 Button Theme

Flutter specify Button Theme for each button type

flutter

flutter-theme