Flutter Themes

Theming is the process of using a set of colors and font styles throughout your app. It’s a way to centralize all styles in one place.

In Flutter, we can either use Theme widgets that contain the colors and font styles for a specific area of the application or define app-wide themes. The app-wide themes are Theme widgets, which are created in the root of our app under the MaterialApp widget.

The Theme widget automatically applies its style to all descendant widgets. It takes a ThemeData argument, which holds the actual definition for the colors and font styles. Theme widget uses an InheritedWidget under the hood to distribute the ThemeData throughout the widget tree. Descendant widgets obtain the current theme's ThemeData object using Theme.of.

Flutter allows the following approaches to use Theme in part of the application:

1) By creating ThemeData

In this case, wrap widget inside Theme widget and pass instance of ThemeData to Theme widget.

Example:

Theme(  
 data: ThemeData(  
  accentColor: Colors.amber,  
 ),  
 child: FloatingActionButton(  
  onPressed: () {},  
  child: Icon(Icons.add),  
 ),  
)   

2) By extending parent theme

Extend parent theme using copyWith() method.

Example:

Theme(  
 data: Theme.of(context).copyWith(accentColor: Colors.yellow),  
 child: FloatingActionButton(  
  onPressed:  () {},  
  child: Icon(Icons.add),  
 ),  
);   

Custom Theme for flutter application:

First create a custom_theme.dart file to define a custom light theme.

class CustomTheme {  
 static ThemeData get lightTheme {   
  return ThemeData(   
   primaryColor: Colors.amber,  
   accentColor: Colors.cyanAccent,  
   fontFamily: 'Montserrat',   
   buttonTheme: ButtonThemeData(   
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(18.0)),  
    buttonColor: Colors.blue,  
   )  
  );  
 }  
}    

Use above custom theme in MaterialApp as follows:

import 'package:flutter/material.dart';  
  
 void main() => runApp(MyApp());  
  
 class MyApp extends StatelessWidget {  
 @Override  
 Widget build(BuildContext context) {  
  return MaterialApp(  
   title: 'Flutter Demo',  
   debugShowCheckedModeBanner: false,  
   theme: CustomTheme.lightTheme,  
   home: MyHomePage(title: 'Flutter Demo Home Page'),  
  );  
 }  
}  
  
 class MyHomePage extends StatefulWidget {  
 MyHomePage({Key key, this.title}) : super(key: key);  
  
 final String title;  
  
 @Override  
 _MyHomePageState createState() => _MyHomePageState();  
}  
  
 class _MyHomePageState extends State<MyHomePage> {  
 int _counter = 0;  
  
 void _incrementCounter() {  
  setState(() {  
   _counter++;  
  });  
 }  
  
 @Override  
 Widget build(BuildContext context) {  
  return Scaffold(  
   appBar: AppBar(  
    title: Text(widget.title),  
   ),  
   body: Center(  
    child: Column(  
     mainAxisAlignment: MainAxisAlignment.center,  
     children: <Widget>[  
      Text(  
       'You have pushed the button this many times:',  
      ),  
      Text(  
       '$_counter',  
       style: Theme.of(context).textTheme.headline4,  
      ),  
     ],  
    ),  
   ),  
   floatingActionButton: FloatingActionButton(  
    onPressed: _incrementCounter,  
    tooltip: 'Increment',  
    child: Icon(Icons.add),  
   ),  
  );  
 }  
}