【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项

【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 组件 ，

1. 将 MainApp 类改为 StatefulWidget：以便管理 Checkbox 的状态。
2. 添加 _agreedToTerms 状态变量：用于存储 Checkbox 的选中状态。
3. 替换 Container 为 Checkbox：在 Row 中添加 Checkbox 组件，并绑定其状态。
4. 更新 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入口文件，并且把已经写好的注册页面归类