Flutter Drawer侧边栏，已经侧边栏内容布局

Flutter Drawer侧边栏

在Scaffold组件里面传入drawer参数可以定义左栏，传入endDrawer可以定义右侧边栏。侧边栏默认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧边栏

效果：

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Drawer',
      home: ScaffoldPage(),
    );
  }
}

class ScaffoldPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Drawer"),
      ),
      drawer: Drawer(
        child: Text("左侧边栏"),
      ),
    );
  }
}

Flutter DrawerHeader头部设置

常见属性：
 

设置头部

coding
 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Drawer',
      home: ScaffoldPage(),
    );
  }
}

class ScaffoldPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Drawer"),
      ),
      drawer: Drawer(
        child: Column(
          children: [
            DrawerHeader(//设置头部
              decoration: BoxDecoration(
                color: Colors.yellow,
                    image:DecorationImage(
                        image: NetworkImage("https://www.itying.com/images/flutter/2.png"), fit:BoxFit.cover
                    )
                ),
               child: ListView(
                 children: [
                   Text("我是一个头部")
                 ],
              ),
            ),
            ListTile(
              title: Text("个人中心"),
              leading: CircleAvatar(
                child: Icon(Icons.people),
              ),
            ),
            Divider(),
            ListTile(
              title:Text("系统设置"),
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Flutter UserAccountsDrawerHeader 用户布局

属性描述：
 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Drawer',
      home: ScaffoldPage(),
    );
  }
}

class ScaffoldPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Drawer"),
      ),
      drawer: Drawer(
        child: Column(
          children: [
            UserAccountsDrawerHeader(
              accountName: Text("达帮主"),//设置名字
              accountEmail: Text("www.1102465673@qq.com"),//设置邮箱
              currentAccountPicture: CircleAvatar(//设置头像
                backgroundImage: NetworkImage("https://www.itying.com/images/flutter/3.png"),
              ),
              decoration: BoxDecoration(//设置背景颜色
                color: Colors.yellow,
                image: DecorationImage(
                  image: NetworkImage("https://www.itying.com/images/flutter/2.png"),
                  fit: BoxFit.cover
                )
              ),
              otherAccountsPictures: [//用来设置当前账户其他账户头像
                Image.network("https://www.itying.com/images/flutter/4.png"),
                Image.network("https://www.itying.com/images/flutter/5.png"),
                Image.network("https://www.itying.com/images/flutter/6.png"),
              ],
            ),
            ListTile(
              title: Text("个人中心"),
              leading: CircleAvatar(
                child: Icon(Icons.people),
              ),
            ),
            ListTile(
              title: Text("系统设置"),
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Flutter 侧边栏路由跳转

效果：

onPressed: (){
                  Navigator.pop(context);//先把Drawer给关闭掉
                  Navigator.pushNamed(context, "/search");//然后在跳转
                },

All coding

import 'package:flutter/material.dart';
import 'package:flutterappbarapp/page/SearchPage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Drawer',
      home: ScaffoldPage(),
      routes: {
        "/search":(context)=>SearchPage(),
      },
    );
  }
}

class ScaffoldPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Drawer"),
      ),
      drawer: Drawer(
        child: Column(
          children: [
            UserAccountsDrawerHeader(
              accountName: Text("达帮主"),//设置名字
              accountEmail: Text("www.1102465673@qq.com"),//设置邮箱
              currentAccountPicture: CircleAvatar(//设置头像
                backgroundImage: NetworkImage("https://www.itying.com/images/flutter/3.png"),
              ),
              decoration: BoxDecoration(//设置背景颜色
                color: Colors.yellow,
                image: DecorationImage(
                  image: NetworkImage("https://www.itying.com/images/flutter/2.png"),
                  fit: BoxFit.cover
                )
              ),
              otherAccountsPictures: [//用来设置当前账户其他账户头像
                Image.network("https://www.itying.com/images/flutter/4.png"),
                Image.network("https://www.itying.com/images/flutter/5.png"),
                Image.network("https://www.itying.com/images/flutter/6.png"),
              ],
            ),
            ListTile(
              title: Text("个人中心"),
              leading: CircleAvatar(
                child: Icon(Icons.people),
              ),
            ),
            ListTile(
              title: Text("系统设置"),
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
            ),
            Container(
              child: RaisedButton(//按钮
                child: Text("Drawer点击跳转"),
                onPressed: (){
                  Navigator.pop(context);//先把Drawer给关闭掉
                  Navigator.pushNamed(context, "/search");//然后在跳转
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}