Flutter实战一Flutter聊天应用(十六)
在上一篇文章《Flutter实战一Flutter聊天应用(十五)》中,我们完成了登陆屏幕。在用户登陆成功后,会在本地创建一个LandingInformation文件,以使应用程序在启动时可以判断用户的登陆状态。在main.dart文件中,我们在main方法执行runApp之前使用existsSync方法判断LandingInformation文件是否存在。判断结果会传递给TalkcasuallyA
在上一篇文章《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文件的代码。
更多推荐
所有评论(0)