How to Use Custom Color as MaterialColor on ThemeData in Flutter

In this example, we are going to show you how to use custom colors on primarySwatch of ThemeData in Flutter App. Only Material Color can be used to ThemeData. You can't use RGB, HEX, MaterialAccentColor in ThemeData. See the examples below:

How to Use #Hex Color as Primary Color in ThemeData:

class MyApp extends StatelessWidget{
  MaterialColor mycolor = MaterialColor(0xFF558B2F, <int, Color>{
      50: Color(0xFF558B2F),
      100: Color(0xFF558B2F),
      200: Color(0xFF558B2F),
      300: Color(0xFF558B2F),
      400: Color(0xFF558B2F),
      500: Color(0xFF558B2F),
      600: Color(0xFF558B2F),
      700: Color(0xFF558B2F),
      800: Color(0xFF558B2F),
      900: Color(0xFF558B2F),
    },
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
         primarySwatch: mycolor
      ),
      home: Home(),
    );
  }
}

Here, we have used Color(0xFF558B2F) where the first FF is opacity which ranges from 00-FF. 

How to Use RGB Color as Primary Color in ThemeData:

class MyApp extends StatelessWidget{
  
  MaterialColor mycolor = MaterialColor(Color.fromRGBO(0, 137, 123, 1).value, <int, Color>{
      50: Color.fromRGBO(0, 137, 123, 0.1),
      100: Color.fromRGBO(0, 137, 123, 0.2),
      200: Color.fromRGBO(0, 137, 123, 0.3),
      300: Color.fromRGBO(0, 137, 123, 0.4),
      400: Color.fromRGBO(0, 137, 123, 0.5), 
      500: Color.fromRGBO(0, 137, 123, 0.6),
      600: Color.fromRGBO(0, 137, 123, 0.7),
      700: Color.fromRGBO(0, 137, 123, 0.8),
      800: Color.fromRGBO(0, 137, 123, 0.9),
      900: Color.fromRGBO(0, 137, 123, 1),
    },
  ); 

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
         primarySwatch: mycolor
      ),
      home: Home(),
    );
  }
}

Here, we have used RGB value to create new Material Color and later use it to ThemeData as a primary color.

How to Use MaterialAccentColor as Primary Color in ThemeData:

You may get the error "The argument type 'MaterialAccentColor' can't be assigned to the parameter type 'MaterialColor?'." when you use MaterialAccentColor on MaterialColor type. Use accent color like below as Material Color.

class MyApp extends StatelessWidget{
  
  MaterialColor mycolor = MaterialColor(Colors.purpleAccent.value, <int, Color>{
      50: Colors.purpleAccent.withOpacity(0.1),
      100: Colors.purpleAccent.withOpacity(0.2),
      200: Colors.purpleAccent.withOpacity(0.3),
      300: Colors.purpleAccent.withOpacity(0.4),
      400: Colors.purpleAccent.withOpacity(0.5), 
      500: Colors.purpleAccent.withOpacity(0.6),
      600: Colors.purpleAccent.withOpacity(0.7),
      700: Colors.purpleAccent.withOpacity(0.8),
      800: Colors.purpleAccent.withOpacity(0.9),
      900: Colors.purpleAccent.withOpacity(1),
    },
  ); 

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
         primarySwatch: mycolor
      ),
      home: Home(),
    );
  }
}

Full App Code Example:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  
  MaterialColor mycolor = MaterialColor(Color.fromRGBO(0, 137, 123, 1).value, <int, Color>{
      50: Color.fromRGBO(0, 137, 123, 0.1),
      100: Color.fromRGBO(0, 137, 123, 0.2),
      200: Color.fromRGBO(0, 137, 123, 0.3),
      300: Color.fromRGBO(0, 137, 123, 0.4),
      400: Color.fromRGBO(0, 137, 123, 0.5), 
      500: Color.fromRGBO(0, 137, 123, 0.6),
      600: Color.fromRGBO(0, 137, 123, 0.7),
      700: Color.fromRGBO(0, 137, 123, 0.8),
      800: Color.fromRGBO(0, 137, 123, 0.9),
      900: Color.fromRGBO(0, 137, 123, 1),
    },
  ); 

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
         primarySwatch: mycolor
      ),
      home: Home(),
    );
  }
}


class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    
    return  Scaffold(
          appBar: AppBar( 
              title: Text("Flutter Custom Color on ThemeData"),
          ),
          body: Container(
            padding: EdgeInsets.all(20),
            alignment: Alignment.center,
             child: Column(
               children:[
                  ElevatedButton(
                     onPressed: (){

                     },
                     child: Text("Elevated Button"),
                  ),

                  ListTile(
                     leading: Checkbox(
                        value: true,
                        onChanged: (value){},
                     ),
                     title:Text("This is checkbox")
                  ),

                  ListTile(
                     leading: Radio(
                        groupValue: true,
                        value: true,
                        onChanged: (value){}, 
                     ),
                     title:Text("This is Radio")
                  )
               ]
             ),
          )
       );
  }
}

Output Screenshot:

In this way, you can convert any custom color to Material color and use it into ThemeData as the primary color in Flutter App.