Make a Material Design login page with Flutter — Theming
Colors and fun!
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:
Shall we, 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.