CODEWITHSUNDEEP
flutterdartflutter-layout
user2876983
user2876983

Reputation: 321

Custom Color Flutter Theme

I am trying to use a custom color on my flutter theme like this:

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

But this says that Color is not a subtype of Material color

Upvotes: 1

Views: 7513

Answers (2)

wisekiddo
wisekiddo

Reputation: 71

You can create a Class and override 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;
  }

You can find the example code in action in this app https://play.google.com/store/apps/details?id=com.toolbone.trailer

Upvotes: 0

Mariano Zorrilla
Mariano Zorrilla

Reputation: 7686

To add "new" MaterialColor you need to instantiate a new MaterialColor with all their luminance:

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

You could improve this by adding the opacity (OxFF to 0x00). Once you do that, use it just like you're doing right now.

Upvotes: 7

Related Questions