flutter_quickstart/lib/pages/login.dart

import 'package:flutter/material.dart';
import 'package:flutter_qucikstart/common/button.dart';

import '../common/app_colors.dart';
import '../common/assets.dart';

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

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

class _LoginPageState extends State<LoginPage> {
  //检查账号输入是否有效
  bool isUserNameValid = false;
  //登录表单
  Widget _buildForm() {
    return Container(
      padding: const EdgeInsets.fromLTRB(20, 70, 20, 35),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(35),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          //Username or Email
          const Text(
            'Username or Email',
            style: TextStyle(
              fontSize: 15,
              fontWeight: FontWeight.w300,
              color: Color(0xFF838383),
            ),
          ),
          const SizedBox(height: 16),
          TextField(
            //Onchange时检测输入是否有效
            onChanged: (value) {
              setState(() {
                isUserNameValid = value.isNotEmpty && value.length > 6;
              });
            },
            decoration: InputDecoration(
              hintText: '@',
              prefixIcon: Image.asset(
                AssetsImages.iconUserPng,
                width: 23,
                height: 23,
              ),
              suffixIcon: isUserNameValid == true
                  ? const Icon(
                      Icons.done,
                      size: 24,
                      color: Colors.green,
                    )
                  : null,
            ),
          ),

          const SizedBox(height: 36),

          //password
          const Text(
            'Password',
            style: TextStyle(
              fontSize: 15,
              fontWeight: FontWeight.w300,
              color: Color(0xFF838383),
            ),
          ),
          const SizedBox(height: 16),
          TextField(
            //隐藏输入
            obscureText: true,
            decoration: InputDecoration(
              hintText: '6 digits',
              prefixIcon: Image.asset(
                AssetsImages.iconLockPng,
                width: 19,
                height: 26,
              ),
              suffixIcon: TextButton(
                onPressed: (() {}),
                child: const Text(
                  'Forget?',
                  style: TextStyle(
                    fontSize: 15,
                    fontWeight: FontWeight.w500,
                    color: Color(0xFF0274BC),
                  ),
                ),
              ),
            ),
          ),

          const SizedBox(height: 30),

          //Sign In btn
          ButtonWidget(
            text: "Sign In",
            height: 57,
            onPressed:(){}
          ),


          const SizedBox(height: 16),

          //Don't have an account? Sign up
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              //文字
              const Text(
                "Don't have an account?",
                style: TextStyle(
                  fontSize: 15,
                  fontWeight: FontWeight.w300,
                  color: Color(0xFF171717),
                ),
              ),
              //文字按钮
              TextButton(
                onPressed: (() {}),
                child: const Text(
                  "Sign up",
                  style: TextStyle(
                    fontSize: 15,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF0274bc),
                  ),
                ),
              )
            ],
          )

          //end
        ],
      ),
    );
  }

  //主视图 拆成函数
  Widget _buildView(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          //logo
          Image.asset(
            AssetsImages.logoPng,
            height: 60,
            width: 57,
          ),

          const SizedBox(height: 22),

          //主标题
          const Text(
            "Let's sign you in",
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),

          const SizedBox(height: 10),

          //子标题
          const Text(
            "Wlecome back,you've been missed",
            style: TextStyle(
              fontSize: 13,
              fontWeight: FontWeight.w300,
              color: Color(0xFFEEEEEE),
            ),
          ),

          const SizedBox(height: 55),

          //表单
          _buildForm(),

          //end
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.backgroundSplash,
      body: _buildView(context),
    );
  }
}