A month of Flutter: initial theme

I don't have a full theme designed yet but I am planning on going in a clean and minimalist direction. So let's take the current default design and clean it up a little.

Screenshot of default Material Design

There are a couple of changes to the code for this theme cleanup. The first we'll cover is changing the status bar and navigation bar colors. The SystemChrome change will go in the main function. We'll also have to import services to get access to SystemChrome.

import 'package:flutter/services.dart';

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

  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      statusBarColor: Colors.white,
      systemNavigationBarColor: Colors.white,
      systemNavigationBarDividerColor: Colors.black,
      systemNavigationBarIconBrightness: Brightness.dark,
    ),
  );
}

Note that a full restart of the app is needed for the system UI color changes.

The next change is customizing the theme on MaterialApp. These changes disable the debug banner, tell MaterialApp to be in light brightness mode, and set a few colors to white. The title is also changed to just Birb.

MaterialApp(
  debugShowCheckedModeBanner: false,
  title: 'Birb',
  theme: ThemeData(
    brightness: Brightness.light,
    primaryColor: Colors.white,
    scaffoldBackgroundColor: Colors.white,
  ),
  home: const MyHomePage(title: 'Birb'),
);

The next change is to center the title of the AppBar and remove it's elevation (shadow).

AppBar(
  title: Center(
    child: Text(widget.title),
  ),
  elevation: 0.0,
),

And the final change is to update and center the placeholder text. This will eventually turn into a widget to display when there are no images to show.

const Center(
  child: Text('No Birbs a birbing'),
)

Now we have this nice clean base theme to continue building on.

Screenshot of new clean design

If you want to learn more about theming Flutter apps, check out the Building Beautiful UIs with Flutter codelab.

Code changes

Posts in this series

  • A month of Flutter
  • A month of Flutter: create the app
  • A month of Flutter: configuring continuous integration
  • A month of Flutter: continuous linting
  • A month of Flutter: upgrading to 1.0
  • A month of Flutter: initial theme
  • A month of Flutter: no content widget
  • A month of Flutter: a list of posts
  • A month of Flutter: extract post item widget
  • A month of Flutter: post model and mock data
  • A month of Flutter: rendering a ListView with StreamBuilder
  • A month of Flutter: Stream transforms and failing tests
  • A month of Flutter: real faker data
  • A month of Flutter: rendering network images
  • A month of Flutter: FABulous authentication
  • A month of Flutter: configure Firebase Auth for Sign in with Google on Android
  • A month of Flutter: configure Firebase Auth for Sign in with Google on iOS
  • A month of Flutter: Sign in with Google
  • A month of Flutter: mocking Firebase Auth in tests
  • A month of Flutter: delicious welcome snackbar
  • A month of Flutter: navigate to user registration
  • A month of Flutter: user registration form
  • A month of Flutter: testing forms
  • A month of Flutter: setting up Firebase Firestore
  • A month of Flutter: awesome adaptive icons
  • A month of Flutter: set up Firestore rules tests
  • A month of Flutter: Firestore create user rules and tests
  • A month of Flutter: WIP save users to Firestore
  • A month of Flutter: user registration refactor with reactive scoped model
  • A month of Flutter: the real hero animation
  • A month of Flutter: a look back

  • Category: Development