Flutter Scaffold
Read about Flutter Scaffold, its uses, properties and the importance of Scaffold widget in Flutter Apps.
The Scaffold widget is the base of the screen for a single page. It is used to implement the basic functional layout structure of an app. You can easily implement functional widgets like AppBar, FloatingActionButton, ButtonNavigationBar, Drawer, and many more widgets on the app using the Scaffold widget.
You can easily build an app using Scaffold and implement basic components with very less code, it can allow you to put all the material components to give look and feel to your app.
Constructors of Scaffold() widget:
Scaffold({
Key key,
PreferredSizeWidget appBar,
Widget body,
Widget floatingActionButton,
FloatingActionButtonLocation floatingActionButtonLocation,
FloatingActionButtonAnimator floatingActionButtonAnimator,
List persistentFooterButtons,
Widget drawer,
Widget endDrawer,
Widget bottomNavigationBar,
Widget bottomSheet,
Color backgroundColor,
bool resizeToAvoidBottomPadding,
bool resizeToAvoidBottomInset,
bool primary: true,
DragStartBehavior drawerDragStartBehavior:
DragStartBehavior.start,
bool extendBody: false,
bool extendBodyBehindAppBar: false,
Color drawerScrimColor,
double drawerEdgeDragWidth,
bool drawerEnableOpenDragGesture: true,
bool endDrawerEnableOpenDragGesture: true
})
The properties of the constructors are explained below:
1. appBar - PreferredSizeWidget
It is a horizontal bar displayed at the top of the screen. The app bar is one of the main components in your app, without it, your app may seem incomplete. The appBar widget has its own properties like elevation, title, actions, etc.
Scaffold(
appBar: AppBar(
title:Text("AppBar"), //title aof appbar
backgroundColor: Colors.redAccent, //background color of appbar
),
)
2. backgroundColor - Color
This property on Scaffold is used to change the background color of the Scaffold screen.
Scaffold(
backgroundColor: Colors.blue, //set background color of scaffold to blue
)
3. body - Widget
This is the main content property on Scaffold. You have to pass the widget and it will be displayed on the screen.
Scaffold(
body: Center( //content body on scaffold
child: Text("Scaffold Widget")
)
)
4. floatingActionButton - Widget
It is a floating button that is used for quick action.
Scaffold(
floatingActionButton:FloatingActionButton( //Floating action button on Scaffold
onPressed: (){
//code to execute on button press
},
child: Icon(Icons.send), //icon inside button
)
)
5. floatingActionButtonLocation - FloatingActionButtonLocation
This property is used to set location of Floating action button on the screen.
Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
)
6. drawer - Widget
It is a navigation panel where you can put different menu items to navigate. When you add a drawer to Scaffold, the menu icon will appear on appBar.
Scaffold(
drawer: Drawer( //drawer navigation on scaffold
child: SafeArea(
child:Column( //column widget
children: [
ListTile(
leading: Icon(Icons.home),
title: Text("Home Page"),
subtitle: Text("Subtitle menu 1"),
),
ListTile(
leading: Icon(Icons.search),
title: Text("Search Page"),
subtitle: Text("Subtitle menu 1"),
),
//put more menu items here
],
),
),
),
)
Menu Icon on AppBar Leading | Drawer open when click on Menu Icon |
7. bottomNavigationBar - Widget
This component is similar to appBar which is displayed at bottom of the screen. You can pass BottomNavigationBar()
widget or BottomAppBar()
widget on this property.
Scaffold(
bottomNavigationBar: BottomNavigationBar( //bottom navigation bar on scaffold
items: [ //items inside navigation bar
BottomNavigationBarItem(
icon: Icon(Icons.add),
label: "Button 1",
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: "Button 2",
),
BottomNavigationBarItem(
icon: Icon(Icons.camera),
label: "Button 3",
),
//put more items here
],
),
)
You can also set notched shape on bottomNavigationBar
with BottomAppBar()
.
Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar( //bottom navigation bar on scaffold
shape: CircularNotchedRectangle(), //shape of notch
notchMargin: 10, //notche margin between floating button and bottom appbar
child: Row( //children inside bottom appbar
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(icon: Icon(Icons.menu), onPressed: () {},),
IconButton(icon: Icon(Icons.search), onPressed: () {},),
],
),
),
)
Example of Scaffold widget:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( //appbar widget on Scaffold
title:Text("AppBar")
),
floatingActionButton:FloatingActionButton( //Floating action button on Scaffold
onPressed: (){},
child: Icon(Icons.send),
),
drawer: Drawer(), //drawer on scaffold, open with left menu icon
endDrawer: Drawer(), //end drawer on scaffold, open with right menu icon
bottomNavigationBar: BottomNavigationBar( //bottom navigation bar on scaffold
items: [
BottomNavigationBarItem(
icon: Icon(Icons.add),
label: "Button 1",
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: "Button 2",
),
BottomNavigationBarItem(
icon: Icon(Icons.camera),
label: "Button 3",
),
],),
body: Center( //content body on scaffold
child: Text("Scaffold Widget")
)
);
}
}
Output:
Basic App Built with Scaffold()
|
Default Drawer
|
End Drawer
|