Flutter 서랍 사이드 바

오늘 우리는 사이드 바를 만들고 상단의 아이콘을 클릭하면 (사이드 바 구성 요소에서 직접 생성됨) 다음과 같은 효과를 얻을 수 있습니다.

main.dart 파일에 복사하여 루트 블로거와 동일한 효과를 실행합니다.
(1) 효과 사진

(2) 구현 방법
드로어 컴포넌트와 자체 컴포넌트는
열과 행 컴포넌트를 구현합니다
배경 이미지 이미지
아바타 clipavatar
(3) 코드 구현

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    debugShowCheckedModeBanner: false,
        home: Scaffold(
      appBar: AppBar(
        title: Text('侧边栏'),
       // centerTitle: true,
      ),
      body:Container(),
       drawer: Drawer(
        child: Column(
          children: <Widget>[
            Row(
              children: [
                Expanded(
                    child: UserAccountsDrawerHeader(
                  accountName: Text("masetr",style: TextStyle(color: Colors.blue,fontSize: 15),),
                  accountEmail: Text("[email protected]",style: TextStyle(color: Colors.blue,fontSize: 15)),
                  currentAccountPicture: CircleAvatar(
                    backgroundImage: AssetImage("images/mouse1.jpg"),
                  ),
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage("images/mouse2.jpg"),
                          fit: BoxFit.cover)),
                )),
              ],
            ),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.home,color: Colors.orange,),
              ),
              title: Text("我的空间"),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.people,color: Colors.orange),
              ),
              title: Text("用户中心"),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.settings,color: Colors.orange),
              ),
              title: Text("设置中心"),
            )
          ],
        ),
      ),
      endDrawer: Drawer(//右边侧边栏
        child: Text("right"),
      ),
    ));
  }
}