Make a Material Design login page with Flutter — Theming

Colors and fun!

Vaibhav Khulbe

Published in

codeburst

5 min readDec 21, 2018

NOTE: This is a three-part series having the following parts:

Part 1 — The Basics
Part 2 — Theming (this story)
Part 3 — Dark Theme

What will I make?

This:

Theming made our UI tonnes times better!

Shall we, theme❔

Things become interesting when you theme!

This part is all about theming your app and that includes the following:

Changing app colors
Creating custom themes
Changing fonts and labels
Enhancing buttons
Using shapes

Colors

Quite a lot to cover. Let’s continue on from where we left. Inside the lib folder of our project, create a new file named colors.dart. We’ll define all our colors in this file. One thing to note here is that we need to follow Material style colors for our app, so whatever colors you choose make sure you choose wisely. You can refer to Marta Kakozwa’s article if you’re stuck. Also, you cannot just define a color value straightaway in hex in Dart. To know how to use colors, you can check out the readme file of my Knockdown Flutter repo on GitHub. Here’s how I’ve defined my primary color:

const myPrimaryColor = const Color(0xFFE91E63);

Typically, you’ll need a primary and an accent color. Now that we’ve colors defined, we can apply them to our UI.

Our very own theme!

In our app.dart file, first import Colors.dart and then use ThemeData class to build the new theme. This is how you do this:

final ThemeData myAppTheme = buildTheme();

Now Flutter knows that there is a new theme named myAppTheme. We need to define all our colors to the buildTheme() method. First, let’s create the default light theme, therefore for theme base we assign it to ThemeData.light(). Next, return the copyWith method with all its properties i.e. accentColor, primaryColor, buttonColor etc. At the end of the build function of the MaterialApp widget, set the theme to our newly created theme. That’s it.

We’ve created and implemented a custom theme. If you’ll run the app, it should have the updated color scheme.

Fonts

Time to play with fonts! I’ll use the Lato font, you can download it free from Google Fonts or latofonts.com. Flutter’s ThemeData class has three text themes to modify. We’ll change the headline, caption, and the title. After you’ve downloaded the TTF files of your favorite font (and font style like Medium or Regular), we need to put those files under project root > assets > fonts folder. To let Flutter know that we’re using this font, we need to add new code to the pubspec.yaml file. After the flutter: tag, add the following code

fonts:
  - family: Lato
    fonts:
      - asset: fonts/Lato-Regular.ttf
      - asset: fonts/Lato-Medium.ttf
      - asset: fonts/Lato-Bold.ttf
      - asset: fonts/Lato-Semibold.ttf
        weight: 500

Make sure you indent the YAML code correctly. You IDE/code editor should show you some warnings or suggested commands/indentation.

Change labels too!

Open app.dart and just after buildTheme() method, make a new one like _buildAppTextTheme() for our text theme. Here too we need to return the copyWith method with headline, title and caption properties. Give it a desired fontWeight and fontSize. After you’re done with the three, we need to actually use the apply() method at the end, providing the fontFamily and other properties like displayColor or bodyColor. Now it’s time to use it by the following code inside the buildTheme() method:

textTheme: _buildAppTextTheme(base.textTheme),
primaryTextTheme: _buildAppTextTheme(base.primaryTextTheme),
accentTextTheme: _buildAppTextTheme(base.accentTextTheme),

This is the new code that we wrote for text theme:

Move further by applying custom decoration. For this, we use the InputDecorationTheme class. In app.dart, under our buildTheme() method, we need to specify this class. This is done as:

inputDecorationTheme: InputDecorationTheme(
  border: OutlineInputBorder(),
),

We’ve applied a border around our input fields. Re-run the app and tap on one of the input fields (while you’re typing).

Let’s override the default accent color to make some new changes on the input. Open login.dart and make a new class named AccentOverride. This will take a constructor returning the Theme along with the accent color data.

We did this to apply the AccentOverride class to our input text fields. In the same file, change the username and password text fields with the newly created class and notice the updated changes.

Elevate the button

Our login page will become more ‘modern’ and Materialistic if we add a touch of elevation to our primary call-to-action button i.e. the NEXT button. In the same file where you’re right now, lookup for the RaisedButton, that’s our primary button widget. All we need to do is add a line of code which says:

elevation: 8.0,

You can always alter the value of elevation. 8.0 looks decent. This step is important in Material Design as all of the Material Design Components (MDCs) have elevation values.

Shape it!

Flutter has unique classes which are developed just to add custom shapes to the Material components. Here we’ll implement it in our input fields. Open app.dart, add the following to the inputDecorationTheme property of our theme:

border: OutlineInputBorder(
  borderRadius: const BorderRadius.all(Radius.elliptical(20, 20)),
  gapPadding: 10.0,
),

All I did was added a borderRadius property of an elliptical shape by giving it the x and y radius of 20 respectively to match our UI. Plus, there’s some padding applied to it via the gapPadding property. You can learn more about the parent class OutlineInputBorder here.

Oh, we forgot to shape our primary button! Well, that’s super easy. We just need to add the shape property to the RaisedButton widget class, give it the RoundedRectangleBorder with borderRadius of 10.0 and there we have it!

shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(10.0)),

We can shape out components to match the app brand, here we don’t have a specific brand type, therefore rounded button works.

Almost there…

We’ve covered all things Material to make the final UI. Do you think we should stop here? Maybe, if you do, then you’ll miss developing a dark theme for the app. Decide wisely! 😉

Liked this story? Feel free to clap and motivate me to write more and better. Did I miss something? Any suggestions? The comment box below serves the exact purpose!

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurston Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.