Flutter Scaffold Widget | RRTutors

Flutter Scaffold Widget

Scaffold is the page display framework

Scaffold has different attributes to handle the Pages


appBar: An AppBar displayed at the top of the interface, which is the ActionBar and Toolbar in Android

body: the main content widget displayed in the current interface floatingActionButton: FAB defined in paper and ink design, the main function button of the interface

persistentFooterButtons: Buttons that are fixed to the bottom, such as OK and Cancel buttons below the dialog box

drawer: sidebar control

backgroundColor: The background color of the content. The default value is ThemeData.scaffoldBackgroundColor.

bottomNavigationBar: the navigation bar displayed at the bottom of the page 


resizeToAvoidBottomPadding: similar to 

android: windowSoftInputMode = ”adjustResize” in Android, 

controls whether the content body of the interface is rearranged to avoid the bottom being covered, for example, when the keyboard is displayed, the re-layout is to avoid covering the content with the keyboard. The default value is true


class ScffoldHomePage extends StatefulWidget {


 State<StatefulWidget> createState() {

   return ScffoldHomePageState();




class ScffoldHomePageState extends State<ScffoldHomePage> {


 num index =0;


 List <Widget> pageWidgetList =[







 Widget build(BuildContext context) {


   return Scaffold(


     appBar: AppBar(

       title: Text("HomePage"),

       backgroundColor: Colors.pink,





     floatingActionButton: FloatingActionButton(

       child: Text("++"),


       onPressed: () {




       tooltip: "Click tooltips",


       backgroundColor: Colors.pink,


       focusColor: Colors.green,


       hoverColor: Colors.purpleAccent,


       splashColor: Colors.deepPurple,


       foregroundColor: Colors.white,


       elevation: 0.0,


       highlightElevation: 20.0,



     floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,


     persistentFooterButtons: <Widget>[



         style: TextStyle(color: Colors.blue),








     drawer: Container(

       color: Colors.grey,

       width: 120,

       child: FlatButton(

         child: Text("Close Left Swipe"),

         onPressed: () {






     endDrawer: Container(

       color: Colors.orange,

       width: 200,

       height: 800,

       child: FlatButton(

         child: Text("Close Right Swipe",style: TextStyle(color: Colors.white),),

         onPressed: () {






     bottomNavigationBar:new BottomNavigationBar(


       backgroundColor: Colors.pink,

       items: <BottomNavigationBarItem>[


       BottomNavigationBarItem(icon:Icon(Icons.home,color: index==0?Colors.white:Colors.white,),title: Text("Home",style: TextStyle(color: index==0?Colors.white:Colors.white),) ),

       BottomNavigationBarItem(icon:Icon(Icons.search,color: index==1?Colors.white:Colors.white,),title: Text("Search",style: TextStyle(color: index==1?Colors.white:Colors.white),)  ),

       BottomNavigationBarItem(icon:Icon(Icons.people,color: index==2?Colors.white:Colors.white,),title: Text("Account",style: TextStyle(color: index==2?Colors.white:Colors.white),)  ),


onTap: (flag) {

         print("flag $flag");

         index = flag;

         setState(() {});


       currentIndex: index,

     ) ,





Scaffold Widget