According to Material Design visual layout structure, a mobile application screen comprises of several Components like App bar, which features the name of Application, Navigation Drawer or Bottom Navigation, which is to provide access to different screen and some other application functionalities, and Floating action button that performs the frequent or common action on the screen fig(a).
Flutter, as it promises, provides an easy way to add these components on screen using Scaffold widget. Scaffold widget allow you to implement the Material design visual layout structure on the screen where you use Scaffold widget as a root widget of you screen layout.
NOTE : For Scaffold widget, you must use the MaterialApp as a root widget of your application, line 9, otherwise you can not use Scaffold Widget.
Scaffold widget provides some properties which you can use to add above mentioned components
1. drawer:
Using this property, you can define your Navigation Drawer to show slidable menu on screen. Flutter gives Drawer widget for making Navigation Drawer. you can use some widget as well as a drawer. However, its better to use Drawer widget in drawer property of Scaffold. Following is the code for drawer.
drawer: Drawer(
child: ListView(
children: <Widget>[
ListTile(title: Text("Home"), leading: Icon(Icons.home),),
ListTile(title: Text("About"), leading: Icon(Icons.info),),
ListTile(title: Text("Settings"), leading: Icon(Icons.settings),),
],
),
),
2. appBar:
You can use this property to define the App bar, which usually show the title of the application. Flutter has AppBar widget. Following is the code for defining appBar for the application screen.
appBar: AppBar(
title: Text("My Application"),
),
3. floatingActionButton:
You can use this property to define the Floating action button for the screen, which usually on screen to perform most frequent or most common action. Flutter has FloatingActionButton widget for defining floatingActionButton property. Following is the code for defining floatingActionButton for the application screen.
floatingActionButton: FloatingActionButton(
onPressed: (){},
child: Icon(Icons.add),
backgroundColor: Colors.redAccent,
),
4. bottomNaviagtionBar
This is used to show Bottom Navigation bar on screen, which provides access to different screens and different functionalities of application. The different between Drawer Navigation and Bottom Navigation is that bottom Navigation is fixed at the bottom of the screen, while Drawer is slidable. Flutter has BottomNavigationBar widget to define bottomNavigationBar property. Following is the code for bottomNavigationBar.
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(title: Text("Home"), icon: Icon(Icons.home)),
BottomNavigationBarItem(title: Text("Contact"), icon: Icon(Icons.contact_mail)),
BottomNavigationBarItem(title: Text("Settings"), icon: Icon(Icons.settings)),
],
),
5. body
For defining the main content of the screen, Scaffold has body proper, you can give any sort of widget tree in the body of Scaffold widget
body: Container(
width: double.infinity,
height: double.infinity,
child: Center(
child: Text("Hello world"),
),
),
So That's It!
We have learnt that why we actually use scaffold widget, and what we can achieve using Scaffold widget as a root widget for screen. If you found this article helpful, and want to learn more then head over my YouTube channel.
YouTube : https://youtube.com/EasyApproach
Thanks!