Skip to content

Instantly share code, notes, and snippets.

@mikemimik
Last active August 3, 2022 04:21
Show Gist options
  • Star 49 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save mikemimik/5ac2fa98fe6d132098603c1bd40263d5 to your computer and use it in GitHub Desktop.
Save mikemimik/5ac2fa98fe6d132098603c1bd40263d5 to your computer and use it in GitHub Desktop.
Flutter: Custom theme data
import 'package:flutter/material.dart';
import 'theme.dart' as Theme;
void main() {
runApp(
new MaterialApp(
title: 'CompanyApp',
color: Theme.CompanyColors.blue[500],
theme: Theme.CompanyThemeData,
home: new Scaffold(
appBar: new AppBar(
title: new Text('CompanyApp')
),
body: new Center(
child: new Container(
child: new Text('CompanyApp')
)
),
)
)
);
}
/**
* Creating custom color palettes is part of creating a custom app. The idea is to create
* your class of custom colors, in this case `CompanyColors` and then create a `ThemeData`
* object with those colors you just defined.
*
* Resource:
* A good resource would be this website: http://mcg.mbitson.com/
* You simply need to put in the colour you wish to use, and it will generate all shades
* for you. Your primary colour will be the `500` value.
*
* Colour Creation:
* In order to create the custom colours you need to create a `Map<int, Color>` object
* which will have all the shade values. `const Color(0xFF...)` will be how you create
* the colours. The six character hex code is what follows. If you wanted the colour
* #114488 or #D39090 as primary colours in your theme, then you would have
* `const Color(0x114488)` and `const Color(0xD39090)`, respectively.
*
* Usage:
* In order to use this newly created theme or even the colours in it, you would just
* `import` this file in your project, anywhere you needed it.
* `import 'path/to/theme.dart';`
*/
import 'package:flutter/material.dart';
final ThemeData CompanyThemeData = new ThemeData(
brightness: Brightness.light,
primarySwatch: CompanyColors.blue,
primaryColor: CompanyColors.blue[500],
primaryColorBrightness: Brightness.light,
accentColor: CompanyColors.green[500],
accentColorBrightness: Brightness.light
);
class CompanyColors {
CompanyColors._(); // this basically makes it so you can instantiate this class
static const Map<int, Color> blue = const <int, Color> {
50: const Color(/* some hex code */),
100: const Color(/* some hex code */),
200: const Color(/* some hex code */),
300: const Color(/* some hex code */),
400: const Color(/* some hex code */),
500: const Color(/* some hex code */),
600: const Color(/* some hex code */),
700: const Color(/* some hex code */),
800: const Color(/* some hex code */),
900: const Color(/* some hex code */)
};
static const Map<int, Color> green = const <int, Color> {
50: const Color(/* some hex code */),
100: const Color(/* some hex code */),
200: const Color(/* some hex code */),
300: const Color(/* some hex code */),
400: const Color(/* some hex code */),
500: const Color(/* some hex code */),
600: const Color(/* some hex code */),
700: const Color(/* some hex code */),
800: const Color(/* some hex code */),
900: const Color(/* some hex code */)
};
}
@dawidhyzy
Copy link

I'm getting error that primarySwatch: CompanyColors.blue, needs to be in MaterialColor type.

@pdivita
Copy link

pdivita commented Mar 15, 2018

I'm using this syntax:

 static const _blackPrimaryValue = 0xFF000000;

  static const MaterialColor black = const MaterialColor(
    _blackPrimaryValue,
    const <int, Color>{
      50:  const Color(0xFFe0e0e0),
      100: const Color(0xFFb3b3b3),
      200: const Color(0xFF808080),
      300: const Color(0xFF4d4d4d),
      400: const Color(0xFF262626),
      500: const Color(_blackPrimaryValue),
      600: const Color(0xFF000000),
      700: const Color(0xFF000000),
      800: const Color(0xFF000000),
      900: const Color(0xFF000000),
    },
  );

@ollyde
Copy link

ollyde commented Jul 15, 2018

Also getting the same error as dawidhyzy.

@ClixStudios
Copy link

Also getting the same error as dawidhyzy.

I'm getting error that primarySwatch: CompanyColors.blue, needs to be in MaterialColor type.

First day of Flutter, but I believe you could pass the following in:

primarySwatch: MaterialColor(CompanyColors.blue[50].value, CompanyColors.blue),
Instead of
primarySwatch: CompanyColors.blue,

@Oblio-BOS
Copy link

Also getting the same error as dawidhyzy.

I'm getting error that primarySwatch: CompanyColors.blue, needs to be in MaterialColor type.

First day of Flutter, but I believe you could pass the following in:

primarySwatch: MaterialColor(CompanyColors.blue[50].value, CompanyColors.blue),
Instead of
primarySwatch: CompanyColors.blue,

You're a freaking rock star! Thanks

@Ehot93
Copy link

Ehot93 commented Mar 24, 2020

Good job, thank you man. May be you know how can use custom fonts like this colors?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment