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

提交用户的注册信息

我们现需要将用户的注册信息保存到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> {
  //...
  @override
  Widget 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> {
  //...
  @override
  Widget 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();
              },
            ),
        //...
}