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

Question

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

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 中的视图代码分开？

提前致谢 ！

Answer 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),
        ),
      ),
)

我在这里创建了一个要点