Flutter: Material Color Conversion

Flutter already has many MaterialColor available, but still, if you want to create your own MaterialColor with your own shades for that just follow the below approach.

Access pre-defined MaterialColor:

MaterialColor extends ColorSwatch which is kind of like a Map of colors. You can use ColorSwatch anywhere you could use a Color and get the 900 shade with the index into it [number].

Most swatches have colors from 100 to 900 in increments of one hundred, plus the color 50. The smaller the number, the lighter the color. The greater the number, the darker the color. The accent swatches (e.g. redAccent) only have the values 100, 200, 400, and 700.

If you want to access predefined MaterialColor, just access it with the index like:

Color selection = Colors.yellow[400]; // Selects a mid-range yellow.

You can have many colors like that eg: green, black, orange, lime, red, etc.

Turn any color into MaterialColor:

If somebody wants to create his own MaterialColor with specific shades you can do something like this by creating own map of color in RGBO(Red, Green, Blue, Opacity) form:

Map<int, Color> colorCodes = {
  50: Color.fromRGBO(147, 205, 72, .1),
  100: Color.fromRGBO(147, 205, 72, .2),
  200: Color.fromRGBO(147, 205, 72, .3),
  300: Color.fromRGBO(147, 205, 72, .4),
  400: Color.fromRGBO(147, 205, 72, .5),
  500: Color.fromRGBO(147, 205, 72, .6),
  600: Color.fromRGBO(147, 205, 72, .7),
  700: Color.fromRGBO(147, 205, 72, .8),
  800: Color.fromRGBO(147, 205, 72, .9),
  900: Color.fromRGBO(147, 205, 72, 1),
};
// Green color code: FF93cd48
MaterialColor customColor = MaterialColor(0xFF93cd48, colorCodes);

Finally, assign this custom color to your widgets and themes.

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: "Custom Material Color",
    home: new Scaffold(
      appBar: new AppBar(
        title: new Text("Material Color Example"),
      ),
      body: new CustomMaterialColor(),
    ),
  ));
}

class CustomMaterialColor extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Map<int, Color> colorCodes = {
      50: Color.fromRGBO(147, 205, 72, .1),
      100: Color.fromRGBO(147, 205, 72, .2),
      200: Color.fromRGBO(147, 205, 72, .3),
      300: Color.fromRGBO(147, 205, 72, .4),
      400: Color.fromRGBO(147, 205, 72, .5),
      500: Color.fromRGBO(147, 205, 72, .6),
      600: Color.fromRGBO(147, 205, 72, .7),
      700: Color.fromRGBO(147, 205, 72, .8),
      800: Color.fromRGBO(147, 205, 72, .9),
      900: Color.fromRGBO(147, 205, 72, 1),
    };

    MaterialColor color = new MaterialColor(0xFF93cd48, colorCodes);

    return Container(
      child: Center(
        child: RaisedButton(
          onPressed: () {},
          color: color[400],
          child: new Text("Color"),
        ),
      ),
    );
  }
}

Output:

Youtube Video:

GitHub Link:

https://github.com/jitsm555/Flutter-Tutorial/