flutter项目实战四：登录页面

关键点

• Widget build 构建ui 展示
• _check 登录前校验
• _toLogin 登录校验后执行登录
• 内部处理输入框时候注意需要使用TextEditingController管理以此获取输入结果使用
  

创建ui 目录

创建login目录

创建 login_page.dart 文件

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_demo/api/api.dart';
import 'package:flutter_demo/bean/login/user_bean.dart';
import 'package:flutter_demo/constant/constant.dart';
import 'package:flutter_demo/http/http_util.dart';
import 'package:flutter_demo/router/navigator_util.dart';
import 'package:flutter_demo/util/ToastUtils.dart';
import 'package:flutter_demo/util/navigator_util/navigator_utils.dart';
import 'package:flutter_demo/util/shared_preferences_utils.dart';

///登录
class LoginPage extends StatefulWidget {
  LoginPage();

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _accountController = TextEditingController();
  final TextEditingController _pwdController = TextEditingController();
  bool isCheck = true;
  late UserBean _userBean;
  String title = "登录";
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // print("==-->打印登录传进来的map" + map["title"]);
  }

  _check() {
    if (_accountController.text.isEmpty) {
      ToastUtils.showToast('手机号不能为空');
      return;
    } else if (_pwdController.text.isEmpty) {
      ToastUtils.showToast('用户密码不能为空');
      return;
    } else if (_accountController.text.length != 11) {
      ToastUtils.showToast('手机号格式异常');
      return;
    } else if (_pwdController.text.length > 6 || _pwdController.text.length < 4) {
      ToastUtils.showToast('用户密码长度限制为4~6位');
      return;
    }
    if (!isCheck) {
      // Toast.show("请勾选仔细阅读用户协议", context);
      ToastUtils.showToast('请勾选仔细阅读用户协议');
      return;
    }
  }

  _toLogin() {

    _check();

    Map<String, dynamic> map = Map();
    map.putIfAbsent("username", () => _accountController.text.toString());
    map.putIfAbsent("password", () => _pwdController.text.toString());
    HttpUtil.instance.post(Api.LOGIN_URL, parameters: map).then((value) => {
          print("登录结果$value"),
          _userBean = UserBean.fromJson(json.decode(value.toString())),
          setState(() {
            print(_userBean.code);
            if (_userBean.code == "0") {
              SharedPreferencesUtils.saveShareData(Constant.userbean, value.toString());
              SharedPreferencesUtils.saveShareData(Constant.username, _userBean.data?.username ?? "");
              NavigatorUtil.goMainHomePage(context);
            } else {
              ToastUtils.showToast('${_userBean.msg}');
            }
          }),
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text(title),
      //   centerTitle: true,
      // ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.deepOrangeAccent,
        alignment: Alignment.center,
        child: Container(
          margin: const EdgeInsets.all(10.0),
          padding: const EdgeInsets.all(10.0),
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(width: 1.0),
            borderRadius: const BorderRadius.all(
              Radius.circular(10.0),
            ),
          ),
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min, //自适应高度
              children: [
                const Text(
                  '免租',
                  style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold),
                ),
                TextField(
                  controller: _accountController,
                  keyboardType: TextInputType.phone,
                  maxLines: 1,
                  maxLength: 11,
                  decoration: const InputDecoration(
                    hintText: "请输入手机号",
                    hintStyle: TextStyle(fontSize: 12.0),
                    labelText: "手机号",
                    labelStyle: TextStyle(fontSize: 14.0),
                  ),
                ),
                TextField(
                  controller: _pwdController,
                  keyboardType: TextInputType.number,
                  maxLines: 1,
                  obscureText: true, //隐藏密码显示
                  decoration: const InputDecoration(
                    hintText: "请输入密码",
                    hintStyle: TextStyle(fontSize: 12.0),
                    labelText: "密码",
                    isDense: true,
                    labelStyle: TextStyle(fontSize: 14.0),
                  ),
                ),
                InkWell(
                  onTap: () {
                    _toLogin();
                  },
                  child: Container(
                    margin: const EdgeInsets.only(top: 10.0),
                    decoration: BoxDecoration(
                      border: Border.all(
                          width: 1.0, color: Colors.deepOrangeAccent),
                      borderRadius: const BorderRadius.all(
                        Radius.circular(8.0),
                      ),
                    ),
                    alignment: Alignment.center,
                    width: double.infinity,
                    height: 40.0,
                    child: const Text(
                      '登录',
                      style: TextStyle(
                          fontSize: 15.0, color: Colors.deepOrangeAccent),
                    ),
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    InkWell(
                      onTap: () {
                        ToastUtils.showToast('查看用户协议');
                      },
                      child: Row(
                        children: [
                          Checkbox(
                            activeColor: Colors.deepOrangeAccent,
                            checkColor: Colors.white,
                            value: isCheck,
                            onChanged: (value) {
                              setState(() {
                                isCheck = value??false;
                              });
                            },
                          ),
                          const Text('请仔细阅读'),
                          const Text(
                            '《用户协议》',
                            style: TextStyle(color: Colors.deepOrangeAccent),
                          ),
                        ],
                      ),
                    ),
                    InkWell(
                      onTap: () {
                        Map<String,dynamic> map = Map();
                        map.putIfAbsent("title", () => "测试注册");
                        map.putIfAbsent("title2", () => "测试注册2");
                        NavigatorUtil.goRegisterPage(context,json.encode(map))
                        // NavigatorRegister.goRegister(context, map)
                            //     .then((value) => {
                            //   setState(() {
                            //    title = value;
                            //   }),
                            // })
                            ;
                      },
                      child: const Text('没有账号?去注册'),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}