Flutter(Widget)-侧边栏

截屏2022-07-15 13.41.39.png

1.Drawer DrawerHeader

截屏2022-07-15 13.30.24.png

import 'dart:ui';

import 'package:flutter/material.dart';
class ZFLDrawerPage extends StatefulWidget {
  @override
  _ZFLDrawerPageState createState() => _ZFLDrawerPageState();
}

class _ZFLDrawerPageState extends State<ZFLDrawerPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter App"),
      ),
      drawer: Drawer(
        child: Column(
          children: [
          Row(
            children: [
               Expanded(
                child: DrawerHeader(child:
                Text('你好～'),
                  decoration: BoxDecoration(
                      color: Colors.yellow,
                    image: DecorationImage(
                      image: NetworkImage("https://img2.baidu.com/it/u=2634940897,3570608638&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=736"),
                      fit:BoxFit.cover,
                    )
                  ),
                ),
              ),
            ],
          )



            ,ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.home,size: 20,),
              ),
              title: Text('我的控件'),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.home),
              ),
              title: Text('我的控件'),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.home),
              ),
              title: Text('我的控件'),
            ),
            Divider(),

          ],
        ),
      ),
      body: Container(
        margin:
            EdgeInsets.only(top: MediaQueryData.fromWindow(window).padding.top),
        child: Text("drawer页面"),
      ),
    );
  }
}

2.Drawer DrawerHeader

截屏2022-07-15 13.39.34.png

import 'dart:ui';

import 'package:flutter/material.dart';
class ZFLDrawerPage1 extends StatefulWidget {
  @override
  _ZFLDrawerPageState createState() => _ZFLDrawerPageState();
}

class _ZFLDrawerPageState extends State<ZFLDrawerPage1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter App"),
      ),
      drawer: Drawer(
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: UserAccountsDrawerHeader(
                    decoration: BoxDecoration(
                        color: Colors.yellow,
                        image: DecorationImage(
                          image: NetworkImage("https://img2.baidu.com/it/u=3235061297,3044381011&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=360"),
                          fit:BoxFit.cover,
                        )
                    ),
                    accountName: Text('aofeilin'),
                    accountEmail: Text('aofeilin@163.com'),
                    currentAccountPicture: CircleAvatar(
                      backgroundImage: NetworkImage('https://img0.baidu.com/it/u=2757673007,1955967058&fm=253&fmt=auto&app=138&f=JPEG?w=496&h=500'),
                    ),
                  )
                ),
              ],
            ),ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.home,size: 20,),
              ),
              title: Text('我的控件'),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.home),
              ),
              title: Text('我的控件'),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.home),
              ),
              title: Text('我的控件'),
            ),
            Divider(),

          ],
        ),
      ),
      body: Container(
        margin:
        EdgeInsets.only(top: MediaQueryData.fromWindow(window).padding.top),
        child: Text("drawer页面"),
      ),
    );
  }
}