The Flutter series: Introduction to the Flutter Drawer control

First, control introduction

An edge slideslip control that slides horizontally from the edge of the Scaffold to display navigation links in the application. Drawers are usually used with the scaffold.drawer property. The child of a drawer is usually a ListView, and the first child is a DrawerHeader, which displays state information about the current user. The rest of the drawer children tend to build ListTile and often have ended AboutListTile.

Two, use method

 Drawer({
    Key key,
    double elevation: 16.0.// The z coordinate of the sidebar drawer relative to its parent
    Widget child,// Sidebar child controls
    String semanticLabel // Semantic labels of the dialog box that the accessibility framework uses to inform the screen of transitions when the drawer is opened and closed
})
  
Copy the code

Common attributes

1. Set up a sidebar child control. The drawer child is usually a ListView, and the first child is a DrawerHeader, which displays state information about the current user. The rest of the drawer children tend to build ListTile and often have ended AboutListTile.

  child: ListView(padding: const EdgeInsets.only(), children: <Widget>[
            // Sidebar child controls
            Container(
              height: 80,),new ClipRect(
              child: new ListTile(
                leading: new CircleAvatar(child: new Text("A")),
                title: new Text('Drawer item A'),
                onTap: () => {},
              ),
            ),
            new ListTile(
              leading: new CircleAvatar(child: new Text("B")),
              title: new Text('Drawer item B'),
              subtitle: new Text("Drawer item B subtitle"),
              onTap: () => {},
            ),
            new AboutListTile(
              icon: new CircleAvatar(child: new Text("Ab")),
              child: new Text("About"),
              applicationName: "Test",
              applicationVersion: "1.0",
              applicationIcon: new Image.asset(
                "images/ymj_jiayou.gif",
                width: 64.0,
                height: 64.0,
              ),
              applicationLegalese: "applicationLegalese",
              aboutBoxChildren: <Widget>[
                new Text("BoxChildren"),
                new Text("box child 2")],),),Copy the code

2. Sets the z position of the sidebar drawer relative to its parent.

Elevation: 10, // The z coordinates of the sidebar drawer relative to its parent.Copy the code

3. Set the semantic TAB of the dialog box that the accessibility framework uses to inform the screen of transitions when opening and closing drawers.

 semanticLabel: 'Semantic tag'

Copy the code

A complete example

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

void main() => runApp(MaterialApp(
      title: 'MaterialApp'.// A one-line description used to identify the application for the user
      theme: ThemeData(
        // The theme colors used to apply various UIs
        primarySwatch: Colors.red,
      ),
      color: Colors.red, // The primary color used for applications in the operating system interface. On Android, this is the color used by applications in the Application switcher.
      home: MaterialAppDemo(), // The main interface of the MaterialApp display
      routes: <String, WidgetBuilder>{
        // The top navigation table of the application, which is used by the multi-page application to control the page jump, similar to the url of the web page
        "/MaterialApp": (BuildContext context) => TabBarView(),
      },
      initialRoute: ' '.// The route name displayed first. The default value is window.defaultroutename
      navigatorObservers: List<NavigatorObserver>(),
      debugShowMaterialGrid: false.// Whether to display material design base layout grid, used to debug UI tools
// showPerformanceOverlay:
/ / true, / / display performance TAB, https://flutter.io/debugging/#performanceoverlay
// showSemanticsDebugger: true,
/ / debugShowCheckedModeBanner: true, / / performance debugging tools
    ));

class MaterialAppDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material Appbar'),
      ),
      body: Center(
        child: Text('MaterialApp Demo'),
      ),
      drawer: Drawer(
          child: ListView(padding: const EdgeInsets.only(), children: <Widget>[
            // Sidebar child controls
            Container(
              height: 80,),new ClipRect(
              child: new ListTile(
                leading: new CircleAvatar(child: new Text("A")),
                title: new Text('Drawer item A'),
                onTap: () => {},
              ),
            ),
            new ListTile(
              leading: new CircleAvatar(child: new Text("B")),
              title: new Text('Drawer item B'),
              subtitle: new Text("Drawer item B subtitle"),
              onTap: () => {},
            ),
            new AboutListTile(
              icon: new CircleAvatar(child: new Text("Ab")),
              child: new Text("About"),
              applicationName: "Test",
              applicationVersion: "1.0",
              applicationIcon: new Image.asset(
                "images/ymj_jiayou.gif",
                width: 64.0,
                height: 64.0,
              ),
              applicationLegalese: "applicationLegalese",
              aboutBoxChildren: <Widget>[
                new Text("BoxChildren"),
                new Text("box child 2")
              ],
            ),
          ]),
          elevation: 10.// The z coordinate of the sidebar drawer relative to its parent.
          semanticLabel: 'Semantic tag' // Semantic TAB of the dialog box that the accessibility framework uses to inform the screen of transitions when the drawer is opened and closed,)); }}Copy the code