0

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

我在ThemeData类中找到的参数是 only buttonTheme，这ButtonThemeData是为所有按钮定义的：

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

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

4

2 回答 2

2 
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 或 outlineButton 替换 RaisedButton，并为所有类型的按钮提供特定的主题。所以你可以重复使用它。

你可以像这样使用它：

   SubmitButton(
                  title: "View Details",
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => GeneratePDF(),
                      ),
                    );
                  },
                ),
于 2020-09-23T10:17:43.953 回答
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/ 一篇很好的文章，涵盖了这个主题。

于 2020-09-23T10:21:34.347 回答