Material Component Widget

App Bar

drawer

In this chapter, i would like to introduce appbar widget. As you see on top image, there are three widgets inside of appbar widget. Here are characteristics of each widget.

1.types of widget

leading

This is a widget to display before the title.

title

This is typically a Text widget containing a description of the current contents of the app.

actions

Widgets to display after the title widget. Typically these widgets are IconButtons


Let me explain App UI with words.

  1. Change theme with yellow color from "hello world" files.

  2. Add Menu as leading widget on the left and add search widget on the right


In this guide, i would like to make separated page class objects like below.

  1. main.dart

  2. home_page.dart

Let's move inside of flutter project and make "pages" folder under "lib" folder. and make "home_page.dart" inside of "pages" folder.

2.main.dart

Here is main.dart files

import 'package:flutter/material.dart';
import './pages/home_page.dart';

void main() => runApp(HomeApp());

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'appTitle',
      theme: ThemeData(primarySwatch: Colors.amber, fontFamily: 'Ubuntu'),
      home: HomePage(),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  • Line 2 code : Import "home_page.dart" into main.dart to utilize them inside of main.dart code. Line 12 code is that we inject "home_page.dart" code inside of widget.
  • Line 11 code : change theme color with yello which is amber color.

3.home_page.dart

Here is home_page.dart files

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.menu),
        title: Text('Tutorial'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'search',
            onPressed: null,
          )
        ],
      ),
      
      .... 
      
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  • Line 7 code : Declare appbar. There will be "leading","title" and "actions" inside of it.
  • Line 8 code : This is leading widget and it draws menu icon.
  • Line 9 code : This set title with "tutorial"
  • Line 10 code : Declare actions widget and draw search icon inside of it and set onPressed event as null

4.Final code of "home_page.dart"

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.menu),
        title: Text('Tutorial'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'search',
            onPressed: null,
          )
        ],
      ),
      body: Center(
        child: Text(
          'Tutorial Page',
          style: TextStyle(fontSize: 40),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(
              icon: Icon(Icons.business), title: Text('Business')),
          BottomNavigationBarItem(
              icon: Icon(Icons.school), title: Text('School')),
        ],
      ),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

Drawer

drawer


Let me explain App UI with words.

  1. Let's add drawer UI function on the menu icon (top left corner)

  2. Add user name, user avatar icon and type user email

  3. Add sub menu on that drawer which is "Tutorial page" and "About page"

  4. If you click sub menu, page will be redirected to that page


1.Basic file setting

Let's create "about_page.dart" under "pages" folder as about page screen. Here is "main.dart" file and import "about_page.dart" into "main.dart"

import 'package:flutter/material.dart';
import './pages/home_page.dart';

void main() => runApp(HomeApp());

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'appTitle',
      theme: ThemeData(primaryColor: Colors.amber, fontFamily: 'Ubuntu'),
      home: HomePage(),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  • Line 12 code : This is code that connect with "home_page.dart"

2. Add Drawer widget

Let's move to "home_page.dart" and add Drawer widget inside of scaffold widget.

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      .....

      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.all(0),
          children: <Widget>[
            UserAccountsDrawerHeader(
              currentAccountPicture: CircleAvatar(
                backgroundColor: Colors.white,
                child: Icon(
                  Icons.people,
                  size: 40,
                  color: Colors.lightBlueAccent,
                ),
              ),
              accountName: Text(
                'David Muller',
                style: TextStyle(fontSize: 25),
              ),
              accountEmail: Text('abcdefg@gmail.com'),
              decoration: BoxDecoration(
                color: Colors.lightBlueAccent,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
  • Line 9 code : Declare drawer widget
  • Line 10 code : This is ListView that "A scrollable list of widgets arranged linearly." and mostly used scrolling widget. Here is further tutorial guide link for list view
  • Line 11 code : Set padding for list view. To make padding init, we use EdgeInsets class Here is link for detail explanation for edgeInset class
  • Line 13 - 21 code : Let's add UserAccountsDrawerHeader widget and setup CircleAvatar inside of widget. Inside of circle avatar, we can add icon widget.
  • Line 22 - 25 code : Let's add accountName / accountEmail widget

Type of EdgeInset class for padding


EdgeInsets.all() - This creates insets all inset value

EdgeInsets.fromLTRB() - This creates inset each value for left/top/right/bottom

EdgeInsets.fromWindowPadding() - This creates inset for given window screen.

EdgeInsets.only() - This creates inset for only the given values non-zero

EdgeInsets.symmetric() - This creates inset for symmetrical vertical and horizontal offsets


3. Add ListTile widget

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      ... //Appbar & bottomNavbar & body

      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.all(0),
          children: <Widget>[


            ... // UseraccountHeader widget 


            ListTile(
              title: Text(
                'tutorial',
                style: TextStyle(fontSize: 18),
              ),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                Navigator.of(context).pop();
                Navigator.of(context).pushNamed('/a');
              },
            ),
            ListTile(
              title: Text(
                'about',
                style: TextStyle(fontSize: 18),
              ),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                Navigator.of(context).pop();
                Navigator.of(context).pushNamed('/b');
              },
            ),
          ],
        ),
      ),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
  • Line 19 code : Declare ListTile widget
  • Line 20 - 27 code : I add "title", "trailing" and "onTap" widget inside of it. "trailing" widget is "Widget to place at the end of the navigation bar. Normally additional actions taken on the page such as a search or edit function."onTap widget define method that route link for each page using pushNamed() inside of this, it is route link name.

4. Final code for "main.dart"

import 'package:flutter/material.dart';
import './pages/home_page.dart';
import './pages/about_page.dart';

void main() => runApp(HomeApp());

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'appTitle',
      theme: ThemeData(primaryColor: Colors.amber, fontFamily: 'Ubuntu'),
      home: HomePage(),
      routes: <String, WidgetBuilder>{
        "/a": (BuildContext context) => HomePage(),
        "/b": (BuildContext context) => AboutPage("About Page"),
      },
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  • First let's add "import './pages/about_page.dart';" and define route link inside of main.dart(Line 14 - 17 code) "/a" is name of route link that will be used for "HomePage", "/b" is name of route link that will be used for "about Page"

5. Final code for "home_page.dart"

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("tutorial page"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'search',
            onPressed: null,
          )
        ],
      ),
      body: Center(
        child: Text(
          'tutorial page',
          style: TextStyle(fontFamily: 'Ubuntu', fontSize: 30),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.all(0),
          children: <Widget>[
            UserAccountsDrawerHeader(
              currentAccountPicture: CircleAvatar(
                backgroundColor: Colors.white,
                child: Icon(
                  Icons.people,
                  size: 40,
                  color: Colors.lightBlueAccent,
                ),
              ),
              accountName: Text(
                'David Muller',
                style: TextStyle(fontSize: 25),
              ),
              accountEmail: Text('abcdefg@gmail.com'),
              decoration: BoxDecoration(
                color: Colors.lightBlueAccent,
              ),
            ),
            ListTile(
              title: Text(
                'tutorial',
                style: TextStyle(fontSize: 18),
              ),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                Navigator.of(context).pop();
                Navigator.of(context).pushNamed('/a');
              },
            ),
            ListTile(
              title: Text(
                'about',
                style: TextStyle(fontSize: 18),
              ),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                Navigator.of(context).pop();
                Navigator.of(context).pushNamed('/b');
              },
            ),
          ],
        ),
      ),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

6. Final code for "about_page.dart"

import 'package:flutter/material.dart';

class AboutPage extends StatelessWidget {
  final String title;

  AboutPage(this.title);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(
          'this is about page',
          style: TextStyle(fontFamily: 'Ubuntu', fontSize: 20),
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Bottom Navigation Bar