购物袋

一个简单的使用 MVVM 的电子商务应用。

应用视频

shopbag.mp4

库

初始化 Flutter 项目，在 **pubspec.yaml** 配置文件中添加上述所有必需的依赖项，然后运行 pub get。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

  #Icon Provider
  flutter_svg: ^1.1.6

  #Responsive
  responsive_sizer: ^3.1.1

  #Extensions
  kartal: ^2.7.0

  #Design
  sensors_plus: ^2.0.1
  flutter_rating_bar: ^4.0.1
  lottie: ^2.2.0

  #JsonAnnotation
  json_annotation: ^4.7.0

  #FreezedAnnotation
  freezed_annotation: ^2.2.0

  #Network
  dio: ^4.0.6
  connectivity_plus: ^3.0.2
  
  #State Management
  mobx: ^2.1.3
  flutter_mobx: ^2.0.6+5
  mobx_codegen: ^2.1.1

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

  #Route Generator
  auto_route_generator: ^5.0.3

  #Code Generator
  build_runner: ^2.3.3

  #Model Files Generator
  json_serializable: ^6.5.4
  freezed: ^2.3.2

  #Application Icon
  flutter_launcher_icons: ^0.11.0

文件夹

首先，我们的 src>lib 文件夹中有两个主要构建。它们是 view 和 core 结构。

  • core：此层是负责管理或启动我们主要工作部分的部分。

base：此层包含我们的主要函数和单例文件。

components：此层包含我们可以在页面上使用的 widget，例如按钮、应用程序栏，我们可以在此处创建它们，并使用参数自定义它们在我们需要它们的位置。

constants：此层由两个结构组成，这两个结构是 app 和 enums 结构。

extensions：此层和项目包含基本结构，String 和 int。

init：此层由 4 个主要结构组成。这些结构是 routes、network、utils、mixins 和 theme。

  • view：此层包含我们的屏幕。我们可以为每个屏幕创建一个文件夹。在 view 中有一个文件夹用于每个页面。主页面的子文件夹适合 MVVM 结构。

最后，所有服务方法的测试都位于“test”文件夹下。

GitHub

查看 Github