Flutter: Global Styles for AppBar using AppBarTheme

Last updated on May 15, 2021 Pennywise Loading... Post a comment

If your app has many screens with different app bars, using themes will bring many benefits such as: reducing the amount of code to write, increasing the consistency of the appearance of the app.

In Flutter, we can implement a theme for app bars using the AppBarTheme class. You can set app-wide styles for app bar elements such as background color, font color, title color, icon color, etc. It is totally fine If you want to override a few things for a specific app bar (we’ll do this in the example below).

Overview

Constructor:

AppBarTheme({
  Brightness? brightness, 
  Color? color, 
  Color? backgroundColor, 
  Color? foregroundColor, 
  double? elevation, 
  Color? shadowColor, 
  IconThemeData? iconTheme, 
  IconThemeData? actionsIconTheme, 
  TextTheme? textTheme, 
  bool? centerTitle, 
  double? titleSpacing, 
  TextStyle? toolbarTextStyle, 
  TextStyle? titleTextStyle, 
  SystemUiOverlayStyle? systemOverlayStyle, 
  bool? backwardsCompatibility
})

Most settings will be automatically applied but with titleTextStyle, you have to add it to each screen, like this:

AppBar(
        title: Text(
          'Kindacode.com',
          // You need to add this line
          style: Theme.of(context).appBarTheme.titleTextStyle,
        ),
),

For more clarity, let’s see the following example.

Example

App Preview

The app we are going to build has three screens (HomePage, AboutPage, ContactPage) associated with three app bars.

All of the app bars will have a deep purple background, amber action buttons according to the appBarTheme. The back buttons in AboutPage and ContactPage are red. The titles in HomePage and ContactPage are light blue and align to the left. As for the title in AboutPage, it is overwritten to white and aligned center.

The demo:

The Code

Here’s the complete code with explanations:

// main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      theme: ThemeData(
          primarySwatch: Colors.pink,
          appBarTheme: AppBarTheme(
              backgroundColor: Colors.deepPurple,
              // This will be applied to the "back" icon
              iconTheme: IconThemeData(color: Colors.red),
              // This will be applied to the action icon buttons that locates on the right side
              actionsIconTheme: IconThemeData(color: Colors.amber),
              centerTitle: false,
              elevation: 15,
              titleTextStyle: TextStyle(color: Colors.lightBlueAccent))),
      home: HomePage(),
    );
  }
}

// Home Screen
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Kindacode.com',
          style: Theme.of(context).appBarTheme.titleTextStyle,
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.home),
            onPressed: () {},
          )
        ],
      ),
      body: Center(
        child: ElevatedButton(
            child: Text(
              'Go To About Screen',
            ),
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => AboutPage()));
            }),
      ),
    );
  }
}

// About Screen
class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Override the global settings
        title: Text(
          'About Screen',
          style: Theme.of(context)
              .appBarTheme
              .titleTextStyle
              .copyWith(color: Colors.white),
        ),
        centerTitle: true,
        actions: [IconButton(icon: Icon(Icons.info), onPressed: () {})],
      ),
      body: Center(
        child: ElevatedButton(
            child: Text('Go to Contact screen'),
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => ContactPage()));
            }),
      ),
    );
  }
}

// Contact Screen
class ContactPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Contact Screen',
          style: Theme.of(context).appBarTheme.titleTextStyle,
        ),
        actions: [IconButton(icon: Icon(Icons.contact_mail), onPressed: () {})],
      ),
      body: Center(
        child: Text('Contact Screen'),
      ),
    );
  }
}

Note: All AppBarTheme properties are null by default. When null, the AppBar computes its own default values, typically based on the overall theme’s ThemeData.colorScheme, ThemeData.textTheme, and ThemeData.iconTheme. (for example, the background color is from primaryColor or primarySwatch). You can find more information in the official docs.

Conclusion

We’ve gone over the fundamentals of applying a theme for app bars in Flutter. This will help your app have a high degree of consistency, increasing your brand awareness and identity. If you’d like to explore more new and fascinating stuff about mobile development, take a look at the following articles:

You can also take a tour around our Flutter topic page, or Dart topic page for the latest tutorials and examples.

Related Articles

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x