news_getx/lib/modules/sign_up/sign_up_page.dart

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:news_getx/modules/widgets/app_bar.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 'sign_up_controller.dart';

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

  // logo
  Widget _buildLogo() {
    return Container(
      margin: EdgeInsets.only(top: 50.h),
      child: Text(
        "Sign up",
        textAlign: TextAlign.center,
        style: TextStyle(
          color: AppColors.primaryText,
          fontFamily: "Montserrat",
          fontWeight: FontWeight.w600,
          fontSize: 24.sp,
          height: 1,
        ),
      ),
    );
  }

  // 登录表单
  Widget _buildInputForm() {
    return Container(
      width: 295.w,
      margin: EdgeInsets.only(top: 49.h),
      child: Column(
        children: [
          // email input
          InputTextEdit(
            controller: controller.fullNameController,
            keyboardType: TextInputType.text,
            hintText: "Full name",
            marginTop: 0,
          ),
          // email input
          InputTextEdit(
            controller: controller.emailController,
            keyboardType: TextInputType.emailAddress,
            hintText: "Email",
          ),
          // 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.handleRegister,
                  width: 295,
                  title: "Create an account",
                ),
              ],
            ),
          ),

          // Fogot password
          Padding(
            padding: const EdgeInsets.fromLTRB(20, 8, 20, 0),
            child: Text.rich(
              TextSpan(children: [
                TextSpan(text: 'By signing up you agree to our '),
                TextSpan(
                  text: 'Terms ',
                  style: TextStyle(
                    color: AppColors.secondaryElementText,
                  ),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      // 处理点击事件
                      print('Terms');
                    },
                ),
                TextSpan(text: 'and '),
                TextSpan(
                  text: 'Conditions of Use',
                  style: TextStyle(
                    color: AppColors.secondaryElementText,
                  ),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      // 处理点击事件
                      print('Conditions');
                    },
                ),
              ]),
              textAlign: TextAlign.center,
              style: TextStyle(
                fontFamily: "Avenir",
                fontWeight: FontWeight.w400,
                fontSize: 16.sp,
              ),
            ),
          )
        ],
      ),
    );
  }

  // 第三方登录
  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 _buildHaveAccountButton() {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 20.h),
      child: FlatButton(
        width: 295,
        height: 44,
        title: "I have an account",
        onPressed: controller.handleNavPop,
        gbColor: AppColors.secondaryElement,
        fontColor: AppColors.primaryText,
        fontWeight: FontWeight.w500,
        fontSize: 16.sp,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: transparentAppBar(
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back,
            color: AppColors.primaryText,
          ),
          onPressed: controller.handleNavPop,
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(
              Icons.info_outline,
              color: AppColors.primaryText,
            ),
            onPressed: controller.handleTip,
          )
        ],
      ),
      body: Center(
        child: Column(
          children: [
            Divider(height: 1),
            _buildLogo(),
            _buildInputForm(),
            Spacer(),
            _buildThirdPartyLogin(),
            _buildHaveAccountButton(),
          ],
        ),
      ),
    );
  }
}