Widgets 07 | AppBar
In this tutorial, you will learn more detail about the AppBar in the flutter.
Before start
In every tutorial, we need create a page to contain our code to show. So let's look at our code.
1
import "package:flutter/material.dart";
2
import 'package:flutter_widgets/const/_const.dart';
3
​
4
class AppBarPage extends StatefulWidget {
5
@override
6
_AppBarState createState() => _AppBarState();
7
}
8
​
9
class _AppBarState extends State<AppBarPage> {
10
@override
11
Widget build(BuildContext context) {
12
return Scaffold(
13
appBar: AppBar(
14
title: Text(PageName.APP_BAR),
15
),
16
body: Text("body"));
17
}
18
}
Copied!
We have used the
AppBar in our code above, just a simple one. It will show a app bar with a title. It is easy to use. It usually use with the appBar parameter of the Scaffold . But in this tutorial, I will try to use it as a common widget to describe its parameter. Hope you do not misunderstand my style.
Constructor
We have use the
AppBar above, So let's look at its constructor.1
AppBar({
2
Key key,
3
this.leading,
4
this.automaticallyImplyLeading = true,
5
this.title,
6
this.actions,
7
this.flexibleSpace,
8
this.bottom,
9
this.elevation = 4.0,
10
this.backgroundColor,
11
this.brightness,
12
this.iconTheme,
13
this.textTheme,
14
this.primary = true,
15
this.centerTitle,
16
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
17
this.toolbarOpacity = 1.0,
18
this.bottomOpacity = 1.0,
19
})
Copied!
So let's look at the its parameters as follows.
automaticallyImplyLeading
If you don't want the left-arrow on the app bar. you can use this parameter to hide it.
1
AppBar _autoLeadBar() => AppBar(
2
title: Text(PageName.APP_BAR),
3
automaticallyImplyLeading: false,
4
);
Copied!
But you should know, if you the leading is not null, then this parameter hasn't effect.
leading
This parameter controls the space as the left-arrow. So if you want to use some special function here. You can use this parameter, it is just a widget, but the space is strict. I often use the
InkWell with a Icon as below.1
AppBar _leadingBar() => AppBar(
2
title: Text(PageName.APP_BAR),
3
leading: InkWell(
4
child: Icon(Icons.menu),
5
onTap: () {
6
print("click menu");
7
},
8
),
9
);
Copied!
actions
If you want to add some widget in the right, the actions parameter you should know to use.
1
AppBar _actionBar() => AppBar(
2
title: Text(PageName.APP_BAR),
3
actions: <Widget>[
4
InkWell(
5
child: Icon(Icons.search),
6
onTap: () {
7
print("click search");
8
},
9
),
10
SizedBox(width: 10),
11
InkWell(
12
child: Icon(Icons.more_vert),
13
onTap: () {
14
print("click more");
15
},
16
),
17
SizedBox(width: 20)
18
],
19
);
Copied!
We have added the search and more icon at the right of the app bar.
bottom
When we look at the definition of the bottom parameter. we can see it is
PreferredSizeWidget.1
final PreferredSizeWidget bottom;
Copied!
It is an abstract class.So we need use its subclass. The
PreferredSize is a good choice to use. The child is a widget, the preferredSize is the Size. 1
Widget _bottomBar() => AppBar(
2
title: Text(PageName.APP_BAR),
3
bottom: PreferredSize(
4
child: Container(
5
alignment: Alignment.center,
6
color: RED,
7
constraints: BoxConstraints.expand(height: 50),
8
child: Text(
9
"bottom",
10
style: TextStyle(fontSize: 30),
11
),
12
),
13
preferredSize: Size(50, 50),
14
),
15
);
Copied!
It will show as follows.
elevation
This parameter controls the shadow of the
AppBar.It is similar with RaiseButton I have tell before. 1
Widget _elevationBar() => AppBar(
2
title: Text(PageName.APP_BAR),
3
elevation: 10,
4
);
Copied!
This will show as right in the picture below.The left one is
elevation = 4.
backgroundColor
If you want to change the color of the
AppBar, you can use the backgroundColor as follows.1
Widget _backgroundBar() => AppBar(
2
title: Text(PageName.APP_BAR),
3
backgroundColor: PURPLE,
4
);
Copied!
brightness
The parameter will change the text, icon color of the status bar.
1
Widget _brightBar() => AppBar(
2
title: Text(PageName.APP_BAR),
3
brightness: Brightness.dark,
4
);
Copied!
iconTheme
When we look at the parameter carefully, we can see it is
IconThemeData, its constructor is below. We have used the color, size several times, so I do not explain it. The opacity controls the transparency of the Icon. The value is from 0 to 1.1
IconThemeData({this.color, double opacity, this.size})
Copied!
Let's use it.
1
Widget _iconThemeBar() => AppBar(
2
title: Text(PageName.APP_BAR),
3
iconTheme: IconThemeData(color: Colors.white, size: 20, opacity: 0.9),
4
);
Copied!
The left-arrow will change to white.
But you should know, if you change the size, it doesn't have an effect.
textTheme
This will control the title of the Text.
1
Widget _textThemeBar() => AppBar(
2
title: Text(PageName.APP_BAR),
3
textTheme: TextTheme(title: TextStyle(color: Colors.white,fontSize: 30)),
4
);
Copied!
It will change the color of the title to white and the
fontSize to 30.
primary
The default value of this parameter is true. When we set to false, the icon and title will move up.
1
Widget _primaryBar() => AppBar(
2
title: Text(PageName.APP_BAR),
3
primary: false,
4
);
Copied!
centerTitle
This parameter is bool, the default value is false.It controls the title whether or not show in the center of the AppBar.
1
Widget _centerBar() => AppBar(
2
title: Text(PageName.APP_BAR),
3
centerTitle: true,
4
);
Copied!
titleSpacing
This parameter will change the distance of the title from left. So the direction is horizontal and the default value is zero.
1
Widget _spaceBar() => AppBar(
2
title: Text(PageName.APP_BAR),
3
titleSpacing: 20,
4
);
Copied!
toolbarOpacity
It will change the transparency of the elements of the
AppBar.1
Widget _toolBar() =>
2
AppBar(
3
title: Text(PageName.APP_BAR),
4
toolbarOpacity: 0.5,
5
);
Copied!
bottomOpacity
We have used the
bottom above, so the bottomOpacity will control the transparency of the part of the bottom.1
Widget _bottomOpBar() => AppBar(
2
title: Text(PageName.APP_BAR),
3
bottomOpacity: 0.5,
4
bottom: PreferredSize(
5
child: Container(
6
alignment: Alignment.center,
7
color: RED,
8
constraints: BoxConstraints.expand(height: 50),
9
child: Text(
10
"bottom with bottomOpacity = 0.5 ",
11
style: TextStyle(fontSize: 20),
12
),
13
),
14
preferredSize: Size(50, 50),
15
),
16
);
Copied!
flexibleSpace
I put this parameter in the last, because it is a bit difficult to use. But if you use it in the
AppBar, it is not so useful. So I will use a SliverAppBar to replace the AppBar to describe this parameter. 1
Scaffold(
2
body: CustomScrollView(
3
slivers: <Widget>[
4
SliverAppBar(
5
// title: Text("hello"),
6
expandedHeight: 100,
7
pinned: true,
8
flexibleSpace: FlexibleSpaceBar(
9
title: Text(PageName.APP_BAR),
10
centerTitle: false,
11
collapseMode: CollapseMode.parallax,
12
background: Container(
13
color: RED,
14
constraints: BoxConstraints.expand(height: 100),
15
child: Image.asset(
16
PageImage.FLUTTER_OPEN,
17
fit: BoxFit.cover,
18
),
19
),
20
),
21
),
22
SliverList(
23
delegate: SliverChildListDelegate([
24
SizedBox(
25
height: 1000,
26
),
27
]),
28
)
29
],
30
),
31
);
Copied!
We should replace all code of the Scaffold with these code. It will show as below.
default
When you scroll to top, It will show as follows.
That's nice!
Conclusion
We have learned how to use the
AppBar in the flutter. It is so common and important to us. So just keep going, we can learn very well about the widgets in the flutter.Thanks for your reading!
The end.
Facebook Page
Twitter
GitHub
QQ Group
​
​
​
Last modified 2yr ago