Flutter control – the Scaffold

Flutter controls exercise demo address: github

1. Introduction to the

The Scaffold implements the basic Material Design layout structure

Various layout elements that are defined on a single interface like left bars (Drawers), snack bars, and (bottom pop-ups) bottom sheets are supported in Scaffold. (BottomNavigationBar)BottomNavigationBar

2. Basic usage

Scaffolding has the following major properties:

• AppBar: An appBar displayed at the top of the interface

• Body: The main content Widget displayed in the current interface

• FloatingActionButton: FAB defined in Material design, the main function button of the interface

• FloatingActionButtonLocation: floatingActionButton position

• FloatingActionButtonAnimator: floatingActionButton animation

• Drawer: left sidebar control

• EndDrawer: right sidebar control

• BackgroundColor: content of background color, the default is used ThemeData. ScaffoldBackgroundColor values

• BottomNavigationBar: The navigation bar displayed at the bottom of the page

• BottomSheet: something that pops up at the bottom (basically useless)

• PersistentFooterButtons: Buttons that are fixed to the bottom of the display, such as the CONFIRM and cancel buttons at the bottom of the dialog box (mostly useless)

• ResizeToAvoidBottomPadding: control interface content body whether or not to the bottom of the layout to avoid being covered, such as when the keyboard display, layout again to avoid being the keyboard cover. The default value is true.

3. The Demo pictures

4. Demo

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ScaffoldDemo(),
    );
  }
}


class ScaffoldDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: _appBar(),
      body: _body(),
      floatingActionButton: new FloatingActionButton(
        tooltip: 'Add', // used by assistive technologies
        child: new Icon(Icons.add),
        onPressed: null,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
      drawer: _drawer(context),
      endDrawer: Drawer(child: Text("Right drawer")),
      bottomNavigationBar: _BottomNavigationBar(),
    );
  }

  AppBar _appBar() {
    returnNew AppBar(// If there is a sidebar with default items on the right, click default to open the left sidebar. If there is no sidebar, return arrow title: new Text('Example title'),
      actions: <Widget>[
        new IconButton(
          icon: new Icon(Icons.search),
          tooltip: 'Search'OnPressed: null,), new IconButton(icon: new icon (Icons. Access_time), tooltip:'time',
          onPressed: null,
        ),
      ],
    );
  }

  Drawer _drawer(BuildContext context) {
    returnDrawer( child: ListView( padding: EdgeInsets.zero, children: <Widget>[ DrawerHeader( decoration: BoxDecoration( color: LightBlueAccent,), child: Center(Child: SizedBox(Width: 60.0, height: 60.0, child: CircleAvatar(child: Text)'avatar'),
                ),
              ),
            ),
          ),
          ListTile(
            title: Text('Item 1'),
            leading: new CircleAvatar(
              child: new Icon(Icons.school),
            ),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: Text('Item 2'),
            leading: new CircleAvatar(
              child: new Text('B2'),
            ),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: Text('Item 3'), leading: new CircleAvatar( child: new Icon(Icons.list), ), onTap: () { Navigator.pop(context); },),],),); } Builder_body() {
    return Builder(builder: (BuildContext context) {
      return Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              child: Text('Show snackbar (Text has no onPressed property)'),
              onPressed: () {
                Scaffold.of(context).showSnackBar(SnackBar(
                  content: Text('I am a snackbar))); }, ), RaisedButton( child: Text('Show BottomSheet (Text has no onPressed property)'),
              onPressed: () {
                Scaffold.of(context).showBottomSheet((BuildContext context) {
                  return ListView(
                    padding: EdgeInsets.zero,
                    children: <Widget>[
                      ListTile(
                        title: Text('Item 1'),
                        leading: new CircleAvatar(
                          child: new Icon(Icons.school),
                        ),
                        onTap: () {
                          Navigator.pop(context);
                        },
                      ),
                      ListTile(
                        title: Text('Item 2'),
                        leading: new CircleAvatar(
                          child: new Text('B2'),
                        ),
                        onTap: () {
                          Navigator.pop(context);
                        },
                      ),
                      ListTile(
                        title: Text('Item 3'), leading: new CircleAvatar( child: new Icon(Icons.list), ), onTap: () { Navigator.pop(context); },),,); }); },),],),); }); Class _BottomNavigationBar extends StatefulWidget {const _BottomNavigationBar() : super(); @override State<StatefulWidget> createState() => _BottomNavigationBarFullDefault(); } / / BottomNavigationBar default instance, stateful class _BottomNavigationBarFullDefault extends the State {int _currentIndex = 1; void _onItemTapped(int index) {if(mounted) {
      setState(() {
        _currentIndex = index;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      type: BottomNavigationBarType fixed, / / BottomNavigationBarType defined types, there are fixed and shifting iconSize two types: CurrentIndex: _currentIndex, BottomNavigationBarItem _onItemTapped, // Click the callback function of the button inside with the currently clicked index fixedColor: color.blue, // Iftype<BottomNavigationBarItem> [BottomNavigationBarItem(title: Text(BottomNavigationBarItem))"Home page"), icon:  Icon(Icons.home)),
        BottomNavigationBarItem(
            title:  Text("Discovered"), icon:  Icon(Icons.search)),
        BottomNavigationBarItem(
            title:  Text("I"), icon: Icon(Icons.image)), ], ); }}Copy the code

Pay attention to the point

• When there is a navigation bar, the default left side of the appbar is the item, and clicking on opens the navigation bar. You can also set the icon manually
• Scaffold.of(context) will generate an error when building (BuildContext) before scaffolding. (BuildContext Context) {}) to call or final GlobalKey _scaffoldKey = GlobalKey(); To hang up
• BottomNavigationBar is stateful by default, and you can change the state yourself
• Must introduce import ‘package: flutter/material. The dart’, and the root must be MaterialApp, because he belongs to the MaterialApp things

Using ScaffoldState

ScaffoldState can replace open sidebar and snackbar _scaffoldKey. The currentState. OpenDrawer (); The default open on the left sidebar _scaffoldKey. CurrentState. ShowSnackBar

import 'package:flutter/material.dart';

class ScaffoldStateDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _ScaffoldStateDemo();
}

class _ScaffoldStateDemo extends State with SingleTickerProviderStateMixin {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text("ScaffoldStateDemo"),
      ),
      body: RaisedButton(
        child: Text('display snackbar),
        onPressed: _showSnackBar,
      ),
    );
  }

  _showSnackBar() {
    _scaffoldKey.currentState
        .showSnackBar(SnackBar(content: Text("Opened with ScaffoldState."))); }}Copy the code