Flutter分模块开发、模块可单独启动、包含Provider

news2024/12/24 8:08:43

前言

当前案例 Flutter SDK版本:3.13.2

目前Flutter都是在一个项目中,创建不同目录进行模块开发,我进行Android原生开发时,发现原生端,是可以将每个模块独立运行起来的,灵感来自这;

折腾了几天,终于给整出来了。

1、创建根目录

新建一个空文件夹,我这里给其命名为 flutter_module_develop

2、创建模块

就是在 flutter_module_develop 文件夹中,创建Flutter项目;

2.1、创建主模块

命名为app,我是照着Android原生的来命名的,这个命名大家自定义;

2.2、创建子模块

命名为 homeorderpersonalcommon

3.1、给每个模块创建启动文件

使用开发工具打开 flutter_module_develop 目录,我使用的是AndroidStudio,然后找到有入口函数的文件,什么是入口函数?就是这玩意,这样每个模块都可以独立启动,算是分模块开发的核心

void main() {
  runApp(...);
}

所有模块都是一样的创建流程,最后的效果。

4、建立依赖

4.1、在common模块的pubspec.yaml中添加相关依赖库

我在这里添加了provider 库;

4.2、在home、order、personal的pubspec.yaml中添加common模块

4.3、在app模块的pubspec.yaml中添加home、order、personal模块

5、Provider

common 模块中声明 状态,这样所有模块都可以找到;

import 'package:flutter/cupertino.dart';

class Counter extends ChangeNotifier {
  int count = 0;

  void compute() {
    count++;
    notifyListeners();
  }
}

6、问题

6.1、跨模块无法访问静态资源

我将 图片字体 放在 common 模块中,本以为其他模块也可以引用,事实证明不可以

因为它默认找到是启动模块的包路径,当前启动的是 app 模块,所以找不到 common 模块下的本地资源文件;

但我找到了解决方向,这些加载本地资源的Widget,很多都提供了 package 属性,遗憾的是,我没有找到正确的使用方式,如果哪位同学解决了,麻烦评论区留言,目前解决方案,就是每个模块各管各的静态资源。

7、注意事项

7.1、依赖的模块发生更改所有关联的模块,都需要重新 pub get,不然找不到更新的内容

7.2、引用依赖模块的对象时,编译器没有提示,需要手动导包 ( import 'xx/xx.dart' ) ,不过好在导包的时候有提示

7.3、Android原生的gradle需要统一版本不仅仅是Android原生,或者说所有模块原生平台的构建工具,都需要统一版本,不然可能会出问题;

7.4、Flutter项目,占电脑的磁盘空间会变大,大2.5倍,这个应该不是问题,除非是大型游戏项目,几十G,就算翻倍,大不了加硬盘;

总结

项目依赖图

效果图

打包体积

新建的单一Flutter项目,打包体积为 17.4MB,而案例中包含五个模块的Flutter项目,打包体积为 17.9MB,体积还算合理

官方

我已经将这种方式给官方过了目,官方回复效率也非常高,后期如果有新进展,会时时更新,比如那个跨模块无法访问静态资源的问题。

Flutter is developed in modules, and each module can run independently · Issue #147847 · flutter/flutter · GitHub

项目地址

GitHub - LanSeLianMa/flutter_module_develop

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1648653.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IDEA中git的常用操作(保姆级教学)

