样板项目

使用 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