做博物馆网站最重要性,wordpress美图模板,网站内容通过服务器会不会被更改,在哪找人做网站目录
1. Splash 布局#xff08;第一页#xff09;
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 图片导入项…目录
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 总结 博主wxyuanlai45_csdn 博主qq2777137742 后期会创建粉丝群为同学们提供分享交流平台以及提供官方发送的福利奖品~ 1. Splash 布局第一页
1.1 目标
查看蓝湖标注初始项目创建 splash 界面
github 目标图片在里面
https://github.com/ducafecat/flutter_quickstart_learn
1.2 当前效果图 1.3 创建 Splash 界面
lib/pages/splash.dart
import package:flutter/material.dart;import ../common/index.dart;class SplashPage extends StatelessWidget {const SplashPage({Key? key}) : super(key: key);// 主视图Widget _buildView(BuildContext context) {return Text(splash);}overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: _buildView(context)),);}
}
1.4 设置 MaterialApp
lib/main.dart
import package:flutter/material.dart;import pages/splash.dart;void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);overrideWidget build(BuildContext context) {return MaterialApp(title: Flutter Quick Start,// 首页home: const SplashPage(),// 关闭 debug 标签debugShowCheckedModeBanner: false,);}
}
1.5 设置 Splash 背景色
lib/common/app_colors.dart
import package:flutter/material.dart;/// 颜色配置
class AppColors {/// splash 背景色static const Color backgroundSplash Color(0xff0274bc);
}
lib/pages/splash.dart
import ../common/index.dart;...overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: AppColors.backgroundSplash, // 背景色body: _buildView(context),);}
1.6 布局 Splash 界面
lib/pages/splash.dart // 主视图Widget _buildView(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [// 图标Container(color: Colors.white,width: 120,height: 120,),// 标题const Text(Online Market),// 倒计时const Text(10),],);}
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
flutter:...assets:- assets/images/
2.5 编写 assets 索引
编写 lib/common/assets.dart 将 assets/images/files.txt 内容复制进去这个文件是插件生成的防止文件太多手写出错
/// 图片资源
class AssetsImages {static const logoPng assets/images/logo.png;
}
2.6 编写标志 Logo
lib/pages/splash.dart // 图标Widget _buildLogo() {return Stack(alignment: Alignment.center,children: [// 底部Container(width: 120,height: 120,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(120 / 2),),),// 图标Image.asset(AssetsImages.logoPng,width: 84,height: 80,),],);} // 主视图Widget _buildView(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [// 图标_buildLogo(),// 标题const Text(Online Market),// 倒计时const Text(10),],);}
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 fonts:- family: Poppinsfonts:- asset: assets/fonts/Poppins-Light.ttfweight: 300- asset: assets/fonts/Poppins-Regular.ttfweight: 400- asset: assets/fonts/Poppins-Medium.ttfweight: 500- asset: assets/fonts/Poppins-Bold.ttfweight: 700
3.5 编写 TextStyle
lib/pages/splash.dart // 标题const Text(Online Market,style: TextStyle(fontSize: 19,fontFamily: Poppins,fontWeight: FontWeight.bold,color: Colors.white,height: 22 / 19,),),
fontFamily 中写入字体名称 Poppins
height 文本跨度的行高将为 [fontSize] 的倍数并且正好是 fontSize *height 逻辑像素 高。换行的时候才有意义 3.6 加入间距 标题和图标间距 24和计数器 27
lib/pages/splash.dart // 主视图Widget _buildView(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [// 图标_buildLogo(),const SizedBox(height: 24),// 标题const Text(Online Market,style: TextStyle(fontSize: 19,fontFamily: Poppins,fontWeight: FontWeight.bold,color: Colors.white,height: 22 / 19,),),const SizedBox(height: 27),// 倒计时const Text(10,style: TextStyle(fontSize: 19,fontFamily: Poppins,fontWeight: FontWeight.bold,color: Colors.white,height: 22 / 19,),),],);}
3.7 总结
导入字体 pubspec 中详细明确 字体名称、 字体文件、字体weight用不到的字体文件不用方式 assets/fonts 目录中设置文字样式 fontSize、fontFamily、fontWeight、color具体值的间距用 SizedBox 来配置
4. Splash 倒计时
4.1 目标
使用有状态组件倒计时更新组件
4.2 当前效果图 4.3 改成有状态组件
lib/pages/splash.dart
import package:flutter/foundation.dart;
import package:flutter/material.dart;import ../common/index.dart;class SplashPage extends StatefulWidget {const SplashPage({Key? key}) : super(key: key);overrideStateSplashPage createState() _SplashPageState();
}class _SplashPageState extends StateSplashPage {// 图标Widget _buildLogo() {return Stack(alignment: Alignment.center,children: [// 底部Container(width: 120,height: 120,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(120 / 2),),),// 图标Image.asset(AssetsImages.logoPng,width: 84,height: 80,),],);}// 主视图Widget _buildView(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [// 图标_buildLogo(),const SizedBox(height: 24),// 标题const Text(Online Market,style: TextStyle(fontSize: 19,fontFamily: Poppins,fontWeight: FontWeight.bold,color: Colors.white,height: 22 / 19,),),const SizedBox(height: 27),// 倒计时Text(0,style: const TextStyle(fontSize: 19,fontFamily: Poppins,fontWeight: FontWeight.bold,color: Colors.white,height: 22 / 19,),),],);}overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: AppColors.backgroundSplash,body: Center(child: _buildView(context)),);}
}
4.4 实现倒计时
lib/pages/splash.dart
计数 num // 计数 numfinal duration 10;int number 0;
倒计时函数 // 倒计时Futurevoid _countdown() async {number duration;for (int i 0; i duration; i) {await Future.delayed(const Duration(seconds: 1), () {if(mounted ture) {setState(() {number--;});}});// 倒计时结束, 进入 welcomeif (number 0) {if (kDebugMode) {print(倒计时结束);}}}}
注意 await async 异步函数的语法
初始执行 overridevoid initState() {super.initState();_countdown();}
打印显示 // 主视图Widget _buildView(BuildContext context) {...// 倒计时Text(number 0 ? $number : done,style: const TextStyle(fontSize: 19,fontFamily: Poppins,fontWeight: FontWeight.bold,color: Colors.white,height: 22 / 19,),),
4.5 重构文字显示函数
macos 下是 option enter , 也可以在组件上 右键 - 重构... 文字显示函数 // 文字显示Text _buildText(String text) {return Text(text,style: const TextStyle(fontSize: 19,fontFamily: Poppins,fontWeight: FontWeight.bold,color: Colors.white,height: 22 / 19,),);}
主视图代码 // 主视图Widget _buildView(BuildContext context) {return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// logo_buildLogo(),const SizedBox(height: 24),// 标题_buildText(Online Market),const SizedBox(height: 27),// 计数器_buildText(10),// end],),);}
4.6 完整代码
lib/pages/splash.dart
import package:flutter/material.dart;import ../common/app_colors.dart;
import ../common/assets.dart;class SplashPage extends StatefulWidget {const SplashPage({Key? key}) : super(key: key);overrideStateSplashPage createState() _SplashPageState();
}class _SplashPageState extends StateSplashPage {// 计数变量final duration 3;int number 0;// 倒计时函数Futurevoid _countdown() async {number duration;for (var i 0; i duration; i) {await Future.delayed(const Duration(seconds: 1), () {if (mounted true) {setState(() {number--;});}});if (number 0) {print(倒计时结束);}}}overridevoid initState() {super.initState();_countdown();}// logoWidget _buildLogo() {return Stack(alignment: Alignment.center,children: [// 底部Container(width: 120,height: 120,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(120 / 2),),),// 图片Image.asset(AssetsImages.logoPng,width: 84,height: 80,),],);}// 文字显示Text _buildText(String text) {return Text(text,style: const TextStyle(fontSize: 19,fontFamily: Poppins,fontWeight: FontWeight.bold,color: Colors.white,height: 22 / 19,),);}// 主视图Widget _buildView(BuildContext context) {return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// logo_buildLogo(),const SizedBox(height: 24),// 标题_buildText(Online Market),const SizedBox(height: 27),// 计数器_buildText(number 0 ? $number : done),// end],),);}overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: AppColors.backgroundSplash,body: _buildView(context),);}
}
4.7 总结
无状态组件重构成有状态组件使用 Future.delayed 方式实现倒计时使用 三目运算符 控制显示
1. Welcome 图片尺寸适应第二页
1.1 目标
全局配置样式、字体图片适配高宽布局代码练习
1.2 当前效果图 1.3 设置全局字体
lib/main.dart
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);overrideWidget build(BuildContext context) {return MaterialApp(...// 样式theme: ThemeData(primarySwatch: Colors.orange,fontFamily: Poppins, // 字体),
字体全局放在 theme fontFamily 属性中
1.4 界面布局、标题
lib/pages/welcome.dart
import package:flutter/material.dart;/// 欢迎页面
class WelcomePage extends StatelessWidget {const WelcomePage({Key? key}) : super(key: key);// 主视图Widget _buildView() {return Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 标题const Padding(padding: EdgeInsets.symmetric(horizontal: 30),child: Text(Browse Order All Products at Any Time,textAlign: TextAlign.center,style: TextStyle(fontSize: 20,fontFamily: Poppins,fontWeight: FontWeight.bold,color: Color(0xff2B2A2A),height: 23 / 20,),),),// 图Container(),// 底部按钮Container(),],);}overrideWidget build(BuildContext context) {return Scaffold(body: _buildView(),);}
}
标题代码抽取函数整理代码 // 标题Padding _buildTitle() {return const Padding(padding: EdgeInsets.symmetric(horizontal: 30),child: Text(Browse Order All Products at Any Time,textAlign: TextAlign.center,style: TextStyle(fontSize: 20,fontFamily: Poppins,fontWeight: FontWeight.bold,color: Color(0xff2B2A2A),height: 23 / 20,),),);} // 主视图Widget _buildView() {return Column(children: [const SizedBox(height: 100),// 标题_buildTitle(),... 1.5 图片尺寸适应
从蓝湖下载图片导入项目这里不再重复叙述
lib/pages/welcome.dart // 图片Image _buildImage() {return Image.asset(AssetsImages.welcomePng,height: 300,width: double.infinity,fit: BoxFit.none,//fit:BoxFit.fitWidth);} // 主视图Widget _buildView() {return Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 标题_buildTitle(),const SizedBox(height: 70),// 图_buildImage(),// 底部按钮_buildBtns(),],);}
1.6 总结
通过 ThemeData.fontFamily 设置全局字体padding: EdgeInsets.symmetric(horizontal: 30) 水平 Padding 距离图片组件 Image.fit 设置宽高适配布局第一规则 从上往下
2. Welcome 导航切换
2.1 目标
布局规则 “从上往下、从左往右”全局按钮颜色样式布局训练 横向、纵向 混合
2.2 当前效果图 2.3 底部按钮
lib/pages/welcome.dart // goto 登录页面void onLogin(BuildContext context) {}// 底部按钮Padding _buildBtns(BuildContext context) {return Padding(padding: const EdgeInsets.symmetric(horizontal: 24),child: Row(children: [// skipTextButton(onPressed: () onLogin(context),child: const Text(Skip,style: TextStyle(fontSize: 15,fontWeight: FontWeight.w300,color: Color(0xff2B2A2A),),),),// 撑开const Expanded(child: SizedBox(),),// Get StartedContainer(height: 42,width: 140,clipBehavior: Clip.antiAlias,decoration: const BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(18),),),child: ElevatedButton(onPressed: () onLogin(context),style: ButtonStyle(elevation: MaterialStateProperty.all(0),minimumSize: MaterialStateProperty.all(Size.zero),),child: const Text(Get Started,style: TextStyle(fontSize: 16,fontWeight: FontWeight.w300,color: Colors.white,),),),),],),);} // 主视图Widget _buildView(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 标题_buildTitle(),const SizedBox(height: 70),// 图_buildImage(),const SizedBox(height: 70),// 底部按钮_buildBtns(context),],);}
2.4 导航切换
splash 倒计时结束进入 welcome 界面 // 倒计时Futurevoid _countdown() async {number duration;for (int i 0; i duration; i) {...// 倒计时结束, 进入 welcomeif (number 0) {Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) const WelcomePage()));}}}
2.5 总结
设计稿布局分析 “从上往下、从左往右”
先写布局代码结构
注意命名 _buildXXX 开头都是私有布局函数
导航 Navigator.pushReplacement 进入新界面并替换当前
1. login 布局第三页
1.1 目标
看标注布局界面千锤百炼就会了 1.2 布局
lib/pages/login.dart // 登录表单Widget _buildForm() {return Container();} // 主视图Widget _buildView() {return Container(padding: const EdgeInsets.symmetric(horizontal: 15),color: AppColors.backgroundSplash,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 图标Image.asset(AssetsImages.logoPng,width: 60,),const SizedBox(height: 20),// 主标const Text(Let’s Sign You In,style: TextStyle(fontSize: 20,color: Colors.white,fontWeight: FontWeight.bold,),),const SizedBox(height: 10),// 子标const Text(Welcome back, you’ve been missed!,style: TextStyle(fontSize: 13,color: Colors.white,fontWeight: FontWeight.w300,),),const SizedBox(height: 50),// 表单_buildForm(),],),);} overrideWidget build(BuildContext context) {return Scaffold(body: _buildView(),);}
1.3 总结
记住布局规则 “从上往下、从左往右”用函数拆分视图结构
2. login 登录表单
2.1 目标
编写表单有效性检查
2.2 当前效果图 2.3 登录表单
lib/pages/login.dart // 账号输入是否有效bool isUserNameValid false; // 登录表单Widget _buildForm() {return Container(padding: const EdgeInsets.fromLTRB(20, 50, 20, 20),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(35),),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [// Username or E-Mailconst Text(Username or E-Mail,style: TextStyle(fontSize: 15,color: Color(0xff838383),fontWeight: FontWeight.w300,),),TextField(onChanged: (value) {bool valid false;if (value.length 6) {valid true;} else {valid false;}setState(() {isUserNameValid valid;});},decoration: InputDecoration(hintText: ,// labelText: Username or E-Mail,// labelStyle: const TextStyle(// fontSize: 15,// color: Color(0xff838383),// fontWeight: FontWeight.w300,// ),prefixIcon: Image.asset(AssetsImages.iconUserPng,width: 23,height: 23,),suffixIcon: isUserNameValid true? const Icon(Icons.done,color: Colors.green,): null,),),// 间距const SizedBox(height: 35),// Passwordconst Text(Password,style: TextStyle(fontSize: 15,color: Color(0xff838383),fontWeight: FontWeight.w300,),),TextField(obscureText: true,decoration: InputDecoration(hintText: 6 digits,// labelText: Password,// labelStyle: const TextStyle(// fontSize: 15,// color: Color(0xff838383),// fontWeight: FontWeight.w300,// ),prefixIcon: Image.asset(AssetsImages.iconLockPng,width: 23,height: 23,),suffixIcon: TextButton(onPressed: () {},child: const Text(Forget?,style: TextStyle(fontSize: 15,color: Color(0xff0274bc),fontWeight: FontWeight.w500,),),),),),// 间距const SizedBox(height: 30),// Sign In// 间距const SizedBox(height: 16),// Don’t have an account? Sign UpRow(mainAxisAlignment: MainAxisAlignment.center,children: [// 文字const Text(Don’t have an account? ,style: TextStyle(fontSize: 15,color: Color(0xff171717),fontWeight: FontWeight.w300,),),// 按钮TextButton(onPressed: () {},child: const Text(Sign Up,style: TextStyle(fontSize: 15,color: Color(0xff0274bc),fontWeight: FontWeight.bold,),),),],),],),);}
2.4 总结
通过 TextField.decoration 属性进行装饰TextField.obscureText 开启密码
3. login 按钮抽取
3.1 目标
抽取公共按钮组件修改成纯 ElevatedButton 按钮
3.2 当前效果图 3.3 按钮组件抽取
lib/common/widgets.dart
import package:flutter/material.dart;/// 按钮组件
class ButtonWidget extends StatelessWidget {const ButtonWidget({Key? key,this.height,this.widget,this.radius,this.onPressed,this.text,}) : super(key: key);/// 文字final String? text;/// 高度final double? height;/// 宽度final double? widget;/// 圆角final double? radius;/// 点击事件final void Function()? onPressed;overrideWidget build(BuildContext context) {return ElevatedButton(onPressed: onPressed,style: ButtonStyle(// 阴影高度elevation: MaterialStateProperty.all(0),// 最小尺寸minimumSize: MaterialStateProperty.all(Size(widget ?? double.infinity, height ?? double.infinity)),// 形状 圆角shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(radius ?? 18),),),),),child: Text(// 文字text ?? ,// 文字样式style: const TextStyle(fontSize: 16,fontWeight: FontWeight.w300,color: Colors.white,),),);}
}
3.4 登录按钮
lib/pages/login.dart // 登录表单Widget _buildForm() {...// Sign InButtonWidget(text: Sign In,onPressed: () {},height: 60,widget: double.infinity,radius: 18,),
3.5 欢迎按钮
lib/pages/welcome.dart // 底部按钮Padding _buildBtns(BuildContext context) {...// Get StartedButtonWidget(text: Get Started,height: 42,widget: 140,radius: 32,onPressed: () onLogin(context),), // goto 登录页面void onLogin(BuildContext context) {Navigator.push(context,MaterialPageRoute(builder: (context) const LoginPage()),);}
3.6 总结
公共组件类抽取方法ElevatedButton 组件属性配置 创作不易希望读者三连支持 赠人玫瑰手有余香