IDEA中git的常用操作(保姆级教学) 以下是git的工作原理,觉得繁琐的可以跳过不看 Workspace:工作区 (平时存放代码的地方) Index / Stage:暂存区(用于临时存放存放你的改动,事实上就是一个文件&…

怎么ai解答问题?这三个方法都可以

怎么ai解答问题?在数字化飞速发展的今天,人工智能(AI)技术已经渗透到我们生活的方方面面,尤其是在解答问题方面,AI展现出了令人瞩目的能力。那么,哪些软件可以利用AI技术解答问题呢?…

人脸美妆SDK解决方案,自研人脸美妆方案

美妆已经成为视频内容中不可或缺的一部分。从拍摄到编辑,再到直播,美妆效果都能为视频内容增添魅力,吸引更多观众的眼球。为了满足企业对于高质量美妆效果的需求,美摄科技凭借多年的技术积累和创新精神,推出了全新的人…

18、ESP32 ESP-NOW 点对点通信

ESP-NOW 是乐鑫自主研发的无连接通信协议,具有短数据包传输功能。该协议使多个设备能够以简单的方式相互通信。 ESP-NOW 功能 ESP-NOW 支持以下功能: 加密和未加密的单播通信;混合加密和未加密的对等设备;最多可携带 250 字节 的有效载荷;发送回调功能…

Rust 解决循环引用

导航 循环引用一、现象二、解决 循环引用 循环引用出现的一个场景就是你指向我,我指向你,导致程序崩溃 解决方式可以通过弱指针,而Rust中的弱指针就是Weak 在Rc中,可以实现,对一个变量,持有多个不可变引…

QSPI的使用

Quad SPI接口(QSPI)是一种同步串行数据链路,在主模式下提供与外部设备的通信。它类似于SPI协议,只是它有额外的数据线。 普通SPI有四条通信线路:芯片选择、时钟、MOSI和MISO。对于QSPI,可提供额外的数据线。因此,命令/数据/地址是根据所选模式通过单、四或双IO发送的。由…

Typescript基础语法(四)

模块化 模块化是指将复杂的程序拆解为多个独⽴的⽂件单元,每个⽂件被称为⼀个模块。在 TypeScript 中,默认情况下,每个模块都拥有⾃⼰的作⽤域,这意味着在⼀个模块中声明的任何内容(如变量、函数、类等)在该…

Unity技术学习:渲染大量物体的解决方案,外加RenderMesh、RenderMeshInstanced、RenderMeshIndirect的简单使用

叠甲:本人比较菜,如果哪里不对或者有认知不到的地方,欢迎锐评(不玻璃心)! 导师留了个任务,渲染大量的、移动的物体。 寻找解决方案: 当时找了几个解决方案: 静态批处…

C++常用库函数——strcmp、strchr

1、strcmp:比较两个字符串的值是否相等 例如 char a1[6] "AbDeG",*s1 a1;char a2[6] "AbdEg",* s2 a2;s1 2;s2 2;printf("%d \n", strcmp(s1, s2));return(0); s1指向a1,s2指向a2,strcmp表示比较s1和s…

vue3+vite+js 实现移动端,PC端响应式布局

目前使用的是vue3vite,没有使用ts 纯移动端|PC端 这种适用于只适用一个端的情况 方法:amfe-flexible postcss-pxtorem相结合 ① 执行以下两个命令 npm i -S amfe-flexible npm install postcss-pxtorem --save-dev② main.js文件引用 import amfe-f…

[一本Java+一本Java]5月7日简历指导直播

一、直播预告 每周二、四、六16:30简历指导直播,前美团项目负责人、校招VIP CEO-大拿老师在线讲简历优化 二、简历内容 三、简历核心问题 【简历1】一本- Java 1 虽然项目名称有一定的包装,两个项目的内容都是一眼能看出来的烂大街的项目&#xff0c…

游戏辅助 -- 实战找人物对象基址

本节课在线学习视频: https://pan.quark.cn/s/3e83f4568031 一、打开CE工具,加载游戏进程 二、搜索人物血量144,选择首次扫描 三、进入游戏,让人物血量发生变化,搜索减少的数值 四、发现绿色的数值,一般绿…

uniapp日期区间选择器

uniapp日期区间选择器 在 uniapp 中创建一个简单的自定义日期范围的日期区间选择器: - 限制有效日期范围开始日期为 2024-01-01,结束日期为当日; - 默认日期区间为当日向前计算的7日区间; - 选择开始时间后,判断不可大…

预定类小程序源码搭建包含各行业+源码开源可二开+详细图文搭建部署教程

在数字化浪潮席卷的今天,各行各业都急需找到与顾客连接的新方式。为了满足这一需求,很多店铺和企业都推出了预定类小程序,分享一款开源版预订类小程序源码,一站式解决方案,覆盖餐饮、旅游、美容、医疗、教育等多个行业…

vue-img-cutter 图片裁剪详解

前言&#xff1a;vue-img-cutter 文档&#xff0c;本文档主要讲解插件在 vue3 中使用。 一&#xff1a;安装依赖 npm install vue-img-cutter # or yarn add vue-img-cutter # or pnpm add vue-img-cutter 二&#xff1a;构建 components/ImgCutter.vue 组件 <script se…

罗德与施瓦茨 SMC100A信号发生器9kHz至3.2 GHz

罗德与施瓦茨 SMC100A信号发生器&#xff0c;9 kHz - 3.2 GHz 罗德与施瓦茨 SMC100A 以极具吸引力的价格提供出色的信号质量。它覆盖的频率范围为 9 kHz 至 1.1 GHz 或 3.2 GHz。输出功率为典型值。> 17 dBm。所有重要功能&#xff08;AM/FM/φM/脉冲调制&#xff09;均已集…

视频素材哪个app好?8个视频素材库免费使用

视频内容已成为现代传播中不可或缺的一部分&#xff0c;具备卓越的视频素材对于提升任何媒体作品的质量和吸引力尤为关键。这里列举的一系列精挑细选的全球视频素材网站&#xff0c;旨在为您的商业广告、社交媒体更新或任何其他类型的视觉项目提供最佳支持。 1. 蛙学府&#x…

力扣顺序表思路讲解

本篇文章&#xff0c;我给大家带来的是顺序表题目讲解&#xff0c;希望大家看完有所收获&#xff0c;废话不多说&#xff0c;我们现在开始 审题 大白话&#xff1a;给了一个数组和一个目标值。如果数组里的两个元素相加 目标值&#xff0c;则返回这两个元素的下标。那么大家需…

Xinstall:专业的APP全渠道统计服务商,助力广告数据分析

在移动互联网时代&#xff0c;APP已成为企业营销的重要阵地。然而&#xff0c;随着竞争加剧&#xff0c;广告主们面临着如何精准衡量广告投放效果、优化投放策略等挑战。这时&#xff0c;专业的APP全渠道统计服务商——Xinstall便成为了广告主们的得力助手。 Xinstall作为国内…

EtherCAT开发_4_分布时钟知识点摘抄笔记1

分布时钟 (DC&#xff0c;Distributed Cl ock) 可以使所有EtherCAT设备使用相同的系统时间&#xff0c;从而控制各设备任务的同步执行。从站设备可以根据同步的系统时间产生同步信号&#xff0c;用于中断控制或触发数字量输入输出。支持分布式时钟的从站称为 DC 从站。分布时钟…