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

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).

https://docs.flutter.io/flutter/material/AppBar-class.html

leading: A widget to display before the title. This is the widget where usually a hamburger icon or back button is displayed.

title: Toolbar title goes here wrapped in a Text widget.

title goes here wrapped in a widget. actions: This is equivalent to menu.xml where 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/> .

where we set list of 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 . bottom: The bottom is usually used for a TabBar below the Appbar.

below the Appbar. flexibleSpace : This widget is used create a CollapsingToolbarLayout effect 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