news_getx/lib/modules/sign_in/sign_in_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:news_getx/modules/widgets/button.dart';
import 'package:news_getx/modules/widgets/input.dart';
import 'package:news_getx/theme/app_colors.dart';
import 'package:news_getx/theme/app_shadows.dart';

import 'sign_in_controller.dart';

class SignInPage extends GetView<SignInController> {
  const SignInPage({Key? key}) : super(key: key);

  // logo
  Widget _buildLogo() {
    return Container(
      width: 110.w,
      margin: EdgeInsets.only(top: (40 + 44.0).h),
      child: Column(
        children: [
          Container(
            width: 76.w,
            height: 76.w,
            decoration: BoxDecoration(
              color: AppColors.primaryBackground,
              boxShadow: [
                AppShadows.primaryShadow,
              ],
              // 父容器的50%
              borderRadius: BorderRadius.circular((76 * 0.5).w),
            ),
            child: Image.asset(
              'assets/images/logo.png',
              fit: BoxFit.none,
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 15.h),
            child: Text(
              'SECTOR',
              style: TextStyle(
                color: AppColors.primaryText,
                fontFamily: "Montserrat",
                fontWeight: FontWeight.w600,
                fontSize: 24.sp,
                height: 1,
              ),
              textAlign: TextAlign.center,
            ),
          ),
          Text(
            'news',
            style: TextStyle(
              color: AppColors.primaryText,
              fontFamily: "Avenir",
              fontWeight: FontWeight.w400,
              fontSize: 16.sp,
              height: 1,
            ),
          ),
        ],
      ),
    );
  }

  // 登录表单
  Widget _buildInputForm() {
    return Container(
      width: 295.w,
      margin: EdgeInsets.only(top: 49.h),
      child: Column(
        children: [
          // email input
          InputTextEdit(
            controller: controller.emailController,
            keyboardType: TextInputType.emailAddress,
            hintText: "Email",
            marginTop: 0,
          ),
          // password input
          InputTextEdit(
            controller: controller.passwordController,
            keyboardType: TextInputType.visiblePassword,
            hintText: "Password",
            isPassword: true,
          ),
          // 注册、登录 横向布局
          Container(
            height: 44.h,
            margin: EdgeInsets.only(top: 15.h),
            child: Row(
              children: [
                // 注册
                FlatButton(
                  onPressed: controller.handleNavSignUp,
                  title: "Sign up",
                  gbColor: AppColors.thirdElement,
                ),
                Spacer(),
                // 登录
                FlatButton(
                  onPressed: controller.handleSignIn,
                  gbColor: AppColors.primaryElement,
                  title: "Sign in",
                )
              ],
            ),
          ),

          // Fogot password
          Padding(
            padding: const EdgeInsets.only(top: 8.0),
            child: TextButton(
              onPressed: () {},
              child: Text(
                "Fogot password?",
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: AppColors.secondaryElementText,
                  fontFamily: "Avenir",
                  fontWeight: FontWeight.w400,
                  fontSize: 16.sp,
                  height: 1, // 设置下行高，否则字体下沉
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  // 第三方登录
  Widget _buildThirdPartyLogin() {
    return Container(
      width: 295.w,
      margin: EdgeInsets.only(top: 40.h),
      child: Column(
        children: [
          Text(
            'Or sign in with social networks',
            textAlign: TextAlign.center,
            style: TextStyle(
              color: AppColors.primaryText,
              fontFamily: "Avenir",
              fontWeight: FontWeight.w400,
              fontSize: 16.sp,
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 20.h),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                IconBorderFlatButton(
                  onPressed: () {},
                  iconFileName: "twitter",
                  width: 80.w,
                ),
                IconBorderFlatButton(
                  onPressed: () {},
                  iconFileName: "google",
                  width: 80.w,
                ),
                IconBorderFlatButton(
                  onPressed: () {},
                  iconFileName: "facebook",
                  width: 80.w,
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  // 注册按钮
  Widget _buildSignupButton() {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 20.h),
      child: FlatButton(
        width: 295,
        height: 44,
        title: "Sign up",
        onPressed: controller.handleNavSignUp,
        gbColor: AppColors.secondaryElement,
        fontColor: AppColors.primaryText,
        fontWeight: FontWeight.w500,
        fontSize: 16.sp,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Center(
        child: Column(
          children: [
            _buildLogo(),
            _buildInputForm(),
            Spacer(),
            _buildThirdPartyLogin(),
            _buildSignupButton(),
          ],
        ),
      ),
    );
  }
}