Theme color Flutter, how to use in web app

In Flutter 3.0 theme color we’ll use Material design 3. Certainly we will adopt the same principle in our ongoing web app.

However, we need to understand how we can configure the overall visual Theme for a MaterialApp or a widget subtree within the app.

That’s the first step.

In fact, this section will explain the basics. After that we will discuss how we can implement the same principle in our web app using Material design 3.

The theme property of the MaterialApp configures the appearance of the whole app.

As an outcome, we can implement the same pattern across the whole app. Most importantly it helps us to customise the color, font and many more.

First of all, we need to fill our ThemeData widget properties with custom colours.

In addition it will help us to maintain a custom theme. At the same time, we can also change colours at one place like the following:

ThemeData _customTheme() {
    return ThemeData(
    accentColor: Color(0xFF442B2D),
    primaryColor: Color(0xFFFEDBD0),
    buttonColor: Color(0xFFFEDBD0),
    scaffoldBackgroundColor: Colors.white,
    cardColor: Color(0xFF883B2D),
    textSelectionTheme: TextSelectionThemeData(
    selectionColor: Color(0xFFFEDBD0),
    ),
    errorColor: Colors.red,
    buttonTheme: ThemeData.light().buttonTheme.copyWith(
    buttonColor: Color(0xFFFEDBD0),
    colorScheme: ThemeData.light().colorScheme.copyWith(
    secondary: Color(0xFF442B2D),
    ),
    ),
    buttonBarTheme: ThemeData.light().buttonBarTheme.copyWith(
    buttonTextTheme: ButtonTextTheme.accent,
    ),
    primaryIconTheme: ThemeData.light().primaryIconTheme.copyWith(
    color: Color(0xFF442B2D),
    ),
    );
    }

Wherever we keep this custom colours theme we need to call this method inside MaterialApp.

Because MaterialApp theme property returns ThemeData constructor, we can use the custom color theme method.

class MaterialDesignThemeControl extends StatelessWidget {
    const MaterialDesignThemeControl({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
    // ignore: todo
    // TODO: building custom theme that'll control color and text
    return MaterialApp(
    title: 'Material Design Theme Control',
    home: MaterialDesignCustomTheme(),
    theme: _customTheme(),
    debugShowCheckedModeBanner: false,
    );
    }}

The following line is important here.

theme: _customTheme(),

As a result, we can have this output in our virtual device.

Consequently, changing colors in Flutter using a custom theme becomes easy now.

In one single file, you can add more functionalities.

We always want to make things simple. Isn’t it?

Moreover, from MaterialApp, now you can control the color theme throughout the app.

Theme color across the flutter app

We can control AppBar color through Scaffold widget.

class MaterialDesignCustomTheme extends StatelessWidget {
    const MaterialDesignCustomTheme({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
    title: Text(
    'Material Design Custom Theme',
    style: TextStyle(
    fontSize: 20,
    color: Theme.of(context).primaryColorDark,
    ),
    ),
    backgroundColor: Theme.of(context).scaffoldBackgroundColor,
    ),
    body: CustomPage(),
    );
    }
    }

After that, we can use a CustomPage widget where we can build the page using our custom theme.

class MaterialDesignCustomTheme extends StatelessWidget {
    const MaterialDesignCustomTheme({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
    title: Text(
    'Material Design Custom Theme',
    style: TextStyle(
    fontSize: 20,
    color: Theme.of(context).primaryColorDark,
    ),
    ),
    backgroundColor: Theme.of(context).scaffoldBackgroundColor,
    ),
    body: CustomPage(),
    );
    }
    }

    class CustomPage extends StatelessWidget {
    const CustomPage({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
    return ListView(
    children: [
    Container(
    margin: EdgeInsets.all(10),
    padding: EdgeInsets.all(5),
    decoration: BoxDecoration(
    border: Border.all(
    width: 5,
    color: Theme.of(context).accentColor,
    ),
    ),
    child: Text(
    'Material Design Custom Theme Page',
    style: TextStyle(
    fontSize: 30,
    fontWeight: FontWeight.bold,
    color: Theme.of(context).cardColor,
    ),
    ),
    ),
    Container(
    margin: EdgeInsets.all(10),
    padding: EdgeInsets.all(8),
    child: Card(
    elevation: 30,
    shadowColor: Theme.of(context).cardColor,
    child: Container(
    margin: EdgeInsets.all(10),
    padding: EdgeInsets.all(8),
    child: Column(
    children: [
    TextField(
    decoration: InputDecoration(
    labelText: 'Username',
    labelStyle: TextStyle(
    color: Theme.of(context).primaryColorLight,
    ),
    ),
    ),
    SizedBox(height: 12.0),
    TextField(
    decoration: InputDecoration(
    labelText: 'Password',
    labelStyle: TextStyle(
    color: Theme.of(context).primaryColorLight,
    ),
    ),
    obscureText: true,
    ),
    ButtonBar(
    children: <Widget>[
    TextButton(
    child: Text(
    'CANCEL',
    style: TextStyle(
    color: Theme.of(context).buttonColor,
    ),
    ),
    onPressed: () {},
    ),
    ElevatedButton(
    child: Text(
    'NEXT',
    style: TextStyle(
    color: Theme.of(context).buttonColor,
    ),
    ),
    onPressed: () {},
    ),
    ],
    ),
    ],
    ),
    ),
    ),
    )
    ],
    );
    }
    }

We need to remember a few points here. The Theme.of method can help the other widgets to obtain the custom theme.

Material components typically depend exclusively on the colorScheme and textTheme.

We’ll discuss that topic in the next section when we’ll implement Material design 3.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Python and Data Science

Flutter, Dart and Algorithm

Twitter