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

概述在上一篇文章《Flutter实战一Flutter聊天应用（十五）》中，我们完成了登陆屏幕。在用户登陆成功后，会在本地创建一个LandingInformation文件，以使应用程序在启动时可以判断用户的登陆状态。在main.dart文件中，我们在main方法执行runApp之前使用existsSync方法判断LandingInformation文件是否存在。判断结果会传递给Talkcasually

在上一篇文章《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(        @R_301_5979@: '谈天论地',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(          @R_301_5979@: 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(          @R_301_5979@: new Text("谈天论地"),drawer: drawer,body: new Center(          child: new Text("聊天列表"),child: new Icon(Icons.add)));  }}