Flutter 项目架构技术指南

Flutter 项目架构技术指南

视频

https://www.bilibili.com/video/BV1rx4y127kN/

前言

原文 https://ducafecat.com/blog/flutter-clean-architecture-guide

探讨Flutter项目代码组织架构的关键方面和建议。了解设计原则SOLID、Clean Architecture，以及架构模式MVC、MVP、MVVM，如何有机结合使用，打造优秀的应用架构。

参考

https://www.freecodecamp.org/news/solid-principles-explained-in-plain-english/

https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html

https://developer.mozilla.org/en-US/docs/Glossary/MVC

https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter

https://zh.wikipedia.org/zh-hant/MVVM

SOLID 原则

SOLID 原则

SOLID（单一功能、开闭原则、里氏替换、接口隔离以及依赖反转）是由罗伯特·C·马丁在21世纪早期引入，指代了面向对象编程和面向对象设计的五个基本原则。

在 Flutter 中遵循 SOLID 设计原则具有重要性，因为这些原则有助于提高代码质量、可维护性和可扩展性，同时降低代码的复杂度和耦合度。

  1. 单一职责原则 (Single Responsibility Principle)：

    每个类应该只有一个责任。在 Flutter 中，您可以将不同功能拆分为不同的小部件(widget)，每个小部件负责特定的 UI 展示或交互逻辑。

    // 单一职责原则示例：一个负责显示用户信息的小部件

class UserInfoWidget extends StatelessWidget {
  final User user;

  UserInfoWidget(this.user);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Name: ${user.name}'),
        Text('Age: ${user.age}'),
      ],
    );
  }
}

  2. 开闭原则 (Open/Closed Principle)：

    软件实体应该对扩展开放，对修改关闭。在 Flutter 中，您可以通过使用组合、继承和多态来实现这一原则。例如，通过创建可重用的小部件并根据需要进行扩展，而不是直接修改现有代码。

    // 开闭原则示例：通过继承实现可扩展的主题切换功能

abstract class Theme {
  ThemeData getThemeData();
}

class LightTheme extends Theme {
  @override
  ThemeData getThemeData() {
    return ThemeData.light();
  }
}

class DarkTheme extends Theme {
  @override
  ThemeData getThemeData() {
    return ThemeData.dark();
  }
}

  3. 里氏替换原则 (Liskov Substitution Principle)：

    子类应该能够替换其父类并保持行为一致。在 Flutter 中，确保子类可以替换父类而不会引起意外行为是很重要的。继承关系应该是 is-a 的关系，而不是 has-a 的关系。

    // 里氏替换原则示例：确保子类可以替换父类而不引起问题

abstract class Shape {
  double getArea();
}

class Rectangle extends Shape {
  double width;
  double height;

  @override
  double getArea() {
    return width * height;
  }
}

class Square extends Shape {
  double side;

  @override
  double getArea() {
    return side * side;
  }
}

  4. 接口隔离原则 (Interface Segregation Principle)：

    客户端不应该被迫依赖它们不使用的接口。在 Flutter 中，您可以根据需要创建多个接口，以确保每个接口只包含客户端所需的方法。

    // 接口隔离原则示例：将接口细分为更小的接口

abstract class CanFly {
  void fly();
}

abstract class CanSwim {
  void swim();
}

class Bird implements CanFly {
  @override
  void fly() {
    print('Bird is flying');
  }
}

class Fish implements CanSwim {
  @override
  void swim() {
    print('Fish is swimming');
  }
}

  5. 依赖反转原则 (Dependency Inversion Principle)：

    高层模块不应该依赖于低层模块，二者都应该依赖于抽象。在 Flutter 中，您可以通过依赖注入、接口抽象等方式实现依赖反转，以减少模块之间的耦合度。

    // 依赖反转原则示例：通过依赖注入实现依赖反转

class UserRepository {
  Future<User> getUser() async {
    // Fetch user data from API
  }
}

class UserBloc {
  final UserRepository userRepository;

  UserBloc(this.userRepository);

  Future<void> fetchUser() async {
    User user = await userRepository.getUser();
    // Process user data
  }
}

Clean Architecture 原则

Clean Architecture

在 Flutter 开发中，Clean Architecture（CA）清晰架构是一种软件架构设计模式，旨在将应用程序分解为不同的层级，每一层级都有明确定义的职责，以实现代码的可维护性、可测试性和可扩展性。Clean Architecture 通过明确定义各层之间的依赖关系，将业务逻辑与框架、库和外部依赖分离开来，从而使代码更加灵活和独立。

示例中其中包括实体层、数据层、领域层和表示层。

实体层（Entities）：

// 实体类
class User {
  final String id;
  final String name;

  User({required this.id, required this.name});
}

数据层（Data Layer）：

// 数据接口
abstract class UserRepository {
  Future<User> getUserById(String userId);
}

// 数据实现
class UserRepositoryImpl implements UserRepository {
  @override
  Future<User> getUserById(String userId) {
    // 实现获取用户逻辑
  }
}

领域层（Domain Layer）：

// 用例类
class GetUserByIdUseCase {
  final UserRepository userRepository;

  GetUserByIdUseCase(this.userRepository);

  Future<User> execute(String userId) {
    return userRepository.getUserById(userId);
  }
}

表示层（Presentation Layer）：

// Flutter 页面
class UserPage extends StatelessWidget {
  final GetUserByIdUseCase getUserByIdUseCase;

  UserPage(this.getUserByIdUseCase);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Page'),
      ),
      body: Center(
        child: FutureBuilder<User>(
          future: getUserByIdUseCase.execute('1'),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text('User: ${snapshot.data!.name}');
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            }
            return CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

架构模式

软件架构模式，用于组织代码、分离关注点以及提高代码的可维护性和可测试性。常见模式有 Model-View-Controller（模型-视图-控制器）、Model-View-Presenter（模型-视图-展示器）和Model-View-ViewModel（模型-视图-视图模型）。

1. MVC（Model-View-Controller）：

MVC

  • 模型（Model）：代表应用程序的数据和业务逻辑。
  • 视图（View）：负责展示数据给用户以及接收用户输入。
  • 控制器（Controller）：处理用户输入、更新模型和视图之间的关系。

在 MVC 中，视图和控制器之间通过双向通信进行交互，控制器负责更新模型和视图。MVC 帮助将应用程序分解为三个独立的部分，以便更好地管理代码逻辑。

Model：
class UserModel {
  String id;
  String name;

  UserModel({required this.id, required this.name});
}
View：
class UserView extends StatelessWidget {
  final UserModel user;

  UserView(this.user);

  @override
  Widget build(BuildContext context) {
    return Text('User: ${user.name}');
  }
}
Controller：
class UserController {
  UserModel user = UserModel(id: '1', name: 'John Doe');
}

IOS 就是典型的 MVC 模式，通过事件触发控制器最后内部机制更新视图

2. MVP（Model-View-Presenter）：

MVP

  • 模型（Model）：同样代表应用程序的数据和业务逻辑。
  • 视图（View）：负责展示数据给用户以及接收用户输入。
  • 展示器（Presenter）：类似于控制器，负责处理用户输入、更新模型和更新视图。

在 MVP 中，视图和展示器之间通过接口进行通信，展示器负责从模型获取数据并更新视图。MVP 将视图和模型解耦，使得更容易进行单元测试和维护。

Model：

同上

View：
class UserView extends StatelessWidget {
  final UserModel user;
  final UserPresenter presenter;

  UserView(this.user, this.presenter);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('User: ${user.name}'),
        ElevatedButton(
          onPressed: () {
            presenter.updateUserName();
          },
          child: Text('Update Name'),
        ),
      ],
    );
  }
}
Presenter：
class UserPresenter {
  UserModel user = UserModel(id: '1', name: 'John Doe');
  UserView view;

  UserPresenter(this.view);

  void updateUserName() {
    user.name = 'Jane Smith';
    view.updateView(user);
  }
}

Presenter 中有视图方法来更新

3. MVVM（Model-View-ViewModel）：

