Scaffold Widget for the Flutter foundation layout

Scaffolding, as the name implies, is the basis on which we build and lay out widgets that are displayed in a single interface defined in Material. It provides widgets such as: Bottom drawers (bottom sheets) buttons (bottom sheets) and bottom notices (snack bars), you can think of it as a basic container Widget with quick implementation of certain layouts.

appBar

• The title of navigation

  appBar: AppBar(
    // Navigation title
    title: Text('Scaffold Title'),
    // Shadow size
    elevation: 10.// Menu on the right of navigation bar
    actions: <Widget>[
      IconButton(
          icon: Icon(Icons.shopping_cart), tooltip: "Shopping", onPressed: null)].// Whether the title is drama
    centerTitle: true.// Button on the left of navigation bar
    leading: IconButton(
        icon: Icon(Icons.menu), tooltip: "Menu", onPressed: null),
    // Whether to automatically implement the default leading when the navigation bar is empty
    automaticallyImplyLeading: true,),Copy the code

body

• The content part

body: Text("body data"),
Copy the code

bottomNavigationBar

• Bottom navigation section

  bottomNavigationBar: BottomNavigationBar(
    items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
      BottomNavigationBarItem(
          icon: Icon(Icons.business), title: Text("Business")),
      BottomNavigationBarItem(
          icon: Icon(Icons.school), title: Text("School")),
    ],
    currentIndex: _selectedIndex,
    fixedColor: Colors.blue,
    onTap: _onItemTap,
  ),
Copy the code

drawer

• Side slide menu section

  drawer: Drawer(
    child: Drawer(
      child: DrawerHeader(
        child: Text("DrawerHeader"),),),),Copy the code

floatingActionButton

• Bottom hover button

  floatingActionButton: FloatingActionButton(
    onPressed: null,
    child: Text("Button"),),Copy the code

Complete sample

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ScaffoldExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState(a) {
    returnScaffoldExampleState(); }}class ScaffoldExampleState extends State<ScaffoldExample> {
  int _selectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Navigation title
        title: Text('Scaffold Title'),
        // Shadow size
        elevation: 10.// Menu on the right of navigation bar
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.shopping_cart), tooltip: "Shopping", onPressed: null)].// Whether the title is drama
        centerTitle: true.// Button on the left of navigation bar
        leading:
            IconButton(icon: Icon(Icons.menu), tooltip: "Menu", onPressed: null),
        // Whether to automatically implement the default leading when the navigation bar is empty
        automaticallyImplyLeading: true,
      ),
      body: Text("body data"),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
          BottomNavigationBarItem(
              icon: Icon(Icons.business), title: Text("Business")),
          BottomNavigationBarItem(
              icon: Icon(Icons.school), title: Text("School")),
        ],
        currentIndex: _selectedIndex,
        fixedColor: Colors.blue,
        onTap: _onItemTap,
      ),
      drawer: Drawer(
        child: Drawer(
          child: DrawerHeader(
            child: Text("DrawerHeader"),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: null,
        child: Text("Button"),),); }void _onItemTap(int index) { setState(() { _selectedIndex = index; }); }}Copy the code