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

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

【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入口文件,并且把已经写好的注册页面归类

目录
相关文章
|
7天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
136 89
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
12天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
100 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
1天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
22 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
8天前
|
安全 网络安全 Android开发
APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
50 11
APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
|
4天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
24 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
20天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
70 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
10天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
30 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
22天前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
25 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
前端开发 物联网 Android开发
从前端的角度出发 – web 调起 APP
背景 对于APP来说,回流分享页是最好的最便宜的也是最病毒式的拉新方式。让新用户去下载APP是重要的。对老用户来说,可以直接调起APP也是提升用户体验和让用户有侵入式体验的重要手段。所以我们一起来看看有哪些方式可以唤起APP的 概念叙述 调起APP在不同平台用不同的方式,主要就分3个 * URI Scheme * universal Link * Android App Links 现在还是有很多第三方来协助你处理这个事情,通过接入他们的SDK和客户端代码来处理,但是万变不离其宗,所有的第三方也离不开这3种方式。
4514 0
|
29天前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
73 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】

热门文章

最新文章

  • 1
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    50
  • 2
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    30
  • 3
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    70
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    100
  • 5
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
    29
  • 6
    如何修复 Android 和 Windows 不支持视频编解码器的问题?
    249
  • 7
    【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    36
  • 8
    【03】优雅草央千澈详解关于APP签名以及分发-上架完整流程-第三篇安卓APP上架华为商店后面的步骤-华为应用商店相对比较麻烦一些-华为商店安卓上架
    53
  • 9
    app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
    86
  • 10
    Android与iOS生态差异深度剖析:技术架构、开发体验与市场影响####
    72