lib/login/login_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wow_english/common/extension/string_extension.dart';
import 'package:wow_english/login/blocs/login_bloc.dart';
class LoginPage extends StatelessWidget {
  const LoginPage({super.key});
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => LoginBloc(),
      child: _buildLoginViewWidget(),
    );
  }
  Widget _buildLoginViewWidget() => BlocBuilder<LoginBloc,LoginState> (
    builder: (context, state) {
      final bloc = BlocProvider.of<LoginBloc>(context);
      return Scaffold(
        body: SafeArea(
          child: ListView(
            children: [
              Container(
                padding: EdgeInsets.only(top: 25.h),
                child: Stack(
                  children: [
                    Positioned(
                        right: 29.w,
                        child: GestureDetector(
                          onTap: () => bloc.add(ChangeLoginTypeEvent()),
                          child: Container(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: AssetImage(
                                      'login_logo'.assetPng
                                  ),
                                  fit: BoxFit.fill
                              ),
                            ),
                            padding: const EdgeInsets.symmetric(horizontal: 18.0),
                            child:  Text(
                                bloc.loginType == LoginType.sms?'密码登陆':'验证码密码'
                            ),
                          ),
                        )
                    ),
                    Center(
                      child: Column(
                        children: [
                          Image.asset(
                            'wow_logo'.assetPng,
                            height: 81.h,
                            width: 131.w,
                          ),
                          Offstage(
                            offstage: bloc.loginType == LoginType.pwd,
                            child: _buildSmsViewWidget(),
                          ),
                          Offstage(
                            offstage: bloc.loginType == LoginType.sms,
                            child: _buildPwdViewWidget(),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              GestureDetector(
                                onTap: () => bloc.add(AgreementChangeEvent()),
                                child: Icon(
                                    bloc.agreement ? Icons.check_circle_outlined:Icons.circle_outlined,
                                    color:bloc.agreement ? Colors.green:Colors.black),
                              ),
                              6.horizontalSpace,
                              const Text('我已阅读并同意《用户隐私协议》，《儿童隐私策略》')
                            ],
                          ),
                          GestureDetector(
                            onTap: () {
                              if (bloc.canLogin) {
                                bloc.add(RequestLoginEvent());
                              }
                            },
                            child: Container(
                              decoration: BoxDecoration(
                                image: DecorationImage(
                                    image: AssetImage(
                                        bloc.canLogin?'login_enter'.assetPng:'login_enter_dis'.assetPng
                                    ),
                                    fit: BoxFit.fill
                                ),
                              ),
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 28.0,
                                  vertical: 14.0
                              ),
                              child:  const Text(
                                  '登录'
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      );
    },
  );
  Widget _buildSmsViewWidget()=> BlocBuilder<LoginBloc,LoginState>(
      builder: (context,state){
        final bloc = BlocProvider.of<LoginBloc>(context);
        return Padding(
          padding: EdgeInsets.symmetric(horizontal: 135.w),
          child: Column(
            children: [
              15.verticalSpace,
              Container(
                  height: 55.h,
                  width: double.infinity,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage(
                            'Input_layer_up'.assetPng
                        ),
                      fit: BoxFit.fitWidth
                    ),
                  ),
                  child: TextField(
                    controller: bloc.phoneNumController,
                    textAlign: TextAlign.center,
                    textInputAction: TextInputAction.done,
                    keyboardType: TextInputType.phone,
                    decoration: const InputDecoration(
                      hintText: '请输入手机号',
                      border: InputBorder.none,
                    ),
                    onChanged: (String value) {
                      bloc.add(PhoneNumChangeEvent());
                    },
                  )
              ),
              6.5.verticalSpace,
              const Text('未注册用户登录默认注册'),
              4.5.verticalSpace,
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    child: Container(
                        height: 50.h,
                        width: double.infinity,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage(
                                    'Input_layer_down'.assetPng,
                                ),
                            )
                        ),
                        child: TextField(
                          controller: bloc.checkNumController,
                          textAlign: TextAlign.center,
                          textInputAction: TextInputAction.done,
                          keyboardType: TextInputType.number,
                          decoration: const InputDecoration(
                            hintText: '请输入验证码',
                            border: InputBorder.none,
                          ),
                          onChanged: (String value) {
                            bloc.add(CheckFieldChangeEvent());
                          },
                        )
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      if (bloc.canSendSms) {
                        bloc.add(ChangeLoginTypeEvent());
                      }
                    },
                    child: Container(
                      decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                                bloc.canSendSms?'securitycode'.assetPng:'securitycode_dis'.assetPng
                            ),
                            fit: BoxFit.fill
                        ),
                      ),
                      padding: const EdgeInsets.symmetric(horizontal:12.0,vertical: 15.0),
                      child:  const Text(
                          '获取验证码'
                      ),
                    ),
                  )
                ],
              )
            ],
          ),
        );
      });
  Widget _buildPwdViewWidget()=> BlocBuilder<LoginBloc,LoginState>(
      builder: (context,state){
        final bloc = BlocProvider.of<LoginBloc>(context);
        return Padding(
          padding: EdgeInsets.symmetric(horizontal: 90.w),
          child: Column(
            children: [
              15.verticalSpace,
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    'phone'.assetPng,
                    height: 45.h,
                    width: 35.w,
                  ),
                  10.5.horizontalSpace,
                  Expanded(
                      child: Container(
                          height: 55.h,
                          width: double.infinity,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              image: DecorationImage(
                                image: AssetImage(
                                    'Input_layer_up'.assetPng
                                ),
                                fit: BoxFit.fitWidth,
                              )
                          ),
                          child: TextField(
                            controller: bloc.phoneNumController,
                            textAlign: TextAlign.center,
                            textInputAction: TextInputAction.done,
                            decoration: const InputDecoration(
                              hintText: '请输入手机号',
                              border: InputBorder.none,
                            ),
                            keyboardType: TextInputType.phone,
                            onChanged: (String value) {bloc.add(PhoneNumChangeEvent());},)
                      )),
                  5.horizontalSpace,
                  SizedBox(
                    width: 100.w,
                    height: 55.h,
                  )
                ],
              ),
              12.verticalSpace,
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    'lock'.assetPng,
                    height: 34.h,
                    width: 31.w,
                  ),
                  10.5.horizontalSpace,
                  Expanded(
                    child: Container(
                        width: 397.5,
                        height: 55,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage(
                                  'Input_layer_down'.assetPng
                              ),
                              fit: BoxFit.fill,
                            )
                        ),
                        child: TextField(
                          controller: bloc.checkNumController,
                          textAlign: TextAlign.center,
                          textInputAction: TextInputAction.done,
                          decoration: const InputDecoration(
                            hintText: '请输入密码',
                            border: InputBorder.none,
                          ),
                          onChanged: (String value) {
                            bloc.add(CheckFieldChangeEvent());
                          },
                        )
                    ),
                  ),
                  5.horizontalSpace,
                  GestureDetector(
                    onTap: () => bloc.add(ForgetPasswordEvent()),
                    child: Container(
                      width: 100.w,
                      height: 55.h,
                      alignment: Alignment.centerLeft,
                      child: const Text(
                          '忘记密码 ?'
                      ),
                    ),
                  )
                ],
              )
            ],
          ),
        );
      });
}