Flutter 项目实战 登录界面 (一)

/  登录界面样式  /

 /  开发者环境  / 

Android Studio 版本

Flutter SDK 版本 ( 用  flutter --version  命令查看 )

Flutter 2.8.1 • channel stable • https://github.com.cnpmjs.org/flutter/flutter.git
Framework • revision 77d935af4d (8 months ago) • 2021-12-16 08:37:33 -0800
Engine • revision 890a5fca2e
Tools • Dart 2.15.1

用命令创建工程 （ flutter create flutter_person_course ）

 配置 build.gradle 文件仓库地址

repositories {
        // google()
        maven { url'https://maven.aliyun.com/repository/public/' }

        maven { url'https://maven.aliyun.com/repository/google/' }

        maven { url'https://maven.aliyun.com/repository/jcenter/' }

        maven { url'https://maven.aliyun.com/repository/central/' }
        mavenCentral()

}

配置 gradle 下载地址 （ gradle-wrapper.properties文件 ）

distributionBase=GRADLE_USER_HOME
distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-bin.zip
distributionPath=wrapper/dists
zipStorePath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME

/  配置图片资源  / 

切换工程到 project 状态并创建 assets 文件夹

在 pubspec.yaml 文件里面配置图片资源文件

/  创建BaseStatefulWidget  /

import 'package:flutter/material.dart';

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

  @override
  BaseState createState() => getState();

  ///子类实现
  BaseState getState();
}

abstract class BaseState<V extends BaseStatefulWidget>
    extends State<V>{


  @override
  Widget build(BuildContext context) {
     return buildWidget();
  }

  Widget buildWidget();
}

/  配置flutter_screenutil插件  /

pubspec.yaml 配置 flutter_screenutil 插件依赖

根据UI设计的尺寸进行初始化配置 

我的初始化配置是 以1080x2340 为基准（设置字体大小可用.sp，设置宽度用.w，设置高度用.h，设置半径用.r）

/  登录、注册首页  / 

顶部图片 

Scaffold(
        appBar: null,
        body: Column(
          children: [
            /// 顶部图片
            Expanded(
              child: Container(
                  width: double.infinity,
                  height: MediaQuery.of(context).size.width,