Widgets 08 | Scaffold
In this tutorial, I will tell you how to use the Scaffold and more in the flutter.
The Scaffold is so important to use in the flutter and I use it so frequently. So we must know how to use it in the right way. We have used this for all of our pages. It is a widget that used to contain our other widget. So let's look at a sample use.
import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';
class ScaffoldPage extends StatefulWidget {
@override
_ScaffoldState createState() => _ScaffoldState();
}
class _ScaffoldState extends State<ScaffoldPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(PageName.SCAFFOLD),
),
body: Container(
alignment: Alignment.center,
constraints: BoxConstraints.expand(height: 50),
color: RED,
child: Text(
"body",
style: TextStyle(fontSize: 30, color: Colors.white),
),
),
);
}
}
We have used the
appBar, the body is a Widget, you can use whatever widget you want. We just use the Container to show a Text. So it will show as follows.So before we start our tutorial we should know the constructor of the
Scaffold. Scaffold({
Key key,
this.appBar,
this.body,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
this.persistentFooterButtons,
this.drawer,
this.endDrawer,
this.bottomNavigationBar,
this.bottomSheet,
this.backgroundColor,
this.resizeToAvoidBottomPadding = true,
this.primary = true,
})
This will show a button at the bottom of the screen. You can custom your own
Widget, but usually, you can use the FloatingActionButton. Let's look at the code as follows.floatingActionButton: Container(
height: 100,
width: 100,
child: FloatingActionButton(
onPressed: () {
print("click floating");
},
child: Text(
"Refresh",
style: TextStyle(fontSize: 20),
),
),
)
If you want the button to show in the bottom-center, you can change the
floatingActionButtonLocation to FloatingActionButtonLocation.centerFloat.It is easy, other location will retain to you as an exercise. floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
The
floatingActionButtonAnimator will change the animation of this button. This is about the animation, I will tell you in the animation part in the next time. If you set this parameter, it will show these widgets at the bottom of the
Scaffold. You need to know that this parameter is a List. Let's look at the code as below. persistentFooterButtons: <Widget>[
RaisedButton(
onPressed: () {},
color: BLUE,
child: Icon(
Icons.add,
color: Colors.white,
),
),
RaisedButton(
onPressed: () {
},
color: RED,
child: Icon(
Icons.clear,
color: Colors.white,
),
),
],
The
persistentFooterButtons part will show below the floatingButtonpart.This parameter will draw a drawer in the left of the screen. When you click the menu on the left, I will show a drawer to you. Usually, we put a
Drawer widget here, if you want to put other widgets here, it doesn't matter, but you should custom your own drawer. So let's look at the constructor of the Drawer to see how to use it.const Drawer({
Key key,
this.elevation = 16.0,
this.child,
this.semanticLabel,
})
We know the
elevation controls the shadow of the widget, the child is a common widget. The semanticLabel is told before. It is just a string to describe the widget, often with voice. So let's use it. Widget _drawer() => Drawer(
child: Column(
children: <Widget>[
AppBar(
title: Text("Articles"),
automaticallyImplyLeading: false,
backgroundColor: RED_LIGHT,
elevation: 0,
),
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 20),
constraints: BoxConstraints.expand(height: 80),
child: Text(
"This is my first article.",
style: TextStyle(fontSize: 20),
),
),
Divider(
height: 0,
color: TEXT_BLACK,
),
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 20),
constraints: BoxConstraints.expand(height: 80),
child: Text(
"This is my second article.",
style: TextStyle(fontSize: 20),
),
),
Divider(
height: 0,
color: TEXT_BLACK,
),
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 20),
constraints: BoxConstraints.expand(height: 80),
child: Text(
"This is my third article.",
style: TextStyle(fontSize: 20),
),
),
Divider(
height: 0,
color: TEXT_BLACK,
),
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 20),
constraints: BoxConstraints.expand(height: 80),
child: Text(
"This is my forth article.",
style: TextStyle(fontSize: 20),
),
),
Divider(
height: 0,
color: TEXT_BLACK,
),
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 20),
constraints: BoxConstraints.expand(height: 80),
child: Text(
"This is my fifth article.",
style: TextStyle(fontSize: 20),
),
),
Divider(
height: 0,
color: TEXT_BLACK,
),
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 20),
constraints: BoxConstraints.expand(height: 80),
child: Text(
"This is my sixth article.",
style: TextStyle(fontSize: 20),
),
),
Divider(
height: 0,
color: TEXT_BLACK,
),
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 20),
constraints: BoxConstraints.expand(height: 80),
child: Text(
"This is my seventh article.",
style: TextStyle(fontSize: 20),
),
),
Divider(
height: 0,
color: TEXT_BLACK,
),
],
),
);
We click the menu widget to show the drawer, but if we want to show by our custom button, what can we do? there are two choice to do.
So we can define a key to the
Scaffold. GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();
And set the key.
Scaffold(
key: _scaffoldKey,
//other codes.
)
In the part of the
persistentFooterButtons, we have two buttons, we call the openDrawer function in the first one. RaisedButton(
onPressed: () {
_scaffoldKey.currentState.openDrawer();
},
color: BLUE,
child: Icon(
Icons.add,
color: Colors.white,
),
),
So, when we click the first one button, it will show the drawer.
We can make a Builder to surround a Button.
Builder(
builder: (context) => RaisedButton(
onPressed: () {
Scaffold.of(context).openDrawer();
},
color: BLUE_DEEP,
child: Icon(
Icons.forward,
color: Colors.white,
),
),
),
It will show as below, when you click the
plus and forward. it will show the drawer.The
endDrawer is the same but with different direction and location. So I do not give the example.This is very common in our real app.It shows that it is a widget, but usually, we use the
BottomNavigationBar. It will show them at the bottom of the screen to switch different pages. Widget _bottomBar() => BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
"Home",
style: TextStyle(fontSize: 20),
)),
BottomNavigationBarItem(
icon: Icon(Icons.linked_camera),
title: Text(
"Capture",
style: TextStyle(fontSize: 20),
)),
],
onTap: (index) {
setState(() {
_index = index;
});
},
currentIndex: _index,
fixedColor: RED,
iconSize: 40,
);
This is a dialog shown at the bottom of the screen, but above the
bottomNavigationBar and persistentFooterButtons. You can use BottomSheet directly as follows. Widget _bottomBar() => BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
"Home",
style: TextStyle(fontSize: 20),
)),
BottomNavigationBarItem(
icon: Icon(Icons.linked_camera),
title: Text(
"Capture",
style: TextStyle(fontSize: 20),
)),
],
onTap: (index) {
setState(() {
_index = index;
});
},
currentIndex: _index,
fixedColor: RED,
iconSize: 40,
);
If you use like the
bottomSheet: _bottomSheet(),It will show as follows.Also, you can call it initiative.But be careful, if you want to use these code below, you should close the bottom before.Then call the function.
_scaffoldKey.currentState
.showBottomSheet((context) => _bottomSheet());
The
backgroundColor is easy. Just change its background color. The primary parameter will make the padding-top of the Scaffold with the status bar to be zero. When set the primary = false, the screen will scroll up. Let's see the code and see the effect.backgroundColor: PURPLE,
primary: false
Today, we have learned the Scaffold, this is a very important widget. There are some widgets, such as the
Drawer,BottomNavigationBar,BottomSheet,FloatingActionButton,AppBar,persistentFooterButtons to construct our Scaffold.Hope you have learned how to use them.Thanks for your reading!
The end.
Facebook Page | Twitter | GitHub | QQ Group |
963828159 |
Last modified 3yr ago