How to Change Default Primary Theme Color in Flutter

In this example, we are going to show you how to change the default primary theme color of Flutter widget components to any other custom theme color at once by using ThemeData. The default color of the Flutter app is blue color. 

MaterialApp(
  theme: ThemeData(
      primarySwatch: Colors.purple
  ),
)

You need to pass a ThemeData to the theme parameter of MaterialApp in your Flutter App. You have to pass your own color of choice. You can also set the custom color as the default primary color of your App.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
         primarySwatch: Colors.purple
      ),
      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 Color Theme"),
          ),
          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")
                  )
               ]
             ),
          )
       );
  }
}

Here, we have set the purple color as the default primary color of the Flutter App using ThemeData.  The output of the above code will look like below:

In this way, you can change the default primary theme color fo your Flutter app.

No any Comments on this Article


Please Wait...