Skip to content

Instantly share code, notes, and snippets.

@mikemimik
Last active August 3, 2022 04:21
Show Gist options
  • 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 */)
};
}
@tsolomon89
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