Custom Swatch for Material App Theme – primarySwatch

#flutter #dart

‘Color’ is not a subtype of type ‘MaterialColor?’, ever got this kind of error at runtime, most probably, defining the primarySwatch for your App.

So let’s find out how to define a custom swatch that would work as expected.

	//main.dart
	import 'package:flutter/material.dart';
	void main() {
	runApp(App());
	}
	class App extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Demo for swatch',
	theme: ThemeData(
	primarySwatch: Colors.black, //here is where the error resides
	),
	home: YourFirstPage(),
	);
	}
	}

view raw main.dart hosted with ❤ by GitHub

A color that has a small table of related colors called a “swatch” — Dart Docs

To create our own small table we need some values to put it in, right. So where can we get them? People on the earth are just awesome, we have a tool Make Tints and Shades to our rescue.

Get any color HEX code you want paste it in that box, and then click on ‘Make tints and Shade’ (Tip for future — Hover the shades to copy the code)
Create a new dart file for our new values' home. I have named it ‘palette.dart’. (You guys can post your creative names in comments 😜)

From Dart Documentation



const MaterialColor(
int primary,
Map<int, Color> swatch
)
//Creates a color swatch with a variety of shades.
//The primary argument should be the 32 bit ARGB value of one of the values in the swatch, as would be passed to the new Color constructor for that same color, and as is exposed by value. (This is distinct from the specific index of the color in the swatch.)

To tap into the desired value, all you need to create is a Map. That is exactly what we have created below with defining a class Palette for better use and scalability in the future.

	//palette.dart
	import 'package:flutter/material.dart';
	class Palette {
	static const MaterialColor kToDark = const MaterialColor(
	0xffe55f48, // 0% comes in here, this will be color picked if no shade is selected when defining a Color property which doesn’t require a swatch.
	const <int, Color>{
	50: const Color(0xffce5641 ),//10%
	100: const Color(0xffb74c3a),//20%
	200: const Color(0xffa04332),//30%
	300: const Color(0xff89392b),//40%
	400: const Color(0xff733024),//50%
	500: const Color(0xff5c261d),//60%
	600: const Color(0xff451c16),//70%
	700: const Color(0xff2e130e),//80%
	800: const Color(0xff170907),//90%
	900: const Color(0xff000000),//100%
	},
	);
	} // you can define define int 500 as the default shade and add your lighter tints above and darker tints below.

view raw palette.dart hosted with ❤ by GitHub

Now we just need to import our newly created dart file in main.dart for implementation.

	import 'package:flutter/material.dart';
	import 'config/palette.dart';
	void main() {
	runApp(App());
	}
	class App extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Demo for swatch',
	theme: ThemeData(
	primarySwatch: Palette.kToDark, //our palette goes here by tapping into the class
	),
	home: YourFirstPage(),
	);
	}
	}

view raw main.dart hosted with ❤ by GitHub

When we define a primarySwatch by ourselves, Theme itself takes some decision in defining colors for widgets like AppBar, FAB, etc. And that’s it, we have a very own customized primarySwatch defined.