MVVM

  • 模型（Model）：同样代表应用程序的数据和业务逻辑。
  • 视图（View）：负责展示数据给用户以及接收用户输入。
  • 视图模型（ViewModel）：连接视图和模型，负责处理视图逻辑、数据绑定以及与模型的交互。

在 MVVM 中，视图模型充当了视图和模型之间的中介，负责处理大部分视图逻辑，同时通过数据绑定将视图与模型连接起来。MVVM 的目标是将视图的状态和行为与业务逻辑分离，以实现更好的可维护性和可测试性。

Model：

同上

View：
class UserView extends StatelessWidget {
  final UserViewModel viewModel;

  UserView(this.viewModel);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('User: ${viewModel.user.name}'),
        ElevatedButton(
          onPressed: () {
            viewModel.updateUserName();
          },
          child: Text('Update Name'),
        ),
      ],
    );
  }
}
ViewModel：
class UserViewModel {
  UserModel user = UserModel(id: '1', name: 'John Doe');

  void updateUserName() {
    user.name = 'Jane Smith';
    notifyListeners();
  }
}

与 MVP 最大的区别是 MVVM 可以同时更新多个视图

Packages 优秀插件

freezed

https://pub-web.flutter-io.cn/packages/freezed

一个用于数据类 / 联合体 / 模式匹配 / 克隆的代码生成器。

详见 <flutter freezed json 转 model 代码生成> https://ducafecat.com/blog/flutter_application_freezed

get_it

https://pub-web.flutter-io.cn/packages/get_it

依赖管理工具包 懒加载、单例、依赖注入、作用域、注入管理… 。

详见 <在 getx 中使用 get_it 管理依赖注入> https://ducafecat.com/blog/use-get_it-in-getx

Equatable

https://pub-web.flutter-io.cn/packages/equatable

equatable 可以帮助开发人员轻松地重写类的 == 和 hashCode 方法，从而简化对象之间的相等性比较。

equatable 可以与状态管理、数据模型等方面结合使用，帮助开发人员更轻松地处理对象的相等性比较。

状态管理

  • Provider
  • Bloc
  • GetX
  • Riverpod

详见 <盘点主流 Flutter 状态管理库2024>https://ducafecat.com/blog/flutter-state-management-libraries-2024

小结

本文探讨了Flutter项目代码组织架构的关键方面，包括设计原则SOLID、Clean Architecture，以及架构模式MVC、MVP、MVVM的有机结合。通过本文的指导和建议，读者可以更好地了解如何打造优秀的Flutter应用架构，提高代码可维护性和扩展性。务必在实际项目中灵活运用这些架构原则，为应用的长期发展奠定坚实基础。

感谢阅读本文

如果有什么建议，请在评论中让我知道。我很乐意改进。

© 猫哥
ducafecat.com

end

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

qt 实现 轮播图效果，且还有 手动 上一页和下一页 已解决

qt 实现 轮播图效果，且还有 手动 上一页和下一页 已解决

QT中有 轮播图的需求&#xff0c;按照正常html版本 。只需要配置数组就能搞定&#xff0c;但是c qt版本 应该用什么了。 第一想到的是采用定时器。 // 定时器初始化{m_pTime new QTimer(this);m_pTime->start(4 * 1000);//启动定时器并设置播放时间间隔m_pAutoFlag true;/…
阅读更多...
网络层（IP层）

网络层（IP层）

IP协议的本质&#xff1a;有将数据跨网络传输的能力 而用户需要的是将数据从主机A到主机B可靠地跨网络传输 IP的组成&#xff1a;目标网络目标主机 IP由目标网络和目标主机两部分组成&#xff0c;IP报文要进行传输&#xff0c;要先到达目标网络&#xff0c;然后经过路由器转到…
阅读更多...
使用阿里云服务器搭建网站教程，超简单10分钟网站上线

使用阿里云服务器搭建网站教程，超简单10分钟网站上线

使用阿里云服务器快速搭建网站教程&#xff0c;先为云服务器安装宝塔面板&#xff0c;然后在宝塔面板上新建站点&#xff0c;阿里云服务器网aliyunfuwuqi.com以搭建WordPress网站博客为例&#xff0c;来详细说下从阿里云服务器CPU内存配置选择、Web环境、域名解析到网站上线全流…
阅读更多...
【算法设计与分析】实现Trie前缀树

