Question

问题：如何以某种方式自动（如果可能）为应用中的所有RaisedButton小部件设置样式？

我正在将应用程序从本机Android转换为Flutter。在此应用程序中，所有主要操作按钮均为圆形，灰色和白色边框。在Android中，这就像在styles.xml中定义样式并设置<Button style="MyPrimaryButton"/>一样简单。

另一方面，在Flutter中，我只能找到使用property: Theme.of(context).property设置各个属性的示例（包括theming docs中的示例），似乎没有一种传递方法样式属性，而不是颜色和字体。

以下是我要用于所有RaisedButton小部件的样式：

RaisedButton(
  color: Theme.of(context).accentColor,
  elevation: 0,
  shape: new RoundedRectangleBorder(
    side: BorderSide(color: Colors.white, width: 1.0, style: BorderStyle.solid),
    borderRadius: new BorderRadius.circular(30)),
)

此purportedly similar question因主要基于意见而被关闭，但我并不是要征求您的意见。我问是否有样式这些按钮的样式，最好不包括按照公认的答案建议将小部件源代码复制粘贴到我自己的类中（尽管这仍然是唯一的方法）那就很可能是答案）。

Answer 1

您实际上可以通过扩展RaisedButton类并覆盖所需的默认属性来实现它。

示例：

class Sample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MyButton(onClicked: () => null,child: Text('Sample'),),
      ),
    );
  }
}

class MyButton extends RaisedButton {
  const MyButton({@required this.onClicked, this.child})
      : super(onPressed: onClicked, elevation: 0.0, child: child);

  final VoidCallback onClicked;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        buttonColor: Theme.of(context).accentColor,
        buttonTheme: Theme.of(context).buttonTheme.copyWith(
              shape: RoundedRectangleBorder(
                side: const BorderSide(
                  color: Colors.white,
                  width: 1.0,
                  style: BorderStyle.solid,
                ),
                borderRadius: BorderRadius.circular(30),
              ),
            ),
      ),
      child: Builder(builder: super.build),
    );
  }
}

在MyButton中使用RaisedButton的样式。

希望这会有所帮助！

Answer 2

您可以提取已经customized widget的{{1}}，然后使用它everywhere。

这里有03种可能性：

使用它，如 Local Variable ， Widget 或 Method 。

1- 局部变量
代码：

var raisedButton = RaisedButton(
      color: Theme.of(context).accentColor,
      elevation: 0,
      shape: new RoundedRectangleBorder(
          side: BorderSide(
              color: Colors.white, width: 1.0, style: BorderStyle.solid),
          borderRadius: new BorderRadius.circular(30)),
      onPressed: null,
    );

用法：

Container(child: raisedButton),

2-方法

代码：

RaisedButton buildRaisedButton(BuildContext context) {
    return RaisedButton(
          color: Theme.of(context).accentColor,
          elevation: 0,
          shape: new RoundedRectangleBorder(
              side: BorderSide(
                  color: Colors.white, width: 1.0, style: BorderStyle.solid),
              borderRadius: new BorderRadius.circular(30)),
          onPressed: null,
        );
  }

使用：

Container(child: buildRaisedButton(context)),

3-小部件

代码：

 class MyRaisedButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
            color: Theme.of(context).accentColor,
            elevation: 0,
            shape: new RoundedRectangleBorder(
      side: BorderSide(
          color: Colors.white, width: 1.0, style: BorderStyle.solid),
      borderRadius: new BorderRadius.circular(30)),
            onPressed: null,
          );
  }
}

使用：

Container( child: MyRaisedButton()),

请注意，您可以通过单击窗口小部件并执行（ctrl +）来快速完成此操作。

结果将是：

Answer 3

尝试将小部件用作变量或方法。

在Flutter中覆盖小部件样式

3 个答案: