Flutter study notes (18) - Drawer drawer assembly Flutter study notes (18) - Drawer drawer assembly

For reprint, please indicate the source: Flutter study notes (18) - Drawer assembly Drawer

Drawer (drawer assembly) may be implemented into the drawer-like pull-out and push effects navigation panel can be pulled out from the sidebar. Drawer assemblies are typically used in combination and ListView.

Drawer and component properties described

Property name	Types of	Defaults	Explanation
child	Widget		Drawer The child objects may be placed in any displayable
elevation	double	16	z-coordinate in order of the ink sheet assembly design

 

 

 

 

 

 

 

Drawer head assembly may add effects, and can be implemented DrawerHeader UserAccountsDrawerHeader two components.

DrawerHeader: Display basic information

UserAccountsDraweHeader: show user avatar, username, Email and other information

 

And component properties described DrawerHeader

Property name	Types of	Explanation
decoration	Decoration	decoration header area, typically used to set a background color or background image
curve	Curve	If the decoration has changed, the animation curve and time duration settings set curve will be used to do a handover animation
child	Widget	Content control header inside the displayed
padding	EdgeInsetsGeometry	padding header inside the contents of the control finger. If the child is null, then the value is invalid
margin	EdgeInsetsGeometry	header around the gap

 

 

 

 

 

 

 

 

 

And component properties described UserAccountsDrawerHeader

Property name	Types of	Explanation
margin	EdgeInsetsGeometry	Header around the gap
decoration	Decoration	decoration header area, typically used to set a background color or background image
currentAccountPicture	Widget	Used to set the current user's avatar
otherAccountsPictures	List<Widget>	Other user account is used to set the current avatar
accountName	Widget	The current user name
accountEmail	Widget	The current user Email
onDetailsPressed	VoidCallBack	When the callback function accountName or accountEmail is clicked when triggered, it can be used to display other additional information

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Demo sample:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  final List<Tab> _mTabs = <Tab>[
    Tab(text: 'Tab1',icon: Icon(Icons.airline_seat_flat_angled),),
    Tab(text: 'Tab2',icon: Icon(Icons.airline_seat_flat_angled),),
    Tab(text: 'Tab3',icon: Icon(Icons.airline_seat_flat_angled),),
  ];
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Drawer Demo',
      home: DefaultTabController(
          length: _mTabs.length,
          child: new Scaffold(
            appBar: new AppBar(
              //自定义Drawer的按钮
              leading: Builder(
                  builder: (BuildContext context){
                    return IconButton(
                        icon: Icon(Icons.wifi_tethering),
                        onPressed: (){
                          Scaffold.of(context).openDrawer();
                        }
                    );
                  }
              ),
              title: new Text('Drawer Demo'),
              backgroundColor: Colors.cyan,
              bottom: new TabBar(
                  tabs: _mTabs
              ),
            ),
            body: new TabBarView(
                children: _mTabs.map((Tab tab){
                  return new Center(
                    child: new Text(tab.text),
                  );
                }).toList()
            ),
            drawer: Drawer(
              Child: the ListView ( 
                Children: <Widget>[ 
                  Container ( 
                    height: 150 , 
                    Child: UserAccountsDrawerHeader ( 
                        // set the username 
                        accountName: new new the Text ( " Drawer Demo drawer assembly ' ),
                         // set the user's mailbox 
                        accountEmail: new new the Text ( ' www.baidu. COM ' ),
                         // set the current user's avatar 
                        currentAccountPicture: new new CircleAvatar (
                          the backgroundImage: new new assetimage ( ' 
                  ),Images / timg.jpg ' ), 
                        ), 
                        // callback events 
                        onDetailsPressed: () { 
                        }, 
                    ), 
                  ), 
                  ListTile ( 
                    leading: Icon (Icons.wifi), 
                    title: new new the Text ( ' wireless network. 1 ' ), 
                    SUBTITLE: new new Text ( ' I am the subtitle ' ), 
                  ListTile ( 
                    leading: Icon (Icons.wifi), 
                    title: new new Text ( ' wireless network 2 ' ), 
                    SUBTITLE: new new Text ( ' I am the subtitle ' ), 
                  ), 
                  ListTile ( 
                    leading: Icon (Icons.wifi), 
                    title: new new Text ( ' wireless networks. 3 ' ), 
                    sUBTITLE: new new the Text ( ' I subtitle ' ), 
                    onTap in: () { 
                      Print ( ' ssss ' ); 
                    }, 
                  ), 
                  ListTile ( 
                    leading: Icon (Icons.wifi), 
                    title: new new the Text ( " wireless network. 4 ' ), 
                    SUBTITLE: new new the Text ( ' I subtitle ' ), 
                  ), 
                ], 
              ), 
            ), 
          ) 
      ) , 
    ); 
  } 
}

 

Screenshot results:

Demo feeling nothing to explain, is generally simple usage, especially say something, add Drawer assembly, Scaffold will automatically give us generate a Drawer button if we appBar manually set the leading, indeed can change the icon of this button, but click on this icon will not pop Drawer, so if we need to customize the Drawer icon, then, requires the following process:

            leading: Builder(
                  builder: (BuildContext context){
                    return IconButton(
                        icon: Icon(Icons.wifi_tethering),
                        onPressed: (){
                          Scaffold.of(context).openDrawer();
                        }
                    );
                  }
              ),