Flutter For Android Developers : How to design Activity UI in Flutter.
Note: I’ve moved this blog to my website. I’ll be writing primarily on my new blog, not here. If you want to stay updated on my recent blogs then please subscribe to my new blog. Thanks
This blog is meant for Android developers looking to apply their existing Android knowledge to build mobile apps with Flutter. In this blog, we are going to explore what is equivalent to Activity in Flutter.
Series
- How to design Activity UI in Flutter. (You are here)
- How to design LinearLayout in Flutter.
- How to design FrameLayout in Flutter.
Prerequisites
This blog already assumes that you have already setup the flutter in your PC and able to run a Hello World app. If you have not install flutter yet, gets started from here.
Dart is based on the object-oriented concept so as android java developer you will be able to catch up dart very easily.
Goal
At the end of this blog, we will be able to create an Activity UI using flutter widgets which will look like this.
Technically, if you dig into the Android project generate by the flutter and check the AndroidMenifest.xml file, then you will find that it runs on a single activity i.e FlutterActivity. But our aim of this blog is to focus on how to design the activity UI in Flutter? and the answer is…. Scaffold.
Scaffold
A scaffold is widgets which visually represent our Activity UI. As Android developer, we use activity for single screen representation which consists of many views like toolbar, menus, drawer, bottom navigation bar, snack bar, float action button etc. We also use a FrameLayout as Fragment container in our Activity. The scaffold has all this view in-build in the form of widgets.
Remember everything in flutter is a widget.
The above picture is a visual representation of scaffold it provides APIs for showing side and right now, which is our DrawerLayout, Bottom bar which is BottomNavigationView, App bar which is a Toolbar, Content Area which we can consider as FrameLayout container in this example.
Since scaffold is a part of material widgets it requires a material app ancestor, we will discuss in more details about MaterialApp in upcoming blogs. For now, we will focus on how to create a scaffold widget.
import 'package:flutter/material.dart';
void main() => runApp(new MaterialApp(
home: new Scaffold(
),
));When you run this code you will see the white blank screen because you have not defined anything in scaffold yet, so let’s define a background color using the backgroundColor property and set a yellow color like this.
void main() => runApp(new MaterialApp(
home: new Scaffold(
backgroundColor: Colors.yellowAccent,
),
));Now when you run it you will see a full screen covering with the yellow background color. You can play around with different property and check the output using hot reload, you can also check the available property of Scaffold in its official Documentation.
Now we know how to create a Scaffold, we will explore its main property one by one
1. Appbar (Toolbar)
The AppBar displays the toolbar widgets which similar to Toolbar which we use in our activity, The following diagram shows where each Appbar properties appears in the toolbar when the writing language is left-to-right (e.g. English).
- leading: A widget to display before the title. This is the widget where usually a hamburger icon or back button is displayed.
- title:
Toolbartitle goes here wrapped in aTextwidget. - actions: This is equivalent to
menu.xmlwhere we set list of<item/>to display menus, here actions property takes the list of the widget to display menus in Appbar, typically these widgets are IconButtons which is equivalent to<item/>. - bottom: The bottom is usually used for a
TabBarbelow the Appbar. - flexibleSpace : This widget is used create a
CollapsingToolbarLayouteffect with Appbar.
You can create simple Appbar having a leading, title and menus like this:
import 'package:flutter/material.dart';
void main() => runApp(new MaterialApp(
home: new Scaffold(
backgroundColor: Colors.yellowAccent,
appBar: new AppBar(
leading: new Icon(Icons.menu),
title: new Text("My Title"),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.shopping_cart),
onPressed: () {},
),
new IconButton(
icon: new Icon(Icons.monetization_on),
onPressed: () {},
)
],
),
),
));.
This is the output from the above code. It looks exactly like Toolbar view which we use in our Activity, you can play around with this by adding/removing a widget, provide style or color to a specific widget.
As an exercise, you can explore the remaining appbar properties and play with it
2. Body (Container for any view)
This is the primary content of the scaffold. This acts as Fragment Container in Android. It takes a widget to display in the container area. This is the area where we hook up our main content to display to the user. In our example for the sake of simplicity, we are going to add a red color to the body. In a real-world example, it will be way more than just a background color like using ListView, Row, Column, Stack etc.
import 'package:flutter/material.dart';
void main() => runApp(new MaterialApp(
home: new Scaffold(
backgroundColor: Colors.yellowAccent,
appBar: new AppBar(
leading: new Icon(Icons.menu),
title: new Text("My Title"),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.shopping_cart),
onPressed: () {},
),
new IconButton(
icon: new Icon(Icons.monetization_on),
onPressed: () {},
)
],
),
body: new Container(
color: Colors.red,
),
),
));.
The body property is displayed under the app bar and behind the floatingActionButton and a drawer. Even though we have applied a yellow color background to our scaffold, this output displays the red color overlapping the scaffold background.
3. Drawer (DrawerLayout)
This widget represents DrawerLayout view in android that slides in horizontally from the edge of an Activity to show navigation links in an application.
Drawers are typically used with the Scaffold.drawer property. Like in android we use NavigationView inside a DrawerLayout, below tables show the equivalent view in android and flutter for drawer
The child of the drawer is usually a ListView whose first child is a DrawerHeader that displays status information about the current user. The remaining drawer children are often constructed with ListTiles, Below code show how to create a drawer.
.
This will be the output when you run the above code. One thing to notice in the code is that we have removed leading icons from appbar, so whenever you add a drawer to scaffold it automatically adds the hamburger icon to the leading widget of appbar.
For more details on drawer check this.
3. BottomNavigationBar (BottomNavigationView)
A material widget displayed at the bottom of an app for selecting among a small number of views, typically between three and five.
The bottom navigation bar consists of multiple items in the form of text labels, icons, or both, laid out on top of a piece of material.
A bottom navigation bar is usually used with a Scaffold, where it is provided as the Scaffold.bottomNavigationBar argument.
In Android you define menu items in BottomNavigationView using app:menu=”@menu/my_navigation_items” where my_navigation_items has list of all menus in <item/> tag. But in the flutter, we use items property which is having a list of BottomNavigationBarItem which is consist of an icon, title and background color of the menu.
.
As you can see at the bottom we have BottomNavigationBar with two menus.
Handling the click event and changing the view on scaffold body property requires a stateful widget and some manual work which is currently out of scope for this blog but you can explore more on official documentation.
In addition, I have added a floating action button to scaffold. Below is the completed code to display our android activity UI using a scaffold.
.
In float action button If the onPressed callback is null, then the button will be disabled and will not react to touch. So in order to have a touch effect, you need to handle onPressed either keeping it empty of performing any operation.
So finally we have achieved what we promised to build at the beginning of this blog.
Conclusion
Flutter is very powerful tools to develop high-quality, beautiful UI very fast. It has numbers of widgets to build flexible UI with awesome animations. The scaffold is one of them and it’s just a tip of an iceberg. Hope to cover more topics in the upcoming blogs.
Thank you !!!
If you interested in more tips and tricks like this in Flutter, than You can subscribe to my newsletter called Widget Tricks. In this newsletter, we will share the latest tips, tricks, and techniques to help you build beautiful and maintainable mobile apps with Flutter.
If you find this article helpful. Please like,share and clap so other people will see this here on Medium. If you have any quires or suggestions, feel free to hit me on Twitter, Github or Reddit.
To get latest updates for my upcoming blog please follow me on Medium, Twitter, Github or Reddit.
More where this came from
This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.
Follow our publication to see more product & design stories featured by the Journal team.