【算法设计与分析】实现Trie前缀树

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 Trie&#xff08;发音类似 "try"&#xff09;或者说 前缀树 是一种树形数据结构&#xff0c;用于高效地存储和检索字符串…
阅读更多...
【评分标准】【网络系统管理】2019年全国职业技能大赛高职组计算机网络应用赛项H卷 无线网络勘测设计

【评分标准】【网络系统管理】2019年全国职业技能大赛高职组计算机网络应用赛项H卷 无线网络勘测设计

第一部分&#xff1a;无线网络勘测设计评分标准 序号评分项评分细项评分点说明评分方式分值1点位设计图AP编号AP编号符合“AP型号位置编号”完全匹配5AP型号独立办公室、小型会议室选用WALL AP110完全匹配5员工寝室选用智分&#xff0c;其他用放装完全匹配5其它区域选用放装AP…
阅读更多...
睿考网：二建可以跨省考试吗?

睿考网：二建可以跨省考试吗?

二级建造师资格考试允许考生进行跨省报名&#xff0c;但是考试通过后的注册环节&#xff0c;必须在考试所在的省份完成。建议在初始注册过程中选择与报名信息相符的单位&#xff0c;以确保符合当地的职业要求规定。 关于二建的考试地点&#xff0c;考生可以选择在工作单位所在…
阅读更多...
鸿蒙Harmony应用开发—ArkTS-@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化

鸿蒙Harmony应用开发—ArkTS-@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化

上文所述的装饰器仅能观察到第一层的变化&#xff0c;但是在实际应用开发中&#xff0c;应用会根据开发需要&#xff0c;封装自己的数据模型。对于多层嵌套的情况&#xff0c;比如二维数组&#xff0c;或者数组项class&#xff0c;或者class的属性是class&#xff0c;他们的第二…
阅读更多...
sr501人体红外传感器

sr501人体红外传感器

sr501人体红外传感器 文章目录 sr501人体红外传感器1.介绍2.使用方法3.示例代码 持续更新中1.介绍 模块信息介绍来自百问网&#xff0c;仅供学习和参考​ 人体都有恒定的体温&#xff0c;一般在 37 度&#xff0c;所以会发出特定波长 10uM 左右的红外线&#xff0c;被动式红外…
阅读更多...
推荐一款制造执行系统（MES）国内比较好的实施厂家

推荐一款制造执行系统（MES）国内比较好的实施厂家

什么是MES 制造执行系统&#xff08;MES&#xff09;是一种用于监控、控制和优化制造过程的软件系统。它通过与企业资源计划&#xff08;ERP&#xff09;系统和自动化系统的集成&#xff0c;实现对生产过程的管理和监测&#xff0c;包括生产计划、生产过程和生产数据。 MES可…
阅读更多...
基于python+vue分类信息服务平台移动端的设计与实现flask-django-php-nodejs

基于python+vue分类信息服务平台移动端的设计与实现flask-django-php-nodejs

分类信息服务平台是在Android操作系统下的应用平台。为防止出现兼容性及稳定性问题&#xff0c;框架选择的是django&#xff0c;Android与后台服务端之间的数据存储主要通过MySQL。用户在使用应用时产生的数据通过 python等语言传递给数据库。通过此方式促进分类信息服务平台信…
阅读更多...
高等数学基础篇（数二）之微分方程

高等数学基础篇（数二）之微分方程

微分方程&#xff1a; 一、常微分方程的基本概念 二、一阶微分方程 三、可降阶的高阶方程 四、高阶线性微分方程 目录 一、常微分方程的基本概念 二、一阶微分方程 三、可降阶的高阶方程 四、高阶线性微分方程 一、常微分方程的基本概念 二、一阶微分方程 帮助理解&…
阅读更多...
C++学习之旅（二）运行四个小项目 （Ubuntu使用Vscode）

C++学习之旅（二）运行四个小项目 （Ubuntu使用Vscode）

