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 ...
3.2 文字组件封装文本组件封装，实现步骤：
第 1 步：规划组件定义设计稿样式标准
根据设计稿，定义如下
name
fontSize
fontWeight
title1
24
bold
title2
20
500
title3
15
500
body1
15
500
body2
12
400
body3
9
300
一共 6 种情况，如果需要可以再加，有这个规律，title 主要用在标题偏重，body 用在内容区。
第 2 步：TextWidget 封装lib/common/widgets/text.dart
参数定义123456789101112131415161718192021222324252627282930import 'package:flutter/material.dart';/// 文字组件class TextWidget extends StatelessWidget { /// 文字字符串 final String text; /// 样式 final ...
3.1 导入字体自定义字体，实现步骤：
第 1 步：下载字体文件 ttf otf一般可以按需下载 google 字体
https://fonts.google.com/
第 2 步：复制文件到你的 fonts 目录
不要所有 ttf 文件全部放入，这会 app 打包文件很大
将设计稿中出现的字体放入 assets/fonts
第 3 步：配置 yamlpubspec.yaml
1234567891011fonts: - family: Montserrat fonts: - asset: assets/fonts/Montserrat/Montserrat-Light.ttf weight: 300 - asset: assets/fonts/Montserrat/Montserrat-Regular.ttf weight: 400 - asset: assets/fonts/Montserrat/Montserrat-Medium.ttf weight: 500 - asse ...
3.5 图片组件封装实现步骤：
第 1 步：安装插件 extended_image1flutter pub add extended_image
第 2 步：ImageWidget 封装定义如下
name
说明
参数
url
图片来自于网络
url 图片网址
asset
图片来自于 asset
assetName 文件路径
file
图片来自于本地文件
file path 绝对路径
图片可以来自 url asset
lib/common/widgets/image.dart
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131 ...
3.6 按钮组件封装实现步骤：
第 1 步：组件定义设计稿参考
定义如下
name
说明
primary
主按钮
secondary
次按钮
text
文字按钮
icon
图标按钮
textFilled
文字/填充
textRoundFilled
文字/填充/圆形
iconTextUpDown
图标/文字/上下
iconTextOutlined
图标/文字/边框
iconTextUpDownOutlined
图标/文字/上下/边框
textIcon
文字/图标
第 2 步：ButtonWidget 封装lib/common/widgets/button.dart
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 ...
3.7 输入组件封装实现步骤：
第 1 步：规划组件功能
依据设计稿，我们定义如下
类型
说明
text
文本
textBorder
文本/边框
textFilled
文本/填充/边框
iconTextFilled
图标/文本/填充/边框
suffixTextFilled
后缀图标/文本/填充/边框
search
搜索
第 2 步：编写文本输入组件lib/common/widgets/input.dart
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 ...
3.8 生成接口文档实现步骤：
注意导出的文档注释用 ///
第 1 步：配置 dartdoc_options.yamldartdoc_options.yaml
12dartdoc: nodoc: ["lib/pages/**/*.dart"]
这里排除了 pages 目录，我们只要 common 生成定义文件就行
第 2 步：生成文档执行命令，安装 dartdoc
1dart pub global activate dartdoc
执行命令，生成文档到 doc/api 目录
1dart pub global run dartdoc
生成成功
最后：启动一个 http 服务查看执行命令，安装 dhttpd
1dart pub global activate dhttpd
执行命令，运行 dhttpd
1dhttpd --path doc/api
提交代码到 git
3.4 图标组件封装图标组件封装，实现步骤：
第 1 步：安装依赖包 flutter_svg badges12flutter pub add flutter_svgflutter pub add badges
最近的几个项目都在用 svg 图标了，这种图标颜色更丰富些，你可以传统 iconData 加 svg 组合在项目中使用
第 2 步：IconWidget 封装定义如下
name
说明
参数
icon
Icons 图标
iconData 图标数据
svg
svg 文件路径
assetName svg 文件
image
asset 图片路径
assetName 图片文件
url
url 网址
来自网络图标
lib/common/widgets/icon.dart
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 ...
