Flutter实战一Flutter聊天应用(十五)
在上一篇文章《Flutter实战一Flutter聊天应用(十四)》中,我们完成了注册屏幕。为了保持应用程序入口只有一个,即登陆屏幕,用户注册完成之后会返回手机号码、密码到登陆屏幕,让用户点击登陆按钮就可以直接登陆应用程序了。现在我们就来完善一下登陆屏幕。 应用程序的项目已经上传到GitHub上,大家可以直接查看sign_in.dart文件的代码。 我们回到 class _SignInState extends State<SignIn> {
//...
static final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
//...
void _openSignUp() {
setState(() {
Navigator.of(context).push(new MaterialPageRoute<List<String>>(
builder: (BuildContext context) {
return new SignUp();
},)).then((onValue) {
if (onValue != null) {
_phoneController.text = onValue[0];
_passwordController.text = onValue[1];
FocusScope.of(context).requestFocus(new FocusNode());
_scaffoldKey.currentState.showSnackBar(new SnackBar(
content: new Text("注册成功!"),));
}
});
});
}
//...
}
在用户点击登陆时,我们需要保存用户的登陆信息,用于应用程序启动时判断用户是否已经登陆。关于本地文件的相关操作,可以查看《Flutter进阶—读取与写入文件》。在这里,我们创建了一个 //...
import 'package:path_provider/path_provider.dart';
import 'dart:async';
import 'dart:io';
//...
class _SignInState extends State<SignIn> {
//...
Future<Null> _saveLogin(
String phone,String password,String name,String email) async {
String dir = (await getApplicationDocumentsDirectory()).path;
await new File('$dir/LandingInformation').writeAsString(
'{"phone":"$phone","name":"$name","email":"$email"}');
}
//...
}
像注册屏幕一样,我们在 class _SignInState extends State<SignIn> {
//...
bool _correctPhone = true;
bool _correctPassword = true;
//...
void _checkInput() {
if (_phoneController.text.isNotEmpty &&
(_phoneController.text.trim().length < 7 ||
_phoneController.text.trim().length > 12)) {
_correctPhone = false;
} else {
_correctPhone = true;
}
if (_passwordController.text.isNotEmpty &&
_passwordController.text.trim().length < 6) {
_correctPassword = false;
} else {
_correctPassword = true;
}
setState(() {});
}
//...
}
当用户点击登陆按钮时,目前只会在控制台打印一条消息,我们需要添加一个 在 //...
import 'package:firebase_database/firebase_database.dart';
import 'prompt_wait.dart';
//...
class _SignInState extends State<SignIn> {
//...
final reference = FirebaseDatabase.instance.reference().child('users');
//...
Future<int> _userLogIn(String phone,String password) async {
return await reference
.child(_phoneController.text)
.once()
.then((DataSnapshot onValue) {
if (onValue.value != null) {
if (onValue.value["password"] == _passwordController.text) {
_saveLogin(onValue.value["phone"],onValue.value["password"],onValue.value["name"],onValue.value["email"]);
return 2;
} else {
return 1;
}
} else {
return 0;
}
});
}
//...
}
我们现在添加 聊天列表屏幕的内容是下一篇文章的内容,大家可以在GitHub上查看group_chat_list.dart文件的代码。 class _SignInState extends State<SignIn> {
//...
void _handleSubmitted() {
FocusScope.of(context).requestFocus(new FocusNode());
_checkInput();
if (_phoneController.text == '' || _passwordController.text == '') {
showMessage(context,"登录信息填写不完整!");
return;
} else if (!_correctPhone || !_correctPassword) {
showMessage(context,"登录信息的格式不正确!");
return;
}
showDialog<int>(
context: context,barrierDismissible: false,child: new ShowAwait(
_userLogIn(_passwordController.text,_phoneController.text)))
.then((int onValue) {
if (onValue == 0) {
showMessage(context,"这个手机号码没有被注册!");
} else if (onValue == 1) {
showMessage(context,"手机号码或登陆密码不正确!");
} else if (onValue == 2) {
Navigator
.of(context)
.push(new MaterialPageRoute<Null>(builder: (BuildContext context) {
return new GroupChatList();
}));
}
});
}
//...
}
最后我们再修改一下 class _SignInState extends State<SignIn> {
//...
@override
Widget build(BuildContext context) {
return new Scaffold(
key: _scaffoldKey,body: new Stack(children: <Widget>[
new Opacity(
opacity: 0.3,child: new GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
_checkInput();
},child: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new ExactAssetImage(
'images/sign_in_background.jpg'),fit: BoxFit.cover,),))),new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
new Center(
child: new Image.asset(
'images/talk_casually.png',width: MediaQuery.of(context).size.width * 0.4,)),new Container(
width: MediaQuery.of(context).size.width * 0.96,child: new Column(
mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
new TextField(
controller: _phoneController,keyboardType: TextInputType.phone,decoration: new InputDecoration(
hintText: '手机号码',errorText: _correctPhone
? null
: '号码的长度应该在7到12位之间',icon: new Icon(
Icons.phone,onSubmitted: (value) {
_checkInput();
},new TextField(
controller: _passwordController,obscureText: true,keyboardType: TextInputType.number,decoration: new InputDecoration(
hintText: '登陆密码',errorText: _correctPassword
? null
: '密码的长度应该大于6位',icon: new Icon(
Icons.lock_outline,])),new FlatButton(
child: new Container(
decoration: new BoxDecoration(
color: Theme.of(context).accentColor,child: new Center(
child: new Text("登录")),onPressed: () {
_handleSubmitted();
},new Center(
child: new FlatButton(
child: new Text("没有帐户? 注册"),onPressed: _openSignUp,))
],)
]));
}
//...
}
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |