• Flutter基础 -- Flutter布局练习（小项目）

    目录

    1. Splash 布局（第一页）

    1.1 目标

    1.2 当前效果图

    1.3 创建 Splash 界面

    1.4 设置 MaterialApp

    1.5 设置 Splash 背景色

    1.6 布局 Splash 界面

    1.7 总结

    2. Splash 圆角图片

    2.1 目标

    2.2 当前效果图

    2.3 蓝湖下载图片

    2.4 图片导入项目

    2.5 编写 assets 索引

    2.6 编写标志 Logo

    2.7 总结

    3. Splash 文字

    3.1 目标

    3.2 当前效果图

    3.3 蓝湖标注查看

    3.4 字体下载导入

    3.5 编写 TextStyle

    3.6 加入间距

    3.7 总结

    4. Splash 倒计时

    4.1 目标

    4.2 当前效果图

    4.3 改成有状态组件

    4.4 实现倒计时

    4.5 重构文字显示函数

    4.6 完整代码

    4.7 总结

    1. Welcome 图片尺寸适应（第二页）

    1.1 目标

    1.2 当前效果图

    1.3 设置全局字体

    1.4 界面布局、标题

    1.5 图片尺寸适应

    1.6 总结

    2. Welcome 导航切换

    2.1 目标

    2.2 当前效果图

    2.3 底部按钮

    2.4 导航切换

    2.5 总结

    1. login 布局（第三页）

    1.1 目标

    1.2 布局

    1.3 总结

    2. login 登录表单

    2.1 目标

    2.2 当前效果图

    2.3 登录表单

    2.4 总结

    3. login 按钮抽取

    3.1 目标

    3.2 当前效果图

    3.3 按钮组件抽取

    3.4 登录按钮

    3.5 欢迎按钮

    3.6 总结

    博主wx：yuanlai45_csdn 博主qq：2777137742

    后期会创建粉丝群，为同学们提供分享交流平台以及提供官方发送的福利奖品~

    1. Splash 布局（第一页）

    1.1 目标

    • 查看蓝湖标注
    • 初始项目
    • 创建 splash 界面

    github 目标图片在里面

    https://github.com/ducafecat/flutter_quickstart_learn

    1.2 当前效果图

    1.3 创建 Splash 界面

    lib/pages/splash.dart

    1. import 'package:flutter/material.dart';
    2.  
    3. import '../common/index.dart';
    4.  
    5. class SplashPage extends StatelessWidget {
    6.   const SplashPage({Key? key}) : super(key: key);
    7.  
    8.   // 主视图
    9.   Widget _buildView(BuildContext context) {
    10.     return Text("splash");
    11.   }
    12.  
    13.   @override
    14.   Widget build(BuildContext context) {
    15.     return Scaffold(
    16.       body: Center(child: _buildView(context)),
    17.     );
    18.   }
    19. }

    1.4 设置 MaterialApp

    lib/main.dart

    1. import 'package:flutter/material.dart';
    2.  
    3. import 'pages/splash.dart';
    4.  
    5. void main() {
    6.   runApp(const MyApp());
    7. }
    8.  
    9. class MyApp extends StatelessWidget {
    10.   const MyApp({Key? key}) : super(key: key);
    11.  
    12.   @override
    13.   Widget build(BuildContext context) {
    14.     return MaterialApp(
    15.       title: 'Flutter Quick Start',
    16.  
    17.       // 首页
    18.       home: const SplashPage(),
    19.  
    20.       // 关闭 debug 标签
    21.       debugShowCheckedModeBanner: false,
    22.     );
    23.   }
    24. }

    1.5 设置 Splash 背景色

    lib/common/app_colors.dart

    1. import 'package:flutter/material.dart';
    2.  
    3. /// 颜色配置
    4. class AppColors {
    5.   /// splash 背景色
    6.   static const Color backgroundSplash = Color(0xff0274bc);
    7. }

    lib/pages/splash.dart

    1. import '../common/index.dart';
    2.  
    3. ...
    4.  
    5. 	@override
    6.   Widget build(BuildContext context) {
    7.     return Scaffold(
    8.       backgroundColor: AppColors.backgroundSplash, // 背景色
    9.       body: _buildView(context),
    10.     );
    11.   }

    1.6 布局 Splash 界面

    lib/pages/splash.dart

    1.   // 主视图
    2.   Widget _buildView(BuildContext context) {
    3.     return Column(
    4.       mainAxisAlignment: MainAxisAlignment.center,
    5.       crossAxisAlignment: CrossAxisAlignment.center,
    6.       children: [
    7.         // 图标
    8.         Container(
    9.           color: Colors.white,
    10.           width: 120,
    11.           height: 120,
    12.         ),
    13.         // 标题
    14.         const Text("Online Market"),
    15.         // 倒计时
    16.         const Text("10"),
    17.       ],
    18.     );
    19.   }

    1.7 总结

    • 蓝湖标注平台 布局、尺寸、字体、颜色...

    • 初始项目 pages common 目录创建

    • 配置 MaterialApp.home 首页

    • 配置 Scaffold 脚手架背景色

    • 全局颜色管理 AppColors

    • 布局 Splash 界面

    2. Splash 圆角图片

    2.1 目标

    • 导入图片资源
    • 使用层叠布局编写 logo

    2.2 当前效果图

    2.3 蓝湖下载图片

    依次选中图片，选中 PNG 格式，IOS 类型，3X 高清，最后下载当前切图        

    2.4 图片导入项目

    放入你的项目 assets/images/3.0x/logo.pn

    生成 1x 2x 图片

    插件地址 Flutter GetX Generator - 猫哥 - Visual Studio Marketplace

    修改 pubspec.yaml

    1. flutter:
    2.   ...
    3.   
    4.   assets:
    5.     - assets/images/

    2.5 编写 assets 索引

    编写 lib/common/assets.dart， 将 assets/images/files.txt 内容复制进去，这个文件是插件生成的，防止文件太多，手写出错

    1. /// 图片资源
    2. class AssetsImages {
    3.   static const logoPng = 'assets/images/logo.png';
    4. }

    lib/pages/splash.dart

    1.   // 图标
    2.   Widget _buildLogo() {
    3.     return Stack(
    4.       alignment: Alignment.center,
    5.       children: [
    6.         // 底部
    7.         Container(
    8.           width: 120,
    9.           height: 120,
    10.           decoration: BoxDecoration(
    11.             color: Colors.white,
    12.             borderRadius: BorderRadius.circular(120 / 2),
    13.           ),
    14.         ),
    15.         // 图标
    16.         Image.asset(
    17.           AssetsImages.logoPng,
    18.           width: 84,
    19.           height: 80,
    20.         ),
    21.       ],
    22.     );
    23.   }
    1.   // 主视图
    2.   Widget _buildView(BuildContext context) {
    3.     return Column(
    4.       mainAxisAlignment: MainAxisAlignment.center,
    5.       crossAxisAlignment: CrossAxisAlignment.center,
    6.       children: [
    7.         // 图标
    8.         _buildLogo(),
    9.         // 标题
    10.         const Text("Online Market"),
    11.         // 倒计时
    12.         const Text("10"),
    13.       ],
    14.     );
    15.   }

    2.7 总结

    • 下载蓝湖切图 选择 png 格式 ios 模式 3x 尺寸
    • 使用猫哥插件生成 1x 2x 图片，创建资源索引管理
    • 使用层叠布局创建 logo
    • 使用函数进一步的管理代码

    3. Splash 文字

    3.1 目标

    • 导入字体文件
    • 配置文字样式

    3.2 当前效果图

    3.3 蓝湖标注查看

    需要关注的属性有：

    • font-size 字体大小
    • font-family 字体名称
    • font-weight 字体重度
    • color 颜色
    • line-height 行高

    3.4 字体下载导入

    google 字体下载

    https://fonts.google.com/

    下载后导入 assets/fonts/

    编辑 pubspec.yaml

    1.   fonts:
    2.     - family: Poppins
    3.       fonts:
    4.         - asset: assets/fonts/Poppins-Light.ttf
    5.           weight: 300
    6.         - asset: assets/fonts/Poppins-Regular.ttf
    7.           weight: 400
    8.         - asset: assets/fonts/Poppins-Medium.ttf
    9.           weight: 500
    10.         - asset: assets/fonts/Poppins-Bold.ttf
    11.           weight: 700

    3.5 编写 TextStyle

    lib/pages/splash.dart

    1.   // 标题
    2.   const Text(
    3.     "Online Market",
    4.     style: TextStyle(
    5.       fontSize: 19,
    6.       fontFamily: "Poppins",
    7.       fontWeight: FontWeight.bold,
    8.       color: Colors.white,
    9.       height: 22 / 19,
    10.     ),
    11.   ),

    fontFamily 中写入字体名称 Poppins

    height 文本跨度的行高将为 [fontSize] 的倍数并且正好是 fontSize *height 逻辑像素 高。换行的时候才有意义

    3.6 加入间距

    标题和图标间距 24，和计数器 27

    lib/pages/splash.dart

    1.   // 主视图
    2.   Widget _buildView(BuildContext context) {
    3.     return Column(
    4.       mainAxisAlignment: MainAxisAlignment.center,
    5.       crossAxisAlignment: CrossAxisAlignment.center,
    6.       children: [
    7.         // 图标
    8.         _buildLogo(),
    9.  
    10.         const SizedBox(height: 24),
    11.  
    12.         // 标题
    13.         const Text(
    14.           "Online Market",
    15.           style: TextStyle(
    16.             fontSize: 19,
    17.             fontFamily: "Poppins",
    18.             fontWeight: FontWeight.bold,
    19.             color: Colors.white,
    20.             height: 22 / 19,
    21.           ),
    22.         ),
    23.  
    24.         const SizedBox(height: 27),
    25.  
    26.         // 倒计时
    27.         const Text(
    28.           "10",
    29.           style: TextStyle(
    30.             fontSize: 19,
    31.             fontFamily: "Poppins",
    32.             fontWeight: FontWeight.bold,
    33.             color: Colors.white,
    34.             height: 22 / 19,
    35.           ),
    36.         ),
    37.       ],
    38.     );
    39.   }

    3.7 总结

    • 导入字体 pubspec 中详细明确 字体名称、 字体文件、字体weight
    • 用不到的字体文件不用方式 assets/fonts 目录中
    • 设置文字样式 fontSize、fontFamily、fontWeight、color
    • 具体值的间距用 SizedBox 来配置

    4. Splash 倒计时

    4.1 目标

    • 使用有状态组件
    • 倒计时更新组件

    4.2 当前效果图

    4.3 改成有状态组件

    lib/pages/splash.dart

    1. import 'package:flutter/foundation.dart';
    2. import 'package:flutter/material.dart';
    3.  
    4. import '../common/index.dart';
    5.  
    6. class SplashPage extends StatefulWidget {
    7.   const SplashPage({Key? key}) : super(key: key);
    8.  
    9.   @override
    10.   State createState() => _SplashPageState();
    11. }
    12.  
    13. class _SplashPageState extends State<SplashPage> {
    14.   // 图标
    15.   Widget _buildLogo() {
    16.     return Stack(
    17.       alignment: Alignment.center,
    18.       children: [
    19.         // 底部
    20.         Container(
    21.           width: 120,
    22.           height: 120,
    23.           decoration: BoxDecoration(
    24.             color: Colors.white,
    25.             borderRadius: BorderRadius.circular(120 / 2),
    26.           ),
    27.         ),
    28.         // 图标
    29.         Image.asset(
    30.           AssetsImages.logoPng,
    31.           width: 84,
    32.           height: 80,
    33.         ),
    34.       ],
    35.     );
    36.   }
    37.  
    38.   // 主视图
    39.   Widget _buildView(BuildContext context) {
    40.     return Column(
    41.       mainAxisAlignment: MainAxisAlignment.center,
    42.       crossAxisAlignment: CrossAxisAlignment.center,
    43.       children: [
    44.         // 图标
    45.         _buildLogo(),
    46.  
    47.         const SizedBox(height: 24),
    48.  
    49.         // 标题
    50.         const Text(
    51.           "Online Market",
    52.           style: TextStyle(
    53.             fontSize: 19,
    54.             fontFamily: "Poppins",
    55.             fontWeight: FontWeight.bold,
    56.             color: Colors.white,
    57.             height: 22 / 19,
    58.           ),
    59.         ),
    60.  
    61.         const SizedBox(height: 27),
    62.  
    63.         // 倒计时
    64.         Text(
    65.           "0",
    66.           style: const TextStyle(
    67.             fontSize: 19,
    68.             fontFamily: "Poppins",
    69.             fontWeight: FontWeight.bold,
    70.             color: Colors.white,
    71.             height: 22 / 19,
    72.           ),
    73.         ),
    74.       ],
    75.     );
    76.   }
    77.  
    78.   @override
    79.   Widget build(BuildContext context) {
    80.     return Scaffold(
    81.       backgroundColor: AppColors.backgroundSplash,
    82.       body: Center(child: _buildView(context)),
    83.     );
    84.   }
    85. }

    4.4 实现倒计时

    lib/pages/splash.dart

    计数 num

    1.   // 计数 num
    2.   final duration = 10;
    3.   int number = 0;

    倒计时函数

    1.   // 倒计时
    2.   Future<void> _countdown() async {
    3.     number = duration;
    4.     for (int i = 0; i < duration; i++) {
    5.       await Future.delayed(const Duration(seconds: 1), () {
    6.         if(mounted == ture) {
    7.           setState(() {
    8.             number--;
    9.           });
    10.         }
    11.       });
    12.       // 倒计时结束, 进入 welcome
    13.       if (number == 0) {
    14.         if (kDebugMode) {
    15.           print("倒计时结束");
    16.         }
    17.       }
    18.     }
    19.   }

    注意 await async 异步函数的语法

    初始执行

    1.   @override
    2.   void initState() {
    3.     super.initState();
    4.     _countdown();
    5.   }

    打印显示

    1.   // 主视图
    2.   Widget _buildView(BuildContext context) {
    3.     		...
    4.           
    5. 				// 倒计时
    6.         Text(
    7.           number > 0 ? "$number" : "done",
    8.           style: const TextStyle(
    9.             fontSize: 19,
    10.             fontFamily: "Poppins",
    11.             fontWeight: FontWeight.bold,
    12.             color: Colors.white,
    13.             height: 22 / 19,
    14.           ),
    15.         ),

    4.5 重构文字显示函数

    macos 下是 option + enter , 也可以在组件上 右键 -> 重构...

    文字显示函数

    1.   // 文字显示
    2.   Text _buildText(String text) {
    3.     return Text(
    4.       text,
    5.       style: const TextStyle(
    6.         fontSize: 19,
    7.         fontFamily: "Poppins",
    8.         fontWeight: FontWeight.bold,
    9.         color: Colors.white,
    10.         height: 22 / 19,
    11.       ),
    12.     );
    13.   }

    主视图代码

    1.   // 主视图
    2.   Widget _buildView(BuildContext context) {
    3.     return Center(
    4.       child: Column(
    5.         mainAxisAlignment: MainAxisAlignment.center,
    6.         children: [
    7.           // logo
    8.           _buildLogo(),
    9.           const SizedBox(height: 24),
    10.  
    11.           // 标题
    12.           _buildText("Online Market"),
    13.           const SizedBox(height: 27),
    14.  
    15.           // 计数器
    16.           _buildText("10"),
    17.  
    18.           // end
    19.         ],
    20.       ),
    21.     );
    22.   }

    4.6 完整代码

    lib/pages/splash.dart

    1. import 'package:flutter/material.dart';
    2.  
    3. import '../common/app_colors.dart';
    4. import '../common/assets.dart';
    5.  
    6. class SplashPage extends StatefulWidget {
    7.   const SplashPage({Key? key}) : super(key: key);
    8.  
    9.   @override
    10.   State createState() => _SplashPageState();
    11. }
    12.  
    13. class _SplashPageState extends State<SplashPage> {
    14.   // 计数变量
    15.   final duration = 3;
    16.   int number = 0;
    17.  
    18.   // 倒计时函数
    19.   Future<void> _countdown() async {
    20.     number = duration;
    21.     for (var i = 0; i < duration; i++) {
    22.       await Future.delayed(const Duration(seconds: 1), () {
    23.         if (mounted == true) {
    24.           setState(() {
    25.             number--;
    26.           });
    27.         }
    28.       });
    29.  
    30.       if (number == 0) {
    31.         print("倒计时结束");
    32.       }
    33.     }
    34.   }
    35.  
    36.   @override
    37.   void initState() {
    38.     super.initState();
    39.     _countdown();
    40.   }
    41.  
    42.   // logo
    43.   Widget _buildLogo() {
    44.     return Stack(
    45.       alignment: Alignment.center,
    46.       children: [
    47.         // 底部
    48.         Container(
    49.           width: 120,
    50.           height: 120,
    51.           decoration: BoxDecoration(
    52.             color: Colors.white,
    53.             borderRadius: BorderRadius.circular(120 / 2),
    54.           ),
    55.         ),
    56.  
    57.         // 图片
    58.         Image.asset(
    59.           AssetsImages.logoPng,
    60.           width: 84,
    61.           height: 80,
    62.         ),
    63.       ],
    64.     );
    65.   }
    66.  
    67.   // 文字显示
    68.   Text _buildText(String text) {
    69.     return Text(
    70.       text,
    71.       style: const TextStyle(
    72.         fontSize: 19,
    73.         fontFamily: "Poppins",
    74.         fontWeight: FontWeight.bold,
    75.         color: Colors.white,
    76.         height: 22 / 19,
    77.       ),
    78.     );
    79.   }
    80.  
    81.   // 主视图
    82.   Widget _buildView(BuildContext context) {
    83.     return Center(
    84.       child: Column(
    85.         mainAxisAlignment: MainAxisAlignment.center,
    86.         children: [
    87.           // logo
    88.           _buildLogo(),
    89.           const SizedBox(height: 24),
    90.  
    91.           // 标题
    92.           _buildText("Online Market"),
    93.           const SizedBox(height: 27),
    94.  
    95.           // 计数器
    96.           _buildText(number > 0 ? "$number" : "done"),
    97.  
    98.           // end
    99.         ],
    100.       ),
    101.     );
    102.   }
    103.  
    104.   @override
    105.   Widget build(BuildContext context) {
    106.     return Scaffold(
    107.       backgroundColor: AppColors.backgroundSplash,
    108.       body: _buildView(context),
    109.     );
    110.   }
    111. }

    4.7 总结

    • 无状态组件重构成有状态组件
    • 使用 Future.delayed 方式实现倒计时
    • 使用 三目运算符 控制显示

    1. Welcome 图片尺寸适应（第二页）

    1.1 目标

    • 全局配置样式、字体
    • 图片适配高宽
    • 布局代码练习

    1.2 当前效果图

     

    1.3 设置全局字体

    lib/main.dart

    1. class MyApp extends StatelessWidget {
    2.   const MyApp({Key? key}) : super(key: key);
    3.  
    4.   @override
    5.   Widget build(BuildContext context) {
    6.     return MaterialApp(
    7.       ...
    8.  
    9.       // 样式
    10.       theme: ThemeData(
    11.         primarySwatch: Colors.orange,
    12.         fontFamily: "Poppins", // 字体
    13.       ),

    字体全局放在 theme fontFamily 属性中

    1.4 界面布局、标题

    lib/pages/welcome.dart

    1. import 'package:flutter/material.dart';
    2.  
    3. /// 欢迎页面
    4. class WelcomePage extends StatelessWidget {
    5.   const WelcomePage({Key? key}) : super(key: key);
    6.  
    7.   // 主视图
    8.   Widget _buildView() {
    9.     return Column(
    10.       mainAxisAlignment: MainAxisAlignment.center,
    11.       children: [
    12.         // 标题
    13.         const Padding(
    14.           padding: EdgeInsets.symmetric(horizontal: 30),
    15.           child: Text(
    16.             "Browse & Order All Products at Any Time",
    17.             textAlign: TextAlign.center,
    18.             style: TextStyle(
    19.               fontSize: 20,
    20.               fontFamily: "Poppins",
    21.               fontWeight: FontWeight.bold,
    22.               color: Color(0xff2B2A2A),
    23.               height: 23 / 20,
    24.             ),
    25.           ),
    26.         ),
    27.  
    28.         // 图
    29.         Container(),
    30.  
    31.         // 底部按钮
    32.         Container(),
    33.       ],
    34.     );
    35.   }
    36.  
    37.   @override
    38.   Widget build(BuildContext context) {
    39.     return Scaffold(
    40.       body: _buildView(),
    41.     );
    42.   }
    43. }

    标题代码抽取函数，整理代码

    1.   // 标题
    2.   Padding _buildTitle() {
    3.     return const Padding(
    4.       padding: EdgeInsets.symmetric(horizontal: 30),
    5.       child: Text(
    6.         "Browse & Order All Products at Any Time",
    7.         textAlign: TextAlign.center,
    8.         style: TextStyle(
    9.           fontSize: 20,
    10.           fontFamily: "Poppins",
    11.           fontWeight: FontWeight.bold,
    12.           color: Color(0xff2B2A2A),
    13.           height: 23 / 20,
    14.         ),
    15.       ),
    16.     );
    17.   }
    1.   // 主视图
    2.   Widget _buildView() {
    3.     return Column(
    4.       children: [
    5.         const SizedBox(height: 100),
    6.  
    7.         // 标题
    8.         _buildTitle(),
    9.         
    10.         ...

    1.5 图片尺寸适应

    从蓝湖下载图片导入项目，这里不再重复叙述

    lib/pages/welcome.dart

    1.   // 图片
    2.   Image _buildImage() {
    3.     return Image.asset(
    4.       AssetsImages.welcomePng,
    5.       height: 300,
    6.       width: double.infinity,
    7.       fit: BoxFit.none,
    8.       //fit:BoxFit.fitWidth
    9.     );
    10.   }
    1.   // 主视图
    2.   Widget _buildView() {
    3.     return Column(
    4.       mainAxisAlignment: MainAxisAlignment.center,
    5.       children: [
    6.         // 标题
    7.         _buildTitle(),
    8.  
    9.         const SizedBox(height: 70),
    10.  
    11.         // 图
    12.         _buildImage(),
    13.  
    14.         // 底部按钮
    15.         _buildBtns(),
    16.       ],
    17.     );
    18.   }

    1.6 总结

    • 通过 ThemeData.fontFamily 设置全局字体
    • padding: EdgeInsets.symmetric(horizontal: 30) 水平 Padding 距离
    • 图片组件 Image.fit 设置宽高适配
    • 布局第一规则 从上往下

    2. Welcome 导航切换

    2.1 目标

    • 布局规则 “从上往下、从左往右”
    • 全局按钮颜色样式
    • 布局训练 横向、纵向 混合

    2.2 当前效果图

    2.3 底部按钮

    lib/pages/welcome.dart

    1.   // goto 登录页面
    2.   void onLogin(BuildContext context) {}
    3.  
    4. 	// 底部按钮
    5.   Padding _buildBtns(BuildContext context) {
    6.     return Padding(
    7.       padding: const EdgeInsets.symmetric(horizontal: 24),
    8.       child: Row(
    9.         children: [
    10.           // skip
    11.           TextButton(
    12.             onPressed: () => onLogin(context),
    13.             child: const Text(
    14.               "Skip",
    15.               style: TextStyle(
    16.                 fontSize: 15,
    17.                 fontWeight: FontWeight.w300,
    18.                 color: Color(0xff2B2A2A),
    19.               ),
    20.             ),
    21.           ),
    22.  
    23.           // 撑开
    24.           const Expanded(
    25.             child: SizedBox(),
    26.           ),
    27.  
    28.           // Get Started
    29.           Container(
    30.             height: 42,
    31.             width: 140,
    32.             clipBehavior: Clip.antiAlias,
    33.             decoration: const BoxDecoration(
    34.               borderRadius: BorderRadius.all(
    35.                 Radius.circular(18),
    36.               ),
    37.             ),
    38.             child: ElevatedButton(
    39.               onPressed: () => onLogin(context),
    40.               style: ButtonStyle(
    41.                 elevation: MaterialStateProperty.all(0),
    42.                 minimumSize: MaterialStateProperty.all(Size.zero),
    43.               ),
    44.               child: const Text(
    45.                 "Get Started",
    46.                 style: TextStyle(
    47.                   fontSize: 16,
    48.                   fontWeight: FontWeight.w300,
    49.                   color: Colors.white,
    50.                 ),
    51.               ),
    52.             ),
    53.           ),
    54.         ],
    55.       ),
    56.     );
    57.   }
    1.   // 主视图
    2.   Widget _buildView(BuildContext context) {
    3.     return Column(
    4.       mainAxisAlignment: MainAxisAlignment.center,
    5.       children: [
    6.         // 标题
    7.         _buildTitle(),
    8.  
    9.         const SizedBox(height: 70),
    10.  
    11.         // 图
    12.         _buildImage(),
    13.  
    14.         const SizedBox(height: 70),
    15.  
    16.         // 底部按钮
    17.         _buildBtns(context),
    18.       ],
    19.     );
    20.   }

    2.4 导航切换

    splash 倒计时结束进入 welcome 界面

    1.   // 倒计时
    2.   Future<void> _countdown() async {
    3.     number = duration;
    4.     for (int i = 0; i < duration; i++) {
    5.       ...
    6.       // 倒计时结束, 进入 welcome
    7.       if (number == 0) {
    8.         Navigator.pushReplacement(context,
    9.             MaterialPageRoute(builder: (context) => const WelcomePage()));
    10.       }
    11.     }
    12.   }

    2.5 总结

    1. 设计稿布局分析 “从上往下、从左往右”
    2. 先写布局代码结构
    3. 注意命名 _buildXXX 开头都是私有布局函数
    4. 导航 Navigator.pushReplacement 进入新界面并替换当前

    1. login 布局（第三页）

    1.1 目标

    看标注布局界面（千锤百炼就会了）

    1.2 布局

    lib/pages/login.dart

    1.   // 登录表单
    2.   Widget _buildForm() {
    3.     return Container();
    4.   }
    1. 	// 主视图
    2.   Widget _buildView() {
    3.     return Container(
    4.       padding: const EdgeInsets.symmetric(horizontal: 15),
    5.       color: AppColors.backgroundSplash,
    6.       child: Column(
    7.         mainAxisAlignment: MainAxisAlignment.center,
    8.         children: [
    9.           // 图标
    10.           Image.asset(
    11.             AssetsImages.logoPng,
    12.             width: 60,
    13.           ),
    14.  
    15.           const SizedBox(height: 20),
    16.  
    17.           // 主标
    18.           const Text(
    19.             "Let’s Sign You In",
    20.             style: TextStyle(
    21.               fontSize: 20,
    22.               color: Colors.white,
    23.               fontWeight: FontWeight.bold,
    24.             ),
    25.           ),
    26.  
    27.           const SizedBox(height: 10),
    28.  
    29.           // 子标
    30.           const Text(
    31.             "Welcome back, you’ve been missed!",
    32.             style: TextStyle(
    33.               fontSize: 13,
    34.               color: Colors.white,
    35.               fontWeight: FontWeight.w300,
    36.             ),
    37.           ),
    38.  
    39.           const SizedBox(height: 50),
    40.  
    41.           // 表单
    42.           _buildForm(),
    43.         ],
    44.       ),
    45.     );
    46.   }
    1.   @override
    2.   Widget build(BuildContext context) {
    3.     return Scaffold(
    4.       body: _buildView(),
    5.     );
    6.   }

    1.3 总结

    • 记住布局规则 “从上往下、从左往右”
    • 用函数拆分视图结构

    2. login 登录表单

    2.1 目标

    • 编写表单
    • 有效性检查

    2.2 当前效果图

    2.3 登录表单

    lib/pages/login.dart

    1.   // 账号输入是否有效
    2.   bool isUserNameValid = false;
    1.   // 登录表单
    2.   Widget _buildForm() {
    3.     return Container(
    4.       padding: const EdgeInsets.fromLTRB(20, 50, 20, 20),
    5.       decoration: BoxDecoration(
    6.         color: Colors.white,
    7.         borderRadius: BorderRadius.circular(35),
    8.       ),
    9.       child: Column(
    10.         crossAxisAlignment: CrossAxisAlignment.start,
    11.         children: [
    12.           // Username or E-Mail
    13.           const Text(
    14.             "Username or E-Mail",
    15.             style: TextStyle(
    16.               fontSize: 15,
    17.               color: Color(0xff838383),
    18.               fontWeight: FontWeight.w300,
    19.             ),
    20.           ),
    21.           TextField(
    22.             onChanged: (value) {
    23.               bool valid = false;
    24.               if (value.length >= 6) {
    25.                 valid = true;
    26.               } else {
    27.                 valid = false;
    28.               }
    29.  
    30.               setState(() {
    31.                 isUserNameValid = valid;
    32.               });
    33.             },
    34.             decoration: InputDecoration(
    35.               hintText: "@",
    36.               // labelText: "Username or E-Mail",
    37.               // labelStyle: const TextStyle(
    38.               //   fontSize: 15,
    39.               //   color: Color(0xff838383),
    40.               //   fontWeight: FontWeight.w300,
    41.               // ),
    42.               prefixIcon: Image.asset(
    43.                 AssetsImages.iconUserPng,
    44.                 width: 23,
    45.                 height: 23,
    46.               ),
    47.               suffixIcon: isUserNameValid == true
    48.                   ? const Icon(
    49.                       Icons.done,
    50.                       color: Colors.green,
    51.                     )
    52.                   : null,
    53.             ),
    54.           ),
    55.  
    56.           // 间距
    57.           const SizedBox(height: 35),
    58.  
    59.           // Password
    60.           const Text(
    61.             "Password",
    62.             style: TextStyle(
    63.               fontSize: 15,
    64.               color: Color(0xff838383),
    65.               fontWeight: FontWeight.w300,
    66.             ),
    67.           ),
    68.           TextField(
    69.             obscureText: true,
    70.             decoration: InputDecoration(
    71.               hintText: "6 digits",
    72.               // labelText: "Password",
    73.               // labelStyle: const TextStyle(
    74.               //   fontSize: 15,
    75.               //   color: Color(0xff838383),
    76.               //   fontWeight: FontWeight.w300,
    77.               // ),
    78.               prefixIcon: Image.asset(
    79.                 AssetsImages.iconLockPng,
    80.                 width: 23,
    81.                 height: 23,
    82.               ),
    83.               suffixIcon: TextButton(
    84.                 onPressed: () {},
    85.                 child: const Text(
    86.                   "Forget?",
    87.                   style: TextStyle(
    88.                     fontSize: 15,
    89.                     color: Color(0xff0274bc),
    90.                     fontWeight: FontWeight.w500,
    91.                   ),
    92.                 ),
    93.               ),
    94.             ),
    95.           ),
    96.  
    97.           // 间距
    98.           const SizedBox(height: 30),
    99.  
    100.           // Sign In
    101.  
    102.           // 间距
    103.           const SizedBox(height: 16),
    104.  
    105.           // Don’t have an account?  + Sign Up
    106.           Row(
    107.             mainAxisAlignment: MainAxisAlignment.center,
    108.             children: [
    109.               // 文字
    110.               const Text(
    111.                 "Don’t have an account? ",
    112.                 style: TextStyle(
    113.                   fontSize: 15,
    114.                   color: Color(0xff171717),
    115.                   fontWeight: FontWeight.w300,
    116.                 ),
    117.               ),
    118.               
    119.               // 按钮
    120. 			  TextButton(
    121.                 onPressed: () {},
    122.                 child: const Text(
    123.                   "Sign Up",
    124.                   style: TextStyle(
    125.                     fontSize: 15,
    126.                     color: Color(0xff0274bc),
    127.                     fontWeight: FontWeight.bold,
    128.                   ),
    129.                 ),
    130.               ),
    131.               
    132.             ],
    133.           ),
    134.         ],
    135.       ),
    136.     );
    137.   }

    2.4 总结

    • 通过 TextField.decoration 属性进行装饰
    • TextField.obscureText 开启密码

    3. login 按钮抽取

    3.1 目标

    • 抽取公共按钮组件
    • 修改成纯 ElevatedButton 按钮

    3.2 当前效果图

    3.3 按钮组件抽取

    lib/common/widgets.dart

    1. import 'package:flutter/material.dart';
    2.  
    3. /// 按钮组件
    4. class ButtonWidget extends StatelessWidget {
    5.   const ButtonWidget({
    6.     Key? key,
    7.     this.height,
    8.     this.widget,
    9.     this.radius,
    10.     this.onPressed,
    11.     this.text,
    12.   }) : super(key: key);
    13.  
    14.   /// 文字
    15.   final String? text;
    16.  
    17.   /// 高度
    18.   final double? height;
    19.  
    20.   /// 宽度
    21.   final double? widget;
    22.  
    23.   /// 圆角
    24.   final double? radius;
    25.  
    26.   /// 点击事件
    27.   final void Function()? onPressed;
    28.  
    29.   @override
    30.   Widget build(BuildContext context) {
    31.     return ElevatedButton(
    32.       onPressed: onPressed,
    33.       style: ButtonStyle(
    34.         // 阴影高度
    35.         elevation: MaterialStateProperty.all(0),
    36.         // 最小尺寸
    37.         minimumSize: MaterialStateProperty.all(
    38.             Size(widget ?? double.infinity, height ?? double.infinity)),
    39.         // 形状 圆角
    40.         shape: MaterialStateProperty.all(
    41.           RoundedRectangleBorder(
    42.             borderRadius: BorderRadius.all(
    43.               Radius.circular(radius ?? 18),
    44.             ),
    45.           ),
    46.         ),
    47.       ),
    48.       child: Text(
    49.         // 文字
    50.         text ?? "",
    51.         // 文字样式
    52.         style: const TextStyle(
    53.           fontSize: 16,
    54.           fontWeight: FontWeight.w300,
    55.           color: Colors.white,
    56.         ),
    57.       ),
    58.     );
    59.   }
    60. }

    3.4 登录按钮

    lib/pages/login.dart

    1.   // 登录表单
    2.   Widget _buildForm() {
    3. 					...
    4.     			// Sign In
    5.           ButtonWidget(
    6.             text: 'Sign In',
    7.             onPressed: () {},
    8.             height: 60,
    9.             widget: double.infinity,
    10.             radius: 18,
    11.           ),

    3.5 欢迎按钮

    lib/pages/welcome.dart

    1.   // 底部按钮
    2.   Padding _buildBtns(BuildContext context) {
    3.     ...
    4.     // Get Started
    5.     ButtonWidget(
    6.       text: "Get Started",
    7.       height: 42,
    8.       widget: 140,
    9.       radius: 32,
    10.       onPressed: () => onLogin(context),
    11.     ),
    1.   // goto 登录页面
    2.   void onLogin(BuildContext context) {
    3.     Navigator.push(
    4.       context,
    5.       MaterialPageRoute(builder: (context) => const LoginPage()),
    6.     );
    7.   }

    3.6 总结

    • 公共组件类抽取方法
    • ElevatedButton 组件属性配置

    创作不易，希望读者三连支持 💖
    赠人玫瑰，手有余香 💖

  • 相关阅读:
    刷题日记【第十三篇】-笔试必刷题【数根+星际密码+跳台阶扩展问题+快到碗里来】
    【纯感性】【无数学公式】关于状态估计的总结和一点思考
    Ubuntu-Ports更新源 ARM64更新源
    spark中的cache和checkpoint
    无人机+人工智能：多智能体，智能蜂群技术详解
    leetcode分类刷题：队列（Queue）（三、优先队列用于归并排序）
    CN_计算机网络性能指标
    LabVIEW专栏九、类的应用
    线性代数学习笔记5-2：（正交的）投影、投影矩阵、A^T A、最小二乘法LS
    可视化学习：如何使用噪声生成纹理
  • 原文地址：https://blog.csdn.net/weixin_62700590/article/details/139494488