Flutter 案例学习之:Drawer + Routes

GitHub:https://github.com/happy-python/flutter_demos/tree/master/drawer_demo

lib/main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Tutorial",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  void _openPage(context, String title) {
    Navigator.of(context).push(MaterialPageRoute(
        builder: (BuildContext context) => DetailPage(title)));
  }

  void _closePage(context) {
    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Drawer"),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountName: Text("Jack"),
              accountEmail: Text("jack@gmail.com"),
              decoration: BoxDecoration(color: Colors.orange),
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage("avatar.png"),
                backgroundColor: Colors.black26,
              ),
              otherAccountsPictures: <Widget>[
                CircleAvatar(
                  backgroundColor: Colors.black26,
                  child: Text("A"),
                ),
                CircleAvatar(
                  backgroundColor: Colors.black26,
                  child: Text("B"),
                ),
              ],
            ),
            ListTile(
              title: Text("Page 1"),
              trailing: Icon(Icons.arrow_forward),
              onTap: () => _openPage(context, "Page 1 Detail"),
            ),
            ListTile(
              title: Text("Page 2"),
              trailing: Icon(Icons.arrow_forward),
              onTap: () => _openPage(context, "Page 2 Detail"),
            ),
            ListTile(
              title: Text("close"),
              trailing: Icon(Icons.close),
              onTap: () => _closePage(context),
            ),
          ],
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  final String title;

  DetailPage(this.title);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(title),
      ),
    );
  }
}

在这里关于 AssetImage 的使用方式,参考文档:
https://docs.flutter.io/flutter/painting/AssetImage-class.html

修改主配置文件:pubspec.yaml

assets:
    - avatar.png

目录结构如下图:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 像一个断断续续,时而存在,时而不见的人,每天想说的话都在心里,却说不完整讲不清楚。 我不能因为一件开心的事高兴一整...
    苏航安阅读 236评论 0 0
  • 当越来越多的人习惯于在iTunes里下载音乐,传统唱片店的经营状况可想而知。但就在传统唱片店这个看似日落西山的行业...
    伯凡时间阅读 241评论 0 1
  • 原生接收RN传递的数据 IOS 文件 1. RNToNativeManager.h 文件 为了实现RCTBridg...
    linzaifei阅读 492评论 0 0