提交用户的注册信息

我们现需要将用户的注册信息保存到Firebase实时数据库，在Firebase控制台中，更改Firebase实时数据库的安全规则，选择“Database > 规则”，规则如下所示：

{"rules": {"users":{".read": true,".write": true},"messages": {".read": true,".write": "auth != null && auth.provider == 'google'"}}
}

然后在sign_up.dart文件的SignUpState类中添加_userLogUp方法，代码如下所示：

import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';
//...
class SignUpState extends State<SignUp> {//...final reference = FirebaseDatabase.instance.reference().child('users');//...void _userLogUp(String username, String password, {String email, String phone}){reference.push().set({'name': username,'password': password,'email': email,'phone': phone,});}//...
}

在SignUpState类的build方法中修改Join按钮的点击事件，代码如下所示：

class SignUpState extends State<SignUp> {//...@overrideWidget build(BuildContext context) {return new Scaffold(//...new FlatButton(child: new Container(//...child: new Center(child: new Text("Join",style: new TextStyle(color: const Color(0xff000000),))),),onPressed: () {_userLogUp(_usernameController.text, _passwordController.text,email: _emailController.text, phone: _phoneController.text);},),//...
}

现在我们在注册屏幕中点击Join按钮就会提交用户信息到Firebase实时数据库。

检查用户的输入内容

我们现在已经可以上传用户的注册信息，现在需要添加对注册信息的检查功能。在我们的应用程序中，注册信息有以下限制：用户名不能为空且大于等于三位，密码不能为空且大于等于六位。

class SignUpState extends State<SignUp> {//...String _correctUsername = "";String _correctPassword = "";//...
}

首先我们在SignUpState类的添加两个成员变量_correctUsername和_correctPassword，存储用户名和密码的错误信息，同时根据它们是否为空来判断用户输入是否符合条件。

class SignUpState extends State<SignUp> {//...new TextField(controller: _usernameController,decoration: new InputDecoration(hintText: 'Username',errorText: (_correctUsername == "")? null: _correctUsername,icon: new Icon(Icons.account_circle,),),onChanged: (String value) {setState(() {if (value.isEmpty) {_correctUsername = "Username cannot be empty";} else if (value.trim().length < 3) {_correctUsername ="Username length is less than 3 bits";} else {_correctUsername = "";}});},),new TextField(controller: _passwordController,obscureText: true,keyboardType: TextInputType.number,decoration: new InputDecoration(hintText: 'Password',errorText: (_correctPassword == "")? null: _correctPassword,icon: new Icon(Icons.lock_outline,),),onChanged: (String value) {setState(() {if (value.isEmpty) {_correctPassword = "Password cannot be empty";} else if (value.trim().length < 6) {_correctPassword ="Password length is less than 6 bits";} else {_correctPassword = "";}});},),//...
}

现在用户输入时应用程序会给予对应的错误提示，我们还需要在用户点击Join按钮时再次检查用户名与密码，如果存在错误则弹出消息提示。弹出消息提示是比较常用的操作之一，因此我们可以单独封装起来，在项目的lib目录下创建一个prompt_page.dart文件，并添加下面的代码：

import 'package:flutter/material.dart';class PromptPage {showMessage(BuildContext context, String text) {showDialog<Null>(context: context,child: new AlertDialog(title: new Text("Alert"),content: new Text(text),actions: <Widget>[new FlatButton(onPressed: () {Navigator.pop(context);},child: const Text('OK'))]));}
}

然后我们回到sign_up.dart文件中来，在SignUpState类中添加PromptPage类型的promptPage成员变量。同时添加成员方法_handleSubmitted用于处理用户点击Join按钮时的操作。

import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';
import 'dart:async';
import 'prompt_page.dart';
//...
class SignUpState extends State<SignUp> {//...PromptPage promptPage = new PromptPage();//...Future _handleSubmitted() async {if (_usernameController.text == '' || _passwordController.text == '') {await promptPage.showMessage(context, "Username or password cannot be empty!");return;} else if (_correctUsername.isNotEmpty || _correctPassword.isNotEmpty) {await promptPage.showMessage(context, "Username or password format is incorrect!");return;}_userLogUp(_usernameController.text, _passwordController.text,email: _emailController.text, phone: _phoneController.text);}//...
}

然后我们需要在SignUpState类的build方法中修改Join按钮的点击事件，代码如下所示：

class SignUpState extends State<SignUp> {//...@overrideWidget build(BuildContext context) {return new Scaffold(//...new FlatButton(child: new Container(//...child: new Center(child: new Text("Join",style: new TextStyle(color: const Color(0xff000000),))),),onPressed: () {_handleSubmitted();},),//...
}

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

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

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

提交用户的注册信息

检查用户的输入内容

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

最新文章

热门文章