This article is written for Android developers who want to apply their existing knowledge to create mobile applications using Flutter. In this article, we'll look at the equivalent of Activity in Flutter.
do it .
 
Dart is based on the concept of OOP, so Android-developers can easily begin to use it.
 
Objective
 
At the end of the article, we will be able to create a user interface for Activity using Flutter widgets, which will look like this:
 

 
In general, if you look inside the Android project generated with Flutter and open the file AndroidMenifest.xml , you will find that there is only one Activity there, for example, FlutterActivity . But in this article, we will focus on designing a user interface for Activity in Flutter. How? With the help of scaffold (English ? scaffolding ).
 

Scaffold

Scaffold is a set of widgets that visually represent the user interface for Activity. Typically, Activity is used to display one screen, which consists of many View-components, such as toolbar, menu, sidebar, snack bar, FAB, etc. A FrameLayout It is used as a container for fragments in the Activity. In scaffold, all this is represented in the form of widgets.

Remember, any component in Flutter is widget .

The image above clearly demonstrates the components of scaffold, which provides an API for displaying sidebar, bottom panel, toolbar, content area.

Because scaffold is a material widget, it must be inherited from some other material-components, but we'll discuss it in more detail in other articles. Now we will focus on creating a scaffold-widget.

    import 'package: flutter /material.dart';
void main () => runApp (new MaterialApp (
? home: new Scaffold (
),
));    

When you run this code, you will see a white blank screen, because you have not added anything to the scaffold yet. So let's define the background color with the property backgroundColor and set the color to yellow:

    void main () => runApp (new MaterialApp (
? home: new Scaffold (
? backgroundColor: Colors.yellowAccent,
),
));    

Now you will see the fully yellow screen of your application. You can play around with other scaffold properties, a full list of which you can find in official documentation .

Now we know how to create a scaffold. Let's explore its main properties one by one.

1. AppBar (Toolbar)

AppBar is essentially the same as Toolbar , which we use in our Activity. The picture shows where is displayed. the AppBar property. .

•  
  

• leading : The widget that appears before the header. It can be a hamburger menu icon or a back button.

  
   
   
  

• title : the title of the toolbar, wrapped in the widget Text .

  
   
   
  

• actions : this is the equivalent of menu.xml , in which we create the set to display menu items. The actions property takes a list of widgets to display in the menu. Usually these widgets are represented as IconButtons , which are equivalent to .

  
   
   
  

• bottom : Usually used for TabBar , located under the AppBar.

  
   
   
  

• flexibleSpace : this widget is used to create the effect CollapsingToolbarLayout (collapsing toolbar).

  
   
   
  

So, you can create a simple Appbar with an icon, title and menu:

    import 'package: flutter /material.dart';
void main () = newApBar (
? leading: new Icon (Icons.menu),
) title: new Text ("My Title"),
actions:    .[
new IconButton(
icon: new Icon(Icons.shopping_cart),
onPressed: () {},
),
new IconButton(
icon: new Icon(Icons.monetization_on),
onPressed: () {},
)
],
),
),
));    

This is the result. It looks exactly like the usual toolbar, which we usually use. You can experiment with adding or removing widgets, adding a style or color to a specific widget.

As a practical exercise, you can study the rest of the AppBar's properties and work with them.

2. Body (container for any View-component)

This is the main component of the scaffold. It works just like the Fragment Container on Android. A widget is required to display in the container area. This is the area where we display the main content to the user. In our example, for simplicity, we'll add a red color to the body. In real life, in addition to the background color, many other widgets are used, for example, ListView, Row, Column, Stack, etc.

    import 'package: flutter /material.dart';
void main () = newApBar (
? leading: new Icon (Icons.menu),
) title: new Text ("My Title"),
Actions:    .[
new IconButton(
icon: new Icon(Icons.shopping_cart),
onPressed: () {},
),
new IconButton(
icon: new Icon(Icons.monetization_on),
onPressed: () {},
)
],
),
Body: new Container (
.colors.red,
),
),
));    

The body is displayed behind AppBar, FAB and the side menu. Despite the fact that we applied the yellow background to the scaffold, the screen displays a red body color that overlaps the scaffold background.

3. Drawer (DrawerLayout)

This widget is DrawerLayout in Android, which leaves the left side of Activity to display the navigation links of the application.

Drawer is usually used with the property Scaffold.drawer . As in Android, we use NavigationView inside DrawerLayout . The table below shows equivalent View components in Android and Flutter.

The child component of the Drawer widget is usually ListView whose first element is DrawerHeader , which displays information about the current user. The rest of the list items are usually created using ListTiles . The following code shows how Drawer is created:

    import 'package: flutter /material.dart';
void main () => runApp (new MaterialApp (
) home: new Scaffold (
.clearColor: Colors.yellowAccent,
.appBar: new AppBar (
.title: new Text ("My Title"),
actions:   [
new IconButton(
icon: new Icon(Icons.shopping_cart),
onPressed: () {},
),
new IconButton(
icon: new Icon(Icons.monetization_on),
onPressed: () {},
)
],
),
, Drawer: new Drawer (
, Child: new ListView (
, Children:    .[
new DrawerHeader(
child: new Text("Drawer Header"),
decoration: new BoxDecoration(
color: Colors.blue,
),
),
new Text("Item 1"),
new Text("Item 2"),
new Text("Item 3"),
new Text("Item 4"),
new Text("Item 5"),
new Text("Item 6"),
],
),
),
),
));    

That's the result you should get. It's worth noting that when you add a Drawer widget to the scaffold in AppBar, the hamburger menu icon is automatically added, so all other icons should be removed.

For more information about this widget, see practical example from the documentation or devoted to this topic separate article .

4. BottomNavigationBar (BottomNavigationView)

The material widget displayed at the bottom of the application, BottomNavigationBar consists of several elements in the form of text and icons.

BottomNavigationBar is usually applied using the Scaffold.bottomNavigationBar property.

In Android, you define menu items in BottomNavigationView with the property app: menu = "@ menu /my_navigation_items" , where my_navigation_items Is a list of all menu items in the tag . Flutter uses the property items , which takes as an argument the list BottomNavigationBarItem , each of which consists of an icon, title and background color in the menu.

    import 'package: flutter /material.dart';
void main () => runApp (new MaterialApp (
? home: new Scaffold (
? backgroundColor: Colors.yellowAccent,
? appBar: ,
) body: ,
drawer: ,
BottomNavigationBar: new BottomNavigationBar (items:[
new BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text("Home"),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.search),
title: new Text("Search"),
)
]),
),
));    

Now we have a BottomNavigationBar with two menu items.

To process a click and change content in scaffold, you need a widget that supports state preservation and some manual work. This topic is beyond the scope of this article, but you can read about it in official documentation .

Also, let's add FAB to the scaffold. Below is the complete code for creating our Activity UI with scaffold.

    import 'package: flutter /material.dart';
void main () => runApp (new MaterialApp (
) home: new Scaffold (
.clearColor: Colors.yellowAccent,
.appBar: new AppBar (
.title: new Text ("My Title"),
actions:   [
new IconButton(
icon: new Icon(Icons.shopping_cart),
onPressed: () {},
),
new IconButton(
icon: new Icon(Icons.monetization_on),
onPressed: () {},
)
],
),
body: new Container (
colors.red,
),
Drawer: new Drawer (
Child: new ListView (
, Children:    .[
new DrawerHeader(
child: new Text("Drawer Header"),
decoration: new BoxDecoration(
color: Colors.blue,
),
),
new Text("Item 1"),
new Text("Item 2"),
new Text("Item 3"),
new Text("Item 4"),
new Text("Item 5"),
new Text("Item 6"),
],
),
),
BottomNavigationBar: new BottomNavigationBar (items:[
new BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text("Home"),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.search),
title: new Text("Search"),
)
]),
FloatingActionButton: new FloatingActionButton (
OnPressed: () {},
    child: new Icon (Icons.add),
),
),
));    

Now the FAB method is onPressed indefined. Therefore, the button will not respond to touch. If necessary, you can add processing for this event.
 
Finally, we obtained the result, which was discussed at the beginning of this article.
 
Conclusion
 
Flutter is a powerful tool for fast development of a quality, beautiful user interface. It provides many widgets to create a flexible interface with attractive animations. Scaffold - one of them, and this is just the tip of the iceberg. In the following articles, consider other topics.