样板项目

使用 MobX 和 Provider 在 Flutter 中创建的样板项目。样板项目同时支持 Web 和移动端，请克隆下面提到的相应分支

入门

样板项目包含创建新库或项目所需的最小化实现。存储库代码预加载了一些基本组件，如基本应用程序架构、应用程序主题、常量和创建新项目所需的依赖项。通过使用样板代码作为标准初始化器，我们可以在所有继承它的项目中拥有相同的模式。这也有助于通过允许您使用相同的代码模式并避免从头重写来减少设置和开发时间。

如何使用

步骤 1

使用下面的链接下载或克隆此仓库

https://github.com/zubairehman/flutter-boilerplate-project.git

步骤 2

转到项目根目录，在控制台中执行以下命令以获取所需的依赖项

flutter pub get

步骤 3

此项目使用 `inject` 库，该库支持代码生成，请执行以下命令生成文件

flutter packages pub run build_runner build --delete-conflicting-outputs

或使用 watch 命令以自动同步源代码

flutter packages pub run build_runner watch

隐藏生成的文件

为了隐藏生成的文件，请导航到 `Android Studio` -> `Preferences` -> `Editor` -> `File Types` 并在 `ignore files and folders` 部分粘贴以下行

*.inject.summary;*.inject.dart;*.g.dart;

在 Visual Studio Code 中，导航到 `Preferences` -> `Settings` 并搜索 `Files:Exclude`。添加以下模式

**/*.inject.summary
**/*.inject.dart
**/*.g.dart

样板项目功能

  • 启动屏
  • 登录
  • 首页
  • 路由
  • 主题
  • Dio
  • 数据库
  • MobX (连接应用程序的响应式数据与 UI)
  • Provider (状态管理)
  • 加密
  • 验证
  • 代码生成
  • 用户通知
  • 日志记录
  • 依赖注入
  • 深色主题支持 (新增)
  • 多语言支持 (新增)
  • Provider 示例 (新增)

即将推出功能

  • 连接支持
  • 后台获取支持

使用的库和工具

文件夹结构

这是 Flutter 提供的核心文件夹结构。

flutter-app/
|- android
|- build
|- ios
|- lib
|- test

这是我们在此项目中使用的文件夹结构

lib/
|- constants/
|- data/
|- stores/
|- ui/
|- utils/
|- widgets/
|- main.dart
|- routes.dart

现在，让我们深入 `lib` 文件夹，其中包含应用程序的主要代码。

1- constants - All the application level constants are defined in this directory with-in their respective files. This directory contains the constants for `theme`, `dimentions`, `api endpoints`, `preferences` and `strings`.
2- data - Contains the data layer of your project, includes directories for local, network and shared pref/cache.
3- stores - Contains store(s) for state-management of your application, to connect the reactive data of your application with the UI. 
4- ui — Contains all the ui of your project, contains sub directory for each screen.
5- util — Contains the utilities/common functions of your application.
6- widgets — Contains the common widgets for your applications. For example, Button, TextField etc.
7- routes.dart — This file contains all the routes for your application.
8- main.dart - This is the starting point of the application. All the application level configurations are defined in this file i.e, theme, routes, title, orientation etc.

常量

此目录包含所有应用程序级别的常量。如下面的示例所示，为每种类型创建一个单独的文件

constants/
|- app_theme.dart
|- dimens.dart
|- endpoints.dart
|- preferences.dart
|- strings.dart

数据层

您应用程序的所有业务逻辑都将进入此目录，它代表您应用程序的数据层。它被细分为三个目录 `local`、`network` 和 `sharedperf`，每个目录包含特定于域的逻辑。由于每一层都独立存在，因此更容易进行单元测试。UI 和数据层之间的通信通过使用中央存储库来处理。

data/
|- local/
    |- constants/
    |- datasources/
    |- app_database.dart
   
|- network/
    |- constants/
    |- exceptions/
    |- rest_client.dart
    
|- sharedpref
    |- constants/
    |- shared_preference_helper.dart
    
|- repository.dart

Store

Store 是您应用程序状态在 Flutter 中存在的地方。Store 本质上是一个位于 widget 树顶端的 widget，它通过特殊方法向下传递其数据。如果存在多个 Store，则为每个 Store 创建一个单独的文件夹，如下面的示例所示

stores/
|- login/
    |- login_store.dart
    |- form_validator.dart

UI

此目录包含您应用程序的所有 UI。每个屏幕都位于单独的文件夹中，便于将与该特定屏幕相关的文件组合在一起。所有屏幕特定的 widget 都将放置在 `widgets` 目录中，如下面的示例所示

ui/
|- login
   |- login_screen.dart
   |- widgets
      |- login_form.dart
      |- login_button.dart

Utils

包含项目中使用的通用文件和实用程序。文件夹结构如下

utils/
|- encryption
   |- xxtea.dart
|- date
  |- date_time.dart

小部件

包含跨多个屏幕共享的通用 widget。例如，Button、TextField 等。

widgets/
|- app_icon_widget.dart
|- empty_app_bar.dart
|- progress_indicator.dart

Routes

此文件包含您应用程序的所有路由。

import 'package:flutter/material.dart';

import 'ui/home/home.dart';
import 'ui/login/login.dart';
import 'ui/splash/splash.dart';

class Routes {
  Routes._();

  //static variables
  static const String splash = '/splash';
  static const String login = '/login';
  static const String home = '/home';

  static final routes = <String, WidgetBuilder>{
    splash: (BuildContext context) => SplashScreen(),
    login: (BuildContext context) => LoginScreen(),
    home: (BuildContext context) => HomeScreen(),
  };
}

Main

这是应用程序的起点。所有应用程序级别的配置都在此文件中定义，即主题、路由、标题、方向等。

import 'package:boilerplate/routes.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'constants/app_theme.dart';
import 'constants/strings.dart';
import 'ui/splash/splash.dart';

void main() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
    DeviceOrientation.landscapeRight,
    DeviceOrientation.landscapeLeft,
  ]).then((_) {
    runApp(MyApp());
  });
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: Strings.appName,
      theme: themeData,
      routes: Routes.routes,
      home: SplashScreen(),
    );
  }
}

Wiki

查看 wiki 以获取更多信息

结论

我很乐意回答您关于此方法的任何问题，如果您想为样板项目贡献一份力量，请随时提交 issue 和/或 pull request？

再次需要指出的是，这个示例可能看起来比实际的更复杂——但这仅仅是一个示例。如果您喜欢我的工作，请不要忘记 ⭐ 收藏仓库以表达您的支持。

GitHub

查看 Github