-
-
Save thoretton-edwin/cc2961f0dca79f44be661c8162539998 to your computer and use it in GitHub Desktop.
Flutter: Custom theme data
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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') | |
| ) | |
| ), | |
| ) | |
| ) | |
| ); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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 */) | |
| }; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment