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

在上一篇文章《Flutter实战一Flutter聊天应用（十四）》中，我们完成了注册屏幕。为了保持应用程序入口只有一个，即登陆屏幕，用户注册完成之后会返回手机号码、密码到登陆屏幕，让用户点击登陆按钮就可以直接登陆应用程序了。现在我们就来完善一下登陆屏幕。

应用程序的项目已经上传到GitHub上，大家可以直接查看sign_in.dart文件的代码。

我们回到sign_in.dart文件，在_SignInState中修改一下_openSignUp方法，以接收注册屏幕返回的手机号码、登陆密码。同时，使用SnackBar控件在屏幕底部短暂显示轻量级的提示，告知用户注册成功。还会自动填入对应输入框，让用户不需要重复输入。

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进阶—读取与写入文件》。在这里，我们创建了一个LandingInformation文件，以Json格式保存用户的手机号码、用户名称和登陆密码。

//...
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"}');
  }
  //...
}

像注册屏幕一样，我们在_SignInState中增加两个bool类型变量，用于存储手机号码、密码的格式验证。再添加_checkInput方法，用于判断手机号码、密码是否符合格式。要注意的是，我们现在把原来用户名的输入框更改成了手机号码输入框。

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(() {});
  }
  //...
}

当用户点击登陆按钮时，目前只会在控制台打印一条消息，我们需要添加一个_userLogIn方法，作为ShowAwait（等待屏幕，在上一篇文章中添加的通用类型）的回调参数。

在_userLogIn方法中，先根据手机号码查找用户数据，如果没有查找到数据，则返回值为0表示手机号码不存在。如果查找到用户数据，再对比登陆密码是否一致，如果不一致，则返回值为1表示手机号码与密码不匹配。登陆密码一致则返回值为2表示手机号码与密码一致。稍后我们会根据返回的数值作出相应的处理。

//...
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;
      }
    });
  }
  //...
}

我们现在添加_handleSubmitted方法，作为登陆按钮的回调方法。在该方法中，首先判断手机号码、登陆密码是否完整且格式正确。通过格式验证之后则调用ShowAwait并将_userLogIn方法作为其回调参数，根据返回值作出对应处理，如果返回值为2则进入聊天列表屏幕。

聊天列表屏幕的内容是下一篇文章的内容，大家可以在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();
        }));
      }
    });
  }
  //...
}

最后我们再修改一下_SignInState中的build方法，将上面添加的方法添加到登陆按钮及对应输入框中。

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,
                            ),
                          ),
                          onSubmitted: (value) {
                            _checkInput();
                          },
                        ),
                      ])),
              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,
              ))
            ],
          )
        ]));
  }
  //...
}