Brand

Flutter Themes

Themes are used for the UI appearance of our app. It helps us make the user interface more attractive and better usable by the user.We mainly use themes for adding the colors and font styles and size of text throughout the app.

Nowadays we have to provide two types of themes for the user: a Light and a Dark theme.

We can theme by these methods

  1. By creating a unique ThemeData
  2. By extending the parent theme

By creating a unique ThemeData

This approach is used when we do not want to inherit any themes from the default theme of the application like colors or font styles. In that case, we create a instance of ThemeData() and pass it to the Theme widget, as shown below:

Theme(  
  data: ThemeData(  
    accentColor: Colors.blue,  
  ),  
  child: FloatingActionButton(  
    onPressed: () {},  
    child: Icon(Icons.person),  
  ),  
);

By extending the parent theme

If we don’t want to override the default theme, we can extend the parent theme. It can be handled using the copyWith() method. See the below code snippet:

Theme(  
  data: Theme.of(context).copyWith(accentColor: Colors.blue),  
  child: FloatingActionButton(  
    onPressed: null,  
    child: Icon(Icons.person),  
  ),  
);

How to use a Theme

After defining a theme, we can use it in build() methods with the Theme.of(context) method.

Lets see an the syntax:
Container(  
  color: Theme.of(context).accentColor,  
  child: Text(  
    'Text with a background color',  
    style: Theme.of(context).textTheme.headline,  
  ),  
);

Let us understand how to use ThemeData in Flutter application through the below example.

import 'package:flutter/material.dart';  
  
void main() {runApp(MyApp());}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      theme: ThemeData(  
        // Define the default brightness and colors.  
        brightness: Brightness.dark,  
        primaryColor: Colors.lightBlue,  
        accentColor: Colors.green,  
  
        // Define the default font family.  
        fontFamily: 'Monotype Coursiva',  
  
        // Define the TextTheme that specifies the default  
        // text styling for headlines, titles, bodies of text, and more.  
        textTheme: TextTheme(  
          headline: TextStyle(fontSize: 32.0, fontStyle: FontStyle.italic, fontFamily: 'Hind')  
        ),  
      ),  
      home: MyThemePage(),  
    );  
  }  
}  
  
class MyThemePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter Theme Example'),  
      ),  
      body: Center(  
        child: Container(  
          color: Theme.of(context).accentColor,  
          child: Text(  
            'Themes contains the graphical appearances that makes the user interface more attractive.',  
            style: Theme.of(context).textTheme.headline,  
          ),  
        ),  
      ),  
      floatingActionButton: Theme(  
        data: Theme.of(context).copyWith(  
          colorScheme:  
          Theme.of(context).colorScheme.copyWith(secondary: Colors.blue),  
        ),  
        child: FloatingActionButton(  
          onPressed: null,  
          child: Icon(Icons.person),  
        ),  
      ),  
    );  
  }  
}
Output

flutter-theme

Previous
Next
Subscribe Now