自定义颜色颤振主题答案

【问题标题】：Custom Color Flutter Theme自定义颜色颤振主题
【发布时间】：2019-07-06 22:00:12
【问题描述】：

我正在尝试在我的颤振主题上使用自定义颜色，如下所示：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Onelog',
        theme: ThemeData(
          primarySwatch: MyColors.navy,
          primaryTextTheme: TextTheme(title: TextStyle(color: Colors.black)),
        ),
        //Code...
  }
}

class MyColors {
  static const Color navy = const Color(0xFF162A49);
}

但这说明 Color 不是 Material color 的子类型

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

要添加“新”MaterialColor，您需要实例化一个新的 MaterialColor 及其所有亮度：

class MyColors {

  static const MaterialColor navy = MaterialColor(
    0xFF162A49,
    <int, Color>{
      50: Color(0xFF162A49),
      100: Color(0xFF162A49),
      200: Color(0xFF162A49),
      300: Color(0xFF162A49),
      400: Color(0xFF162A49),
      500: Color(0xFF162A49),
      600: Color(0xFF162A49),
      700: Color(0xFF162A49),
      800: Color(0xFF162A49),
      900: Color(0xFF162A49),
    },
  );
}

您可以通过添加不透明度（OxFF 为 0x00）来改善这一点。一旦你这样做了，就像现在一样使用它。

【讨论】：

【解决方案2】：

您可以创建一个类并覆盖 TextTheme

TextTheme get textTheme {
    TextTheme textTheme = TextTheme(
      title: TextStyle(color: Colors.black, fontSize: 26),
      caption: TextStyle(color: Colors.black, fontFamily: fontFamily),
      subtitle: TextStyle(color: Colors.black, fontFamily: fontFamily),
      headline: TextStyle(
        color: Colors.redAccent,
        fontSize: 28,
        fontFamily: getFontTypeString(FontType.MOVIE_FILMSTRIP),
      ),
      subhead: TextStyle(color: Colors.black, fontFamily: fontFamily),
      body1: TextStyle(color: Colors.black, fontFamily: fontFamily),
      body2: TextStyle(color: Colors.black, fontFamily: fontFamily),
      button: TextStyle(color: Colors.black, fontFamily: fontFamily),
      display1: TextStyle(color: Colors.black, fontFamily: fontFamily),
      display2: TextStyle(color: Colors.black, fontFamily: fontFamily),
      display3: TextStyle(color: Colors.black, fontFamily: fontFamily),
      display4: TextStyle(color: Colors.black, fontFamily: fontFamily),
    );
    return textTheme;
  }

您可以在此应用程序https://play.google.com/store/apps/details?id=com.toolbone.trailer中找到示例代码

【讨论】：