flutter login page

496 阅读2分钟

Simulator Screen Shot - iPhone 14 Pro - 2023-03-12 at 20.32.38.png

// ignore_for_file: unused_import, non_constant_identifier_names, unused_local_variable

import 'package:flutter/material.dart';
import 'package:footbal_app/apis/api.dart';
import 'package:footbal_app/components/bottom_button.dart';
import 'package:footbal_app/model/login_data.dart';
import 'package:footbal_app/routes/app_routes.dart';
import 'package:footbal_app/theme/app_theme.dart';
import 'package:get/get.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'login_controller.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  bool isLogin = false;
  bool pwdToogle = false;
  GlobalKey _formKey = GlobalKey<FormState>();
  TextEditingController _unameController = TextEditingController();
  TextEditingController _pwdController = TextEditingController();
  bool userNotExist = false;
  bool passwordError = false;
  String tokenData = "";
  String userData = "";

  getUserLoginData() async {
    final _user_box = Hive.box('user_box');
    String? userToken = _user_box.get("tokenData");
    String? username = _user_box.get("userName");

    if (userToken == null) {
      if (username == null) {
        // Get.toNamed("/setting");
      } else {
        setState(() {
          userData = username;
        });
      }
    } else {
      setState(() {
        tokenData = userToken;
      });
    }
  }

  void _removePhone() {
    _unameController.clear();
  }

  void _removePassword() {
    _pwdController.clear();
  }

  void _loginAction(BuildContext context, Function _userNotExist,
      Function _passwordError) async {
    setState(() {
      passwordError = false;
      userNotExist = false;
    });
    if ((_formKey.currentState as FormState).validate()) {
      String username = _unameController.text;
      String password = _pwdController.text;
      print("username:$username,password:$password");
      var loginResponse = await userLogin(username, password, () {
        setState(() {
          userData = username;
          tokenData = "token";
          Get.toNamed(AppRoutes.ROOT, arguments: {"currtentIndex": 2});
        });
      }, () {});
      LoginData loginData = loginResponse["loginData"];
    }
  }

  Widget _buildNotLogin(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () => FocusScope.of(context).requestFocus(FocusNode()),
      child: Container(
        // height: MediaQuery.of(context).size.height,
        padding: const EdgeInsets.symmetric(vertical: 50.0, horizontal: 30.0),
        child: SingleChildScrollView(
          child: Form(
            autovalidateMode: AutovalidateMode.disabled,
            key: _formKey,
            child: Column(
              children: <Widget>[
                Container(
                  height: MediaQuery.of(context).size.height * 0.2,
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        SizedBox(
                          height: 25,
                        ),
                        SizedBox(
                          height: 8,
                        ),
                        Text(
                          '',
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.normal,
                            color: AppTheme.primaryColor,
                          ),
                        ),
                      ]),
                ),

                _buildUserNameInput(),
                SizedBox(
                  height: 20,
                ),
                _buildPasswordInput(),

                Container(
                  padding: EdgeInsets.only(top: 15),
                  child: passwordError
                      ? Text(
                          "密码错误!",
                          style: TextStyle(color: Colors.red),
                        )
                      : userNotExist
                          ? Text(
                              "用户名不存在,请注册!",
                              style: TextStyle(color: Colors.red),
                            )
                          : Text(""),
                ),
                // 登录按钮
                Container(
                  padding: EdgeInsets.symmetric(vertical: 30),
                  child: BottomButton(
                    text: '登录',
                    handleOk: () => _loginAction(context, () {
                      setState(() {
                        userNotExist = true;
                      });
                    }, () {
                      passwordError = true;
                    }),
                  ),
                ),
                SizedBox(
                  height: 24,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    GestureDetector(
                      onTap: () => {},
                      child: Text(
                        '找回密码',
                        style: TextStyle(
                            fontSize: 14,
                            color: Color.fromARGB(255, 0, 0, 0),
                            fontWeight: FontWeight.w700
                            // color: AppTheme.textFormFieldFocusedColor,
                            ),
                      ),
                    ),
                    SizedBox(width: 14),
                    SizedBox(
                      width: 1,
                      height: 16,
                      child: const DecoratedBox(
                        decoration: const BoxDecoration(
                          // color: AppTheme.textFormFieldFocusedColor,
                          color: Color.fromARGB(255, 0, 0, 0),
                        ),
                      ),
                    ),
                    SizedBox(width: 14),
                    GestureDetector(
                      onTap: () => {Navigator.of(context).pushNamed('/signup')},
                      child: Text(
                        '新用户注册',
                        style: TextStyle(
                            fontSize: 14,
                            color: Color.fromARGB(255, 0, 0, 0),
                            fontWeight: FontWeight.w700
                            // color: AppTheme.textFormFieldFocusedColor,
                            ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildUserNameInput() {
    Color focusedColor = AppTheme.textFormFieldFocusedColor;
    Color unfocusedColor = AppTheme.textFormFieldUnFocusedColor;
    return TextFormField(
      style: TextStyle(
        color: focusedColor,
        fontWeight: FontWeight.w700,
      ),
      controller: _unameController,
      keyboardType: TextInputType.text,
      strutStyle: StrutStyle.fromTextStyle(
        TextStyle(color: Colors.white),
      ),
      decoration: InputDecoration(
        hoverColor: Colors.white,
        counterStyle: TextStyle(
          color: Colors.white,
        ),
        suffixIcon: GestureDetector(
          onTap: () => _removePhone(),
          child: _unameController.text != ''
              ? Icon(
                  Icons.cancel,
                  size: 18,
                  color: focusedColor,
                )
              : SizedBox(),
        ),
        contentPadding: EdgeInsets.symmetric(vertical: 18),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(25),
          borderSide: AppTheme.enabledBorderSide,
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(25),
          borderSide: AppTheme.inputFeildBorder,
        ),
        filled: true,
        fillColor: AppTheme.appBackgroundColor,
        hintText: "请输入用户名",
        focusColor: Colors.white,
        hintStyle: TextStyle(
          color: focusedColor,
          fontWeight: FontWeight.w900,
        ),
        prefixIcon: Icon(
          Icons.person,
          color: focusedColor,
        ),
      ),
      cursorColor: AppTheme.primaryColor,
      // 校验用户名
      validator: (v) {
        String t = v ?? '';
        return t.trim().length > 0 ? null : "用户名不能为空";
      },
    );
  }

  Widget _buildPasswordInput() {
    Color focusedColor = AppTheme.textFormFieldFocusedColor;

    return TextFormField(
        style: TextStyle(
          color: focusedColor,
          fontWeight: FontWeight.w700,
        ),
        controller: _pwdController,
        keyboardType: TextInputType.visiblePassword,
        decoration: InputDecoration(
          suffixIcon: Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              _pwdController.text != ''
                  ? GestureDetector(
                      onTap: () => _removePassword(),
                      child: Icon(
                        Icons.cancel,
                        size: 18,
                        color: focusedColor,
                      ),
                    )
                  : SizedBox(),
              SizedBox(width: 10),
              GestureDetector(
                onTap: () => {
                  setState(() {
                    pwdToogle = !pwdToogle;
                  })
                },
                child: Icon(
                  Icons.remove_red_eye,
                  size: 18,
                  color: focusedColor,
                ),
              ),
              SizedBox(width: 15),
            ],
          ),
          contentPadding: EdgeInsets.symmetric(vertical: 18),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(5),
            borderSide: BorderSide.none,
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(25),
            borderSide: AppTheme.enabledBorderSide,
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(25),
            borderSide: AppTheme.inputFeildBorder,
          ),
          filled: true,
          fillColor: AppTheme.appBackgroundColor,
          hintText: "请输入密码",
          hintStyle: TextStyle(
            color: focusedColor,
            fontWeight: FontWeight.w900,
          ),
          prefixIcon: Icon(
            Icons.lock,
            color: focusedColor,
          ),
        ),
        obscureText: !pwdToogle,
        cursorColor: AppTheme.primaryColor,
        //校验密码
        validator: (v) {
          String t = v ?? '';
          return t.trim().length > 1 ? null : "密码不能少于6位";
        });
  }

  @override
  void initState() {
    super.initState();
    _unameController.text = "ronaldo";
    _pwdController.text = "123";
    getUserLoginData();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // Scaffold(
        //     body: Container(
        //   height: double.infinity,
        //   child: Image.asset(
        //     "assets/images/bg.png",
        //     fit: BoxFit.fill,
        //   ),
        // )),
        Scaffold(
          backgroundColor: Color.fromARGB(255, 255, 255, 255),
          body: Column(
            children: [
              Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 70, left: 15),
                    child: GestureDetector(
                      onTap: () {
                        Get.back();
                      },
                      child: Icon(
                        Icons.arrow_back_ios,
                        color: Color.fromARGB(255, 0, 0, 0),
                      ),
                    ),
                  ),
                ],
              ),
              _buildNotLogin(context),
            ],
          ),
        ),
      ],
    );
  }
}