4.3 native 启动图实现步骤：
flutter 引擎启动会有一点延迟，这时候会显示白屏，我们要做一个设备的启动图来优化下体验。
第 1 步：安装依赖包 flutter_native_splash1flutter pub add flutter_native_splash
第 2 步：配置 yamlpubspec.yaml
123flutter_native_splash: color: '#ffffff' image: 'assets/icons/launcher_android.png'
color 启动图背景色，这里我设置白色 #ffffffimage 启动图，可以放你的 logo，这张图背景透明
第 2 步：运行创建命令1flutter pub run flutter_native_splash:create
这将会生成各个平台的 splash ui 配置代码
第 4 步：启动后清除不用的资源lib/global.dart
1234567class Global { static Futu ...
20.1 修改我的信息页面
实现步骤：
第 1 步：i18nlib/common/i18n/locale_keys.dart
1234567891011121314 // 拍照、相册 static const pickerTakeCamera = 'picker_take_camera'; static const pickerSelectAlbum = 'picker_select_album';// 个人信息修改 static const profileEditTitle = "profile_edit_title"; static const profileEditMyPhoto = "profile_edit_my_photo"; static const profileEditFirstName = "profile_edit_first_name"; static const profileEditLastName = "profil ...
20.2 设备动态权限查询
实现步骤：
第 1 步：安装插件 permission_handlerpubspec.yaml
123dependencies: # permission 权限 permission_handler: 9.2.0
第 2 步：iosios/Podfile
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970...post_install do |installer| installer.pods_project.targets.each do |target| flutter_additional_ios_build_settings(target) ######################################################################### ## permi ...
20.3 相册、拍摄头像
实现步骤：
第 1 步：拍照 相册 插件
pubspec.yaml
1234dependencies: # 媒体选择 wechat_assets_picker: 7.2.0 wechat_camera_picker: 3.1.0
Android 配置
android/app/src/main/AndroidManifest.xml
123<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-permission android:name="android.permission.ACCESS_MEDIA_LOCATION"/>
如果你的目标 SDK 版本大于 ...
20.4 名称、邮件、密码 保存
实现步骤：
第 1 步：api 接口put /users/me
lib/common/api/user.dart
123456789101112/// 保存用户 first name 、 last name 、 emailstatic Future<UserProfileModel> saveBaseInfo(UserProfileModel req) async { var res = await WPHttpService.to.put( '/users/me', data: { "first_name": req.firstName, "last_name": req.lastName, "email": req.email, }, ); return UserProfileModel.fromJson(res.dat ...
5.1 WelcomeSlider 封装实现步骤：
第 1 步：安装插件 carousel_slider1flutter pub add carousel_slider
第 2 步：i18n 配置lib/common/i18n/locale_keys.dart
12345678910// 欢迎页static const welcomeOneTitle = 'welcome_one_title';static const welcomeOneDesc = 'welcome_one_desc';static const welcomeTwoTitle = 'welcome_two_title';static const welcomeTwoDesc = 'welcome_two_desc';static const welcomeThreeTitle = 'welcome_three_title';static const welcomeThreeDesc = ...
5.2 SliderIndicatorWidget 封装
实现步骤：
第 1 步：SliderIndicatorWidget 类lib/common/components/slider_indicator.dart
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758import 'package:flutter/material.dart';import 'package:flutter_woo_commerce_getx_learn/common/index.dart';/// slider indicator 指示器class SliderIndicatorWidget extends StatelessWidget { /// 个数 final int length; /// 当前位置 final int currentI ...
5.3 Skip、Next、Start 按钮联动
实现步骤：
第 1 步：控制器lib/pages/system/welcome/controller.dart
123456789101112131415161718192021 List<WelcomeModel>? items; // 滚动集合 int currentIndex = 0; // 当前项 bool isShowStart = false; // 是否显示 Start CarouselController carouselController = CarouselController(); // slider 控制器// 当前位置发生变化 void onPageChanged(int index) { currentIndex = index; isShowStart = currentIndex == 2; update(['slider', 'bar']); }// 去首页 void onTo ...
6.1 TextFormWidget 组件封装
预备知识FormForm继承自StatefulWidget对象，它对应的状态类为FormState。
Form类的定义：
123456789101112131415class Form extends StatefulWidget { final Widget child; /// 决定Form所在的路由是否可以直接返回（如点击返回按钮），该回调返回一个Future对象， /// 如果 Future 的最终结果是false，则当前路由不会返回； /// 如果为true，则会返回到上一个路由。此属性通常用于拦截返回按钮。 final WillPopCallback? onWillPop; /// Form的任意一个子FormField内容发生变化时会触发此回调。 final VoidCallback? onChanged; /// 是否自动校验输入内容；当为true时，每一个子 FormField 内容发生变化时都会自动校验合法性， /// 并直接显示错误信息。否则，需要通过调用FormState.valida ...
5.4 仅首次显示欢迎实现步骤：
APP 每次打开都会先到 Splash 界面
首次打开先去 Welcome 界面
以后直接去 Main 界面
第 1 步：定义常量lib/common/values/constants.dart
1static const storageFirstOpen = 'first_open'; // 首次打开
第 2 步：ConfigService 配置lib/common/services/config.dart
1234567// 是否首次打开bool get isFirstOpen => Storage().getBool(Constants.storageFirstOpen);// 标记已打开appvoid setAlreadyOpen() { Storage().setBool(Constants.storageFirstOpen, true);}
第 3 步：控制器lib/pages/system/w ...
