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.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.3 导入图片、图标 Svg导入图片 png 图标 svg，实现步骤： 第 1 步：转换 3.0x 图片到 2.0x 1.0x复制 png 到 assets/images/3.0x 目录 assets目录点击右键 “Assets: Images x1 x2 Generate” 支持的图片格式 jpeg jpg png 成功后会多出 files.txt 2.0x 1.0x 的文件 第 2 步：保存图片索引打开 files.txt 1234567891011static const defaultPng = 'assets/images/default.png';static const orderConfirmedPng = 'assets/images/order-confirmed.png';static const pMastercardPng = 'assets/images/p-mastercard.png';static const pCashPng = 'assets/images/p-ca ...

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.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 ...

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.9 视图层打薄【重要】方案 使用 extension 扩展方式简化代码 抽取组件，提高复用率 基础组件、业务组件 样式全局管理 字体、颜色、间距、圆角 assets 资源索引 图片、文件、图标 svg 原来的代码 lib/pages/login.dart 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551 ...