如果是c语言学的比较好的同学 可以直接跟着代码敲一遍&#xff0c;代码附有详细语法介绍&#xff0c;不可错过 一&#xff0c;猜数字游戏 #include <iostream> #include <cstdlib> #include <ctime>int main() {srand(static_cast<unsigned int>(tim…
阅读更多...
SpringBoot整合Swagger-UI实现在线API文档

SpringBoot整合Swagger-UI实现在线API文档

✅作者简介：大家好，我是Leo，热爱Java后端开发者，一个想要与大家共同进步的男人😉😉🍎个人主页：Leo的博客 💞当前专栏： 循序渐进学SpringBoot ✨特色专栏： MySQL学习 🥭本文内容：SpringBoot整合Swagger-UI实现在线API文档 📚个人知识库： Leo知识库，欢迎大…
阅读更多...
在 vite 开发环境，使用https自签证书 --- mkcert

在 vite 开发环境，使用https自签证书 --- mkcert

在 vite 开发环境&#xff0c;使用https自签证书 — mkcert 使用basicSsl&#xff08;vitejs/plugin-basic-ssl&#xff09; 在vite开发环境中&#xff0c;使用 basicSsl 插件能暂时提供https服务&#xff0c;同时&#xff0c;也会面临总是提示一下的问题,如下图 提示https证…
阅读更多...
108、3D Gaussian Splatting for Real-Time Radiance Field Rendering

108、3D Gaussian Splatting for Real-Time Radiance Field Rendering

简介 官网 更少训练时间的同时实现最先进的视觉质量&#xff0c;能在1080p分辨率下实现高质量的实时(≥30 fps)新视图合成 NeRF使用隐式场景表示&#xff0c;体素&#xff0c;点云等属于显示建模方法&#xff0c;3DGS就是显示辐射场。它用3D高斯作为灵活高效的表示方法&…
阅读更多...
R-CNN笔记

R-CNN笔记

目标检测之R-CNN论文精讲&#xff0c;RCNN_哔哩哔哩_bilibili 论文背景 在该论文提出之前&#xff0c;主流的目标检测思路是&#xff1a; 将一幅图片划分成很多个区域&#xff0c;单独提取出来 对于每个区域使用传统的特征提取方法提取 提取结束后可以使用以为特征向量表示 可以…
阅读更多...
Python+django+vue开发的家教信息管理系统

Python+django+vue开发的家教信息管理系统

一直想做一款管理系统&#xff0c;看了很多优秀的开源项目但是发现没有合适的。 于是利用空闲休息时间开始自己写了一套管理系统。 功能介绍 平台采用B/S结构&#xff0c;后端采用主流的Pythondjango进行开发&#xff0c;前端采用主流的Vue.js进行开发。 整个平台包括前台和…
阅读更多...
外推蜘蛛池的优势及优势？

外推蜘蛛池的优势及优势？

源码介绍&#xff1a; 适用使用范围: 外推蜘蛛池、站群 演示地址&#xff1a;以截图为准 运行环境&#xff1a;php 其余注释&#xff1a;什么是蜘蛛池&#xff1f; 蜘蛛池是一个利用大平台权重来获取百度收录和排名的程序。 程序员通常称其为“蜘蛛池”。 这是一个可以快速…
阅读更多...
由浅到深认识Java语言（22）：Random类

由浅到深认识Java语言（22）：Random类

该文章Github地址&#xff1a;https://github.com/AntonyCheng/java-notes 在此介绍一下作者开源的SpringBoot项目初始化模板&#xff08;Github仓库地址&#xff1a;https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址&#xff1a;https://blog.c…
阅读更多...
【RPG Maker MV 仿新仙剑 战斗场景UI （八）】

【RPG Maker MV 仿新仙剑 战斗场景UI （八）】

RPG Maker MV 仿新仙剑 战斗场景UI 八 状态及装备场景代码效果 状态及装备场景 本计划在战斗场景中直接制作的&#xff0c;但考虑到在战斗场景中加入太多的窗口这不太合适&#xff0c;操作也繁琐&#xff0c;因此直接使用其他场景。 代码 Pal_Window_EquipStatus.prototype.…
阅读更多...
最新文章

Copyright @ 2022~2023