【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
章节内容【03】
章节内容【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面
开发背景
我们以vs-code开发flutter 项目来打包 apk为例，安卓apk打包流程设置图标，包名-签名-APP名-打包流程，接上一篇我们已经初步写了一个注册页面代码。
闲话不多，开源仓库地址，可以观摩已经写好的代码：
https://gitee.com/youyacao/ff-flutter
实战开始
flutter 打包项目一般要执行清理和重建项目：
运行 flutter clean
运行 flutter pub get
运行 flutter build apk
扩展知识
flutter clean：
- 这个命令用来清理Flutter项目中的构建缓存和中间文件。它会删除
build目录和其他生成的文件，从而确保项目以干净的状态开始构建。可以解决一些因缓存文件导致的问题。
flutter pub get：
- 这个命令用来下载和安装项目中
pubspec.yaml文件中列出的所有依赖库。每次你添加、删除或修改依赖库时，都需要运行此命令来确保项目依赖项是最新的。
flutter build apk：
- 这个命令用来构建Android APK文件（应用包），以便在物理设备或模拟器上安装和运行你的Flutter应用。使用
--release选项可以构建发布版本，而不加选项默认构建调试版本。
上一篇我们写到签名 这里漏了一些内容，就是签名示例文件没问题，但是详细填写 还是需要一些知识的，这里我们把补上，
storePassword=<your-store-password> keyPassword=<your-key-password> keyAlias=<your-key-alias> storeFile=<path-to-your-keystore>
上面三条内容是自行填写，分别是密码，密码，组织密码，但是最后这个store文件 是需要生成的，而且这个storeFile=<path-to-your-keystore>路径要对应，
我们打开终端 执行
keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload
这将创建一个名为upload-keystore.jks的密钥库文件，并设置有效期为10000天，执行后会提示输入相关信息，包括密码之类，完整后这里一定要对应自身的路径，这步签名不对打包的apk是会闪退的。
这里我已经生成过了，因此优雅草卓伊凡就额外在其他目录给大家生成演示个即可，
输入密钥库口令: 再次输入新口令: 您的名字与姓氏是什么? [Unknown]: dujiang 您的组织单位名称是什么? [Unknown]: youyacao 您的组织名称是什么? [Unknown]: youyacao 您所在的城市或区域名称是什么? [Unknown]: chengdu 您所在的省/市/自治区名称是什么? [Unknown]: sichuang 该单位的双字母国家/地区代码是什么? [Unknown]: 610000 CN=dujiang, OU=youyacao, O=youyacao, L=chengdu, ST=sichuang, C=610000是否正确? [否]: 是 正在为以下对象生成 2,048 位RSA密钥对和自签名证书 (SHA256withRSA) (有效期为 10,000 天): CN=dujiang, OU=youyacao, O=youyacao, L=chengdu, ST=sichuang, C=610000 输入 <upload> 的密钥口令 (如果和密钥库口令相同, 按回车): 再次输入新口令: [正在存储C:/Users/Administrator/upload-keystore.jks]
大概就是以上内容了，
运行flutter build apk打包提示，
Font asset “MaterialIcons-Regular.otf” was tree-shaken, reducing it from 1645184 to 1480 bytes (99.9% reduction). Tree-shaking can be disabled by providing the —no-tree-shake-icons flag when building your app.
这个是字体资源 MaterialIcons-Regular.otf 被树摇（tree-shaken），树摇过程大幅减少了字体文件的大小，但可能会导致某些图标无法显示。可以通过提供 —no-tree-shake-icons 标志来禁用树摇。
我们打包可以执行
flutter build apk --no-tree-shake-icons --verbose
成功打包，也尝试了 可以正常安装。
我们进行本文的第二个内容，安卓调试，之前第一篇我们运行的是浏览器调试。
我们需要下载一个插件Android iOS Emulator
打开扩展 搜索Android iOS Emulator安装，安装好后 运行Emulator
运行中 选择 Android
运行调试，我们可以看见 已经出现一个模拟器安卓机了，这样我们基本就可以实现真机调试了，机型选择方面也是很简单的，
不过我们调试的时候报错
[ERR] Failed to decode preferences in C:\Users\Administrator\AppData\Roaming\.flutter_tool_state. [ERR] You may need to reapply any previously saved configuration with the "flutter config" command.
这说明模拟器打开有点问题，
执行
adb kill-server
adb start-server
再执行
adb devices
这回正确了，但是又新报错、
[ERR] The Android emulator exited with code 1 during startup [ERR] Android emulator stderr: [ERR] Address these issues and try again. [ERR] The Android emulator exited with code 1 during startup [ERR] Android emulator stderr: [ERR] Address these issues and try again.
由于篇幅原因，我们先继续搞开发了，安卓模拟机调试这部分后面再来处理，
接下来继续，上一篇我们在注册页面上还未完成的部分，我们需要把选框改为真正的选框组件 Checkbox 组件 ，
- 将
MainApp类改为StatefulWidget：以便管理Checkbox的状态。 - 添加
_agreedToTerms状态变量：用于存储Checkbox的选中状态。 - 替换
Container为Checkbox：在Row中添加Checkbox组件，并绑定其状态。 - 更新
onChanged回调：在Checkbox的onChanged回调中更新_agreedToTerms状态。
Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Checkbox( value: _agreedToTerms, onChanged: (bool? value) { setState(() { _agreedToTerms = value ?? false; }); }, ), const SizedBox(width: 20), Text( "You agree to our Terms", style: TextStyle( color: Colors.white, fontSize: 32, fontFamily: "PingFang SC", fontWeight: FontWeight.w500, ), ), ], ),
我们发现可以点击了，最后我们发现顶部有个 debug freefirend，我们如何让他不显示呢，
要在 Flutter 应用中隐藏调试标签，可以在 MaterialApp 的初始化时设置 debugShowCheckedModeBanner 属性为 false，也就是
加入：
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, // 设置这一属性为 false title: 'freefirend', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: Text('freefirend'), ), body: Center( child: Text('freefirend'), ), ), ); } }
以下内容即可
另外 就是文字要改成英文，还有输入手机号这里得文字颜色不对，我们调整下
要将“请输入手机号”和“请输入密码”这两个 TextField 的提示文字颜色改为 Color(0xffa9a9a9)，你需要修改 InputDecoration 中的 hintStyle 属性。以下是修改后的代码：
hintStyle: TextStyle(color: Color(0xffa9a9a9)),增加这一行就行了。
Expanded( flex: 2, // 给 TextField 分配更多的空间 child: TextField( decoration: const InputDecoration( labelText: '请输入手机号', border: OutlineInputBorder(), hintStyle: TextStyle(color: Color(0xffa9a9a9)), ), keyboardType: TextInputType.phone, ), ),
接下来我们需要规划结构目录了，目前main.dart写注册肯定是不对滴，
优雅草卓伊凡整理了本项目的目录，大致如下，但是实际情况做下来会更多很多，目前我们按这个来，后续完成项目会整体整理。
my_flutter_app/
├── android/
├── ios/
├── lib/
│ ├── models/ // 数据模型
│ │ ├── user_model.dart
│ │ ├── video_model.dart
│ │ └── chat_model.dart
│ ├── view/ // 界面文件
│ │ ├── home_view.dart
│ │ ├── video/
│ │ │ ├── video_list_screen.dart
│ │ │ └── video_player_screen.dart
│ │ ├── live/
│ │ │ ├── live_stream_screen.dart
│ │ │ └── live_shopping_screen.dart
│ │ ├── chat/
│ │ │ ├── chat_list_screen.dart
│ │ │ └── chat_screen.dart
│ ├── services/ // 服务类
│ │ ├── api_service.dart
│ │ ├── video_service.dart
│ │ ├── live_service.dart
│ │ └── chat_service.dart
│ ├── providers/ // 状态管理
│ │ ├── video_provider.dart
│ │ ├── live_provider.dart
│ │ └── chat_provider.dart
│ ├── utils/ // 工具类和辅助函数
│ │ ├── constants.dart
│ │ └── helpers.dart
│ ├── widgets/ // 公共组件
│ │ ├── custom_button.dart
│ │ ├── video_thumbnail.dart
│ │ └── chat_bubble.dart
│ └── main.dart // 应用入口文件
├── test/ // 单元测试
└── pubspec.yaml // 项目依赖配置
目录结构解释：
models/：存放数据模型文件，如用户模型、视频模型、聊天模型等。screens/：存放各个功能模块的界面文件，按照功能分类整理，例如短视频、直播、直播带货和聊天模块的界面。services/：存放与后端 API 交互的服务类文件。providers/：存放状态管理相关的文件，使用 Provider 或其他状态管理工具。utils/：存放常量、辅助函数等工具类文件。widgets/：存放自定义的公共组件，供各个界面复用。main.dart：应用程序的入口文件，包含应用的初始化逻辑。
本篇结束，第五篇开始写主页，重新改写main.dart入口文件，并且把已经写好的注册页面归类
