一：第一步：主界面链接到MainApp()
import 'package:flutter/material.dart';import 'package:flutter_first/main/main_app.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( title: "Drawer抽屉组件示例", home: new MainApp(), ); }}二：抽屉组件界面
import 'package:flutter/material.dart';class MainApp extends StatefulWidget { const MainApp({Key? key}) : super(key: key); @override State<MainApp> createState() => _MainAppState();}class _MainAppState extends State<MainApp> { @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar( title: Text("Drawer抽屉组件示例"), ), drawer: Drawer( child: ListView( children: <Widget>[ //设置用户信息，如头像，用户名，Emails UserAccountsDrawerHeader( accountName: new Text("Rocky_ruan"), accountEmail: new Text("ruanzhiqiang_cnstrong@163.com"), //设置以后用户头像 currentAccountPicture: new CircleAvatar( backgroundImage: new AssetImage("lib/assets/images/photo.jpg"), ), onDetailsPressed: () {}, //属性原本是用来设置以后的其余头像 otherAccountsPictures: <Widget>[ new Container( child: ClipOval( child: Image.asset("lib/assets/images/photo.png", height: 200, width: 200, fit: BoxFit.cover)), ), ], ), ListTile( leading: new CircleAvatar( child: Icon(Icons.color_lens), ), title: Text("共性打扮"), ), ListTile( leading: new CircleAvatar( child: Icon(Icons.photo), ), title: Text("我的相册"), ), ListTile( leading: new CircleAvatar( child: Icon(Icons.wifi), ), title: Text("免流量特权"), ) ], ), ), ); }}这外面用到了图片资源是从assets资产目录拿到了要建设一个资产目录
同时pubspec.yaml文件下要增加assets目录配置
flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true assets: - lib/assets/images/
上面这个是栗子