Building Material Design Apps in Flutter
For many, UI design is difficult and time-consuming. Hope is not lost, however. Thanks to Flutter’s Material library, developers can quickly create beautiful and distinct mobile apps.
Who Should Read This
This post is intended for those new to Flutter mobile app development and can create new projects and have a basic understanding of concepts such as Flutter’s Stateful and Stateless widgets.
What is Material Design
Material design is an approach to design that has successfully unified the best traits of user experience and good design.
Developed by Google in 2014, it promotes a uniform app experience across different platforms. Google’s own products like Keep, Meet and Maps, as well as popular apps like WhatsApp and DropBox, follow Material Design guidelines. This can result in apps with unified and distinct identities.
Flutter Material Library
Some of the widgets included in the Flutter Material library are Checkboxes, Radio Buttons, Text Fields, DateTime Pickers and an assortment of Buttons. Standard fare for any UI Framework.
Key to developing apps that follow material design guidelines are the so-called “Convenience” widgets: MaterialApp and Scaffold.
Creating a Material Design App
Before proceeding with our first Material Design project, we need to become acquainted with the MaterialApp and Scaffold widgets.
MaterialApp Widget
The MaterialApp widget delivers quite a lot of functionality, with support for themes, navigation, and localisation. Below is an example of a minimal Flutter Material App.
MaterialApp has many named parameters/properties. We’ll touch on some of those later in the post. For now, we set only the home property, specifying the first screen/widget to display — a Scaffold.
Scaffold Widget
Something’s missing from our app above. For one, the toolbar that runs across the top is absent. The bottom navigation bar is also missing and one of those floating buttons would spruce things up!
The Scaffold widget is responsible for implementing this material design visual layout structure and provides an API for showing drawers, snack bars, bottom sheets, app bars and floating buttons.
Let’s expand our basic app above to give the Scaffold a white background with a blue AppBar at the top. A blue FloatingActionButton will be positioned at the bottom right corner of the Scaffold.
Create a new Flutter project using VSCode or Flutter CLI and overwrite the file lib/main.dart with the code below. Press F5 to run the app.
An improvement over our first attempt.
A few things to notice here:
- The home parameter of the MaterialApp widget is now assigned a Stateful widget MyStatefulWidget. This widget’s state object defines the Scaffold.
- The Scaffold widget’s properties appbar, body and floatingActionButton are assigned values. The AppBar widget displays the title of the app using a child Text widget and a single IconButton action widget.
- The body is assigned a Text widget, placed in a Center widget to centre the text within the Scaffold.
- The Scaffold widget automatically fills the screen, allowing the Text to be centred vertically and horizontally.
- The debug banner has been removed by setting the MaterialApp widget’s debugShowCheckedModeBanner parameter to false.
- Clicking the floating button and action does not perform any operations…yet 😅
Let’s Navigate
When the user clicks the login action, we’d like to transition to a new screen. Screen transitions in Flutter are managed by the Navigation widget.
Navigation & Routes
Screens in the Flutter world are called routes. The routes are arranged in a Stack and the Navigator manages the stack using the methods Navigator.push() and Navigator.pop().
Navigating to the Another screen
Let’s demonstrate the switching from one route to another by building a new screen/widget which we will navigate to when the user clicks the Login action on our AppBar.
Some important points to note:
- Line 51: We’ve added a new StatelessWidget called LoginRoute. It displays a button, which, when pressed, will cause the app to navigate back to the home screen
- Line 31: The Login action button’s OnPressed callback now switches to a new route, using the navigator.push() method. The push() method requires a route to add to the stack of routes managed by Navigator. Here we’re using MaterialPageRoute to create a new route for our second screen.
- Line 62: Returning to the home screen is a little easier. We simply need to pop the last route off the stack. This is achieved using the pop() method.
Summary
That concludes our introduction to the Flutter MaterialApp library. We’ve covered how to quickly construct a Material Design themed app using the MaterialApp and Scaffold widgets and utilised the Navigator widget to transition between screens in your Flutter app.
