Skip to content

Instantly share code, notes, and snippets.

@timoyuen
Forked from mikemimik/main.dart
Created May 16, 2018 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save timoyuen/9079979815de1a809e1a63ba63d216d4 to your computer and use it in GitHub Desktop.
Save timoyuen/9079979815de1a809e1a63ba63d216d4 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 */)
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment