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;@overrideWidget 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 {@overrideState 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";@overridevoid 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文件的代码。

Flutter实战一Flutter聊天应用（十六）相关推荐

Flutter实战一Flutter聊天应用（二十）
在上一篇文章<Flutter实战一Flutter聊天应用(十九)>中,我们完成了删除用户的逻辑,就是将会话的有效性设置为false就可以了.那么当会话的有效性为false时,用户再次添加该 ...
Flutter实战一Flutter聊天应用（十五）
在上一篇文章<Flutter实战一Flutter聊天应用(十四)>中,我们完成了注册屏幕.为了保持应用程序入口只有一个,即登陆屏幕,用户注册完成之后会返回手机号码.密码到登陆屏幕,让用户点 ...
Flutter实战一Flutter聊天应用（汇总）
纸聊这个应用程序使用Google的Flutter移动框架开发,是一个实时聊天应用程序,为了能专注于APP设计,应用程序的服务端使用Googler的Firebase平台.程序程序的名称为纸聊,意为像传 ...
Flutter实战一Flutter聊天应用（五）
我们的应用程序现在已经有了一个好看的UI,但是我们还没有一个后端.所以我们要买一个云服务器,然后再安装数据库?当然不是!我们可以使用Firebase平台作为后端,那么Firebase是什么呢? Fir ...
Flutter实战一Flutter聊天应用（十九）
在上一篇文章中,我们完成了聊天列表的用户界面与功能代码.在用户添加完会话后,聊天列表会增加对应的会话项,通过点击会话项,可以进入聊天屏幕.在这一篇文章中,我们主要是修改lib/chat_screen. ...
Flutter实战一Flutter聊天应用（十八）
在上一篇文章中,我们完成了基本的添加聊天功能,但是还没有在聊天列表显示添加的新聊天,在这篇文章中我们将实现这个功能--在聊天列表中展示所有的聊天. 首先,我们在/lib目录下新建一个group_cha ...
Flutter实战一Flutter聊天应用（十）
首先,我们要修复一下之前几篇文章中存在的缺陷.在发送超过两行的消息时,屏幕上显示的消息不会自动换行,会超出最大宽度.我们可以通过将Text包装在Container控件中,再添加一个width属性,使其 ...
Flutter实战一Flutter聊天应用（六）
我们将使用Google登录来验证应用程序的用户.Google登录功能可让用户使用其Google帐户(与Gmail.Play.照片和其他Google服务所使用的帐户相同的帐户)进行安全登录.我们还可以根 ...
Flutter实战一Flutter聊天应用（十四）
优化输入体验在进行下一步之前,我们先优化一下注册的体验: 正在输入注册信息时,点击屏幕空白部分,清除当前文本输入框的焦点,同时收起键盘. 正在输入注册信息时,直接收起键盘,再点击空白部分,清除当前文 ...

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

Flutter实战一Flutter聊天应用（十六）相关推荐

最新文章

热门文章