保持 Flutter 的样式独立于视图代码答案

【问题标题】：Keeping flutter's styling separate / independent of view code保持 Flutter 的样式独立于视图代码
【发布时间】：2020-03-18 19:19:05
【问题描述】：

这就是我今天设计一个简单的颤动按钮的方式 -

FlatButton(
          child: Text('Hello'),
          onPressed: () {},
          color: Colors.blue,
          colorBrightness: Brightness.dark, 
          disabledColor: Colors.blueGrey,
          highlightColor: Colors.red,
          padding: EdgeInsets.symmetric(
              horizontal: 8.0, vertical: 5.0)
        )

似乎 Flutter 的视图代码需要在每个组件中内置样式？我怎样才能把它完全分开？类似于 CSS（几乎）为网络所做的事情？看起来代码会更简洁，我也可以重用我的样式。

我可以将诸如 Brightness 类之类的子类子类化为自定义亮度，但这似乎有点矫枉过正。

另外，今天发现这个包让我更接近我想要的 - https://pub.dev/packages/division

理想情况下，有哪些好的做法可以将样式与 Flutter 中的视图代码分开？

提前致谢！

【问题讨论】：

标签： flutter flutter-layout flutter-dependencies

【解决方案1】：

也许你可能知道，但你可以在 main.dart 中声明通用样式，

对于按钮主题，

 ThemeData(
...

 buttonTheme: ButtonThemeData(
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
        colorScheme: colorSchemeDark,
        splashColor: AppColors.themeColor.shade900,
        height: 50,
        highlightColor: AppColors.themeColor.shade800,
        textTheme: ButtonTextTheme.primary,
      ),
)

对于卡片主题，

ThemeData(
...

 cardTheme: CardTheme(
        margin: EdgeInsets.only(top: 8, left: 8, right: 8, bottom: 8),
        elevation: 6.0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8.0),
        ),
      ),
)

我创建了一个gist here

【讨论】：

【解决方案2】：

使用这个包https://pub.dev/packages/division

它允许您为小部件创建样式、存储它们以供重复使用等等。

final textStyle = TxtStyle()
  ..textColor(Colors.white)
  ..fontSize(30)
  ..bold()
  ..italic()
  ..textAlign.start();

Text(
'hi',
style:textStyle
)

【讨论】：

【解决方案3】：

解决方案 1

您可以使用默认样式创建可重用FlattButon，并且可以随时覆盖样式：

例子：

class MyFlatButton extends StatelessWidget {
  const MyFlatButton({
    Key key,
    @required this.text,
    @required this.onPressed,
    this.color = Colors.blue, // set default Values
    this.colorBrightness = Brightness.dark, //
    this.disabledColor = Colors.blueGrey, //
    this.highlightColor = Colors.red, //
    this.padding =
        const EdgeInsets.symmetric(horizontal: 8.0, vertical: 5.0), //
  }) : super(key: key);

  final String text;
  final VoidCallback onPressed;
  final Color color;
  final Brightness colorBrightness;
  final MaterialColor disabledColor;
  final MaterialColor highlightColor;
  final EdgeInsetsGeometry padding;
  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Text(
        '$text',
      ),
      onPressed: onPressed,
      color: color,
      colorBrightness: colorBrightness,
      disabledColor: disabledColor,
      highlightColor: highlightColor,
      padding: padding,
    );
  }
}

你可以像 MyFlatButton 一样在你的 App 中使用它而不是 FlatButton

  child: MyFlatButton(
    text: 'Hello',
    onPressed: () {},
    color: Colors.cyan,
  ),

解决方案 2

如果你想“完全”分离样式，你可以创建一个额外的类来保存样式

class MyFlatButton2 extends StatelessWidget {
  const MyFlatButton2({
    Key key,
    @required this.text,
    @required this.onPressed,
    this.styles = const ButtonStyles(),
  }) : super(key: key);

  final String text;
  final VoidCallback onPressed;
  final ButtonStyles styles;
  @override
  Widget build(BuildContext context) {
    final btnStyles = ButtonStyles();
    return FlatButton(
      child: Text('$text'),
      onPressed: onPressed,
      color: styles.color ?? btnStyles.color,
      colorBrightness: styles.colorBrightness ?? btnStyles.colorBrightness,
      disabledColor: styles.disabledColor ?? btnStyles.disabledColor, 
      highlightColor: styles.highlightColor ?? btnStyles.highlightColor, 
      padding: styles.padding ?? btnStyles.padding,
    ); 
  }
}

// Styles Class
class ButtonStyles {
  final Color color;
  final Brightness colorBrightness;
  final MaterialColor disabledColor;
  final MaterialColor highlightColor;
  final EdgeInsetsGeometry padding;

  const ButtonStyles({
    this.color = Colors.blue, // set default Values
    this.colorBrightness = Brightness.dark, //
    this.disabledColor = Colors.blueGrey, //
    this.highlightColor = Colors.red, //
    this.padding =
        const EdgeInsets.symmetric(horizontal: 8.0, vertical: 5.0), //
  });
}

然后你就可以使用它了默认样式

  child: MyFlatButton2(
    text: 'Hello',
    onPressed: () {},
  ),

或者你可以覆盖样式

  child: MyFlatButton2(
    text: 'Hello',
    onPressed: () {},
    styles: ButtonStyles(
      colorBrightness: Brightness.dark,
      color: Colors.green,
      padding: EdgeInsets.all(20),
    ),
  ),

Extra，你还可以有一些带有预定义样式的命名构造函数

  factory ButtonStyles.predefinedStyle1() => ButtonStyles(
        color: Colors.green, // set default Values
        colorBrightness: Brightness.light, //
        disabledColor: Colors.red, //
        highlightColor: Colors.red, //
        padding: const EdgeInsets.symmetric(horizontal: 18.0, vertical: 15.0),
  );

然后

  child: MyFlatButton2(
    text: 'Hello',
    onPressed: () {},
    styles: ButtonStyles.predefinedStyle1(),
  ),

【讨论】：