Flutter ThemeData

ThemeData is a class that holds the color and typography values for a material design theme.

It resides in the flutter package and derives from the Diagnosticable class.

class ThemeData extends Diagnosticable

Normally you use this class to configure a Theme widget.

To obtain the current theme you can useTheme.of method.

NB/= Examples will follow soon.

Share

1 Example

  1. Flutter – How to Customize Theme using ThemeData

    In this very simple example, we see how to change or customize theme using the ThemeData class which is the concept being covered in this thread.

    You may want to change properties of a theme like the primary color and accent colors. This is super simple to do in Flutter.

    Here is how you do it:

    runApp(new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new MyHome(),
      // Set the theme's primary color, accent color,
      theme: new ThemeData(
        primarySwatch: Colors.green,
        accentColor: Colors.lightGreenAccent,
        // Set background color
        backgroundColor: Colors.black12,
      ),
    ));

     

    Full Example

    (a). main.dart

    Here is the full code.

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(new MaterialApp(
        debugShowCheckedModeBanner: false,
        home: new MyHome(),
        // Set the theme's primary color, accent color,
        theme: new ThemeData(
          primarySwatch: Colors.green,
          accentColor: Colors.lightGreenAccent,
          // Set background color
          backgroundColor: Colors.black12,
        ),
      ));
    }
    
    class MyHome extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          // AppBar
          appBar: new AppBar(
            // AppBar Title
            title: new Text("Using Theme"),
          ),
          body: new Container(
            // Another way to set the background color
            decoration: new BoxDecoration(color: Colors.black87),
            child: new Center(
              child: new Container(
                // use the theme accent color as background color for this widget
                color: Theme.of(context).accentColor,
                child: new Text(
                  'Hello World!',
                  // Set text style as per theme
                  style: Theme.of(context).textTheme.title,
                ),
              ),
            ),
          ),
    
          floatingActionButton: new Theme(
            // override the accent color of theme for this widget only
            data: Theme.of(context).copyWith(accentColor: Colors.pinkAccent),
            child: new FloatingActionButton(
              onPressed: null,
              child: new Icon(Icons.add),
            ),
          ),
        );
      }
    }
    

     

    Run

    To run simply copy the main.dart file into your project.

    Here is what you get:

    This project was created by @nisrulzĀ .

     




Share an Example

Share an Example

Browse
What is the capital of Egypt? ( Cairo )