在 Flutter 中覆盖小部件样式

Mat*_*att 6 themes flutter

问题:如何RaisedButton以某种方式自动(如果可能)设置应用程序中所有小部件的样式?


我正在将应用程序从原生 Android 转换为 Flutter。在此应用程序中,所有主要操作按钮都是圆形的、灰色的,并带有白色边框。在 Android 中,这就像在 中定义样式styles.xml并设置<Button style="MyPrimaryButton"/>.

另一方面,在 Flutter 中,我只能找到使用设置单个属性的示例(包括主题文档中的示例),property: Theme.of(context).property并且似乎没有传递颜色和字体以外的样式属性的方法。

以下是我想用于所有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)),
)
Run Code Online (Sandbox Code Playgroud)

这个据称类似的问题已被关闭,主要基于意见,但我不是在征求您的意见。我问,如果有一种方法,风格这些按钮,最好是不涉及的复制粘贴的小部件源代码到我自己的类作为接受的答案建议(不过,如果这仍然是这样做则可能非常的唯一途径很好的答案)。

Hem*_*Raj 9

您实际上可以通过扩展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),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

使用MyButton任何你想RaisedButton用你的风格。

希望这可以帮助!