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
    )
)

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("AppBar"), // title of appbar
          backgroundColor: Colors.redAccent, // background color of appbar
        ),
        backgroundColor: Colors.yellow,
        floatingActionButton: FloatingActionButton(//Floating action button on Scaffold
          //To pass data to the back page, you need to put Navigator.push() method
          //on "Click on Me" or any back buttons like below:
          //传递参数到上一页时需要这样设置
            onPressed:() async {
              var backdata = await Navigator.push(context, MaterialPageRoute(builder:(context){
                return SecondScreen(word: "Hello", val: 4);
              }));
              print(backdata);
            },
          child: Icon(Icons.send), // icon inside button
        ),
        body: Center(
            child: TextButton(
                onPressed: () { print("scaffold widget text button clicked"); },
                child: Text("Scaffold Widget"),

            )
        )
    );
  }
}

效果如下

5. floatingActionButtonLocation - FloatingActionButtonLocation

This property is used to set location of Floating action button on the screen.

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
      ],
    ),
   ),
  ),
)

很形象的关键字——抽屉。

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
    ],
  ),
)

这个就是底部的appBar

如果用另一种

bottomNavigationBar: BottomAppBar(
  //bottom navigation bar on scaffold
  child: Text(
    "hello buttom",textAlign: TextAlign.center,
  ),
)

效果如下

You can also set notched shape on bottomNavigationBar with BottomAppBar().

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("AppBar"), // title of appbar
          backgroundColor: Colors.redAccent, // background color of appbar
        ),
        backgroundColor: Colors.white,
        floatingActionButton: FloatingActionButton(
          //Floating action button on Scaffold
          //To pass data to the back page, you need to put Navigator.push() method
          //on "Click on Me" or any back buttons like below:
          //传递参数到上一页时需要这样设置
          onPressed: () async {
            var backdata = await Navigator.push(context,
                MaterialPageRoute(builder: (context) {
              return SecondScreen(word: "Hello", val: 4);
            }));
            print(backdata);
          },
          child: Icon(Icons.send), // icon inside button
        ),
        //This property is used to set location of Floating action button on the screen.
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        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"),
                  onTap: () {
                    //fixme not work
                    (context) => HomePage();
                  },
                ),
                ListTile(
                    leading: Icon(Icons.search),
                    title: Text("Search Page"),
                    subtitle: Text("Subtitle menu 1"),
                    onTap: () {
                      //fixme not work
                      (context) => SecondScreen(word: "searchWord", val: 5);
                    }),

                //put more menu items here
              ],
            ),
          ),
        ),
        bottomNavigationBar: BottomAppBar(//bottom navigation bar on scaffold
          shape: CircularNotchedRectangle(), //shape of notch
          notchMargin: 10, //notche margin between floating button and bottom appbar
          //bottom navigation bar on scaffold
          child: Row( //children inside bottom appbar
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children:[
                IconButton(onPressed: (){}, icon: Icon(Icons.menu)),
                IconButton(onPressed: (){}, icon: Icon(Icons.search)),
              ]
          ),

          color: Colors.blue,
          // 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
          // ],
        ),
        body: Center(
            child: TextButton(
          onPressed: () {
            print("scaffold widget text button clicked");
          },
          child: Text("Scaffold Widget"),
        )));
  }
}

效果perfect～

作者：​​ukyo--3点买菜​​