Flutter实战一Flutter聊天应用（十六）

在上一篇文章《Flutter实战一Flutter聊天应用（十五）》中，我们完成了登陆屏幕。在用户登陆成功后，会在本地创建一个LandingInformation文件，以使应用程序在启动时可以判断用户的登陆状态。

在main.dart文件中，我们在main方法执行runApp之前使用existsSync方法判断LandingInformation文件是否存在。判断结果会传递给TalkcasuallyApp，其根据结果决定用户是进入聊天列表屏幕还是登陆屏幕。

import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:async';
import 'dart:io';
import 'sign_in.dart';
import 'group_chat_list.dart';

void main() {
  _getLandingFile().then((onValue) {
    runApp(new TalkcasuallyApp(onValue.existsSync()));
  });
}

Future<File> _getLandingFile() async {
  String dir = (await getApplicationDocumentsDirectory()).path;
  return new File('$dir/LandingInformation');
}

class TalkcasuallyApp extends StatelessWidget {
  TalkcasuallyApp(this.landing);
  final bool landing;

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: '谈天论地',
        home: landing ? new GroupChatList() : new SignIn());
  }
}

在上面代码中有一个GroupChatList类是暂时不存在的，我们需要在/lib目录下新建一个group_chat_list.dart文件，并添加以下代码。

import 'package:flutter/material.dart';

class GroupChatList extends StatefulWidget {
  @override
  State createState() => new _GroupChatListState();
}

class _GroupChatListState extends State<GroupChatList> {
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("谈天论地"),
        ),
        body: new Text("聊天列表"),
        floatingActionButton: new FloatingActionButton(
            onPressed: null, child: new Icon(Icons.add)));
  }
}

在用户进入聊天列表屏幕时，我们需要读取LandingInformation文件，以显示用户信息并拉取用户的聊天列表。在_GroupChatListState中添加_readLoginData方法，其读取LandingInformation文件的内容并解析成Json数据返回，关于处理Json数据的内容可以查看《Flutter进阶—网络与本地异步加载资源》。

在_GroupChatListState中，还增加了三个变量，分别存储用户的名称、手机号码和邮箱。为了获取这些信息，我们覆盖了initState方法，并添加_readLoginData方法，使应用在加载聊天列表屏幕时得到用户的名称、手机号码和邮箱。

//...
import 'package:path_provider/path_provider.dart';
import 'dart:async';
import 'dart:convert';
import 'dart:io';
//...
class _GroupChatListState extends State<GroupChatList> {
  String name = "null";
  String phone = "null";
  String email = "null";

  @override
  void initState() {
    super.initState();
    _readLoginData().then((Map onValue) {
      setState(() {
        name = onValue["name"];
        phone = onValue["phone"];
        email = onValue["email"];
      });
    });
  }

  Future<Map> _readLoginData() async {
    String dir = (await getApplicationDocumentsDirectory()).path;
    File file = new File('$dir/LandingInformation');
    String data = await file.readAsString();
    Map json = new JsonDecoder().convert(data);
    return json;
  }
  //...
}

获取用户信息后，我们可以使用Drawer控件展示用户信息，还可以放置用户相关的操作按钮。Drawer控件的打开方式有两种，一是从屏幕的边缘水平滑动，二是点击顶部导航栏左侧的菜单按钮。打开后只需点击空白部分即可关闭Drawer控件。

首先我们先写一个自定义的Drawer控件的选择项_drawerOption控件。

class _GroupChatListState extends State<GroupChatList> {
  //...
  Widget _drawerOption(Icon icon, String name) {
    return new Container(
      padding: const EdgeInsets.only(top: 22.0),
      child: new Row(
        children: <Widget>[
          new Container(
              padding: const EdgeInsets.only(right: 28.0), child: icon),
          new Text(name)
        ],
      ),
    );
  }
  //...
}

然后在_GroupChatListState的build中添加一个Drawer类型变量drawer。DrawerHeader控件是Drawer的子控件，是显示在最顶端的区域。我们会在这个区域展示用户头像、姓名和手机号码，如果用户还没有头像，则暂时显示姓名第一个字。

class _GroupChatListState extends State<GroupChatList> {
  //...
  Widget build(BuildContext context) {
    //...
    Drawer drawer = new Drawer(
        child: new ListView(
      children: <Widget>[
        new DrawerHeader(
            child: new Column(
          children: <Widget>[
            new Row(
              children: <Widget>[
                new Container(
                  padding: const EdgeInsets.only(right: 12.0),
                  child: new CircleAvatar(
                    child: new Text(name[0]),
                  ),
                ),
                new Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    new Text(
                      name,
                      textScaleFactor: 1.2,
                    ),
                    new Text(phone)
                  ],
                )
              ],
            ),
            _drawerOption(new Icon(Icons.account_circle), "个人资料"),
            _drawerOption(new Icon(Icons.settings), "应用设置"),
          ],
        ))
      ],
    ));
    //...
  }
}

最后我们再修改一下_GroupChatListState的build方法，添加上Drawer控件。

class _GroupChatListState extends State<GroupChatList> {
  //...
  Widget build(BuildContext context) {
    //...
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("谈天论地"),
        ),
        drawer: drawer,
        body: new Center(
          child: new Text("聊天列表"),
        ),
        floatingActionButton: new FloatingActionButton(
            onPressed: null, child: new Icon(Icons.add)));
  }
}

大家可以在GitHub上直接查看group_chat_list.dart文件的代码。