Question

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

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);
}

但这表示颜色不是材料颜色的子类型

Answer 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）来改善此效果。完成此操作后，请像现在一样使用它。

Answer 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

中找到运行中的示例代码

自定义颜色颤动主题

2 个答案: