Material Component Widget
App Bar
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.
Change theme with yellow color from "hello world" files.
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.
main.dart
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
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
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
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
Let me explain App UI with words.
Let's add drawer UI function on the menu icon (top left corner)
Add user name, user avatar icon and type user email
Add sub menu on that drawer which is "Tutorial page" and "About page"
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
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
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
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
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
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21