Flutter如何创建一个企业级项目(一)

假设我们需要创建公司的一个项目,它有dev,qa,product 三个环境,对应开发,测试,产品三个不同的App,他还需要支持下面的特性。

  1. 可以在 VSCode/Android Studio 一键切换不同的环境调试App,无需修改代码
  2. 支持一键打包不同环境的App(手动触发/代码提交触发),上传至Apple Store和Google Play,使用bitrise
  3. 项目的异常处理和监测上报,使用sentry_flutter
  4. 自动依赖注入,使用 get_it+injectable
  5. 项目架构使用 Clean Architecture
  6. 完成基础的Google+Apple 登录/用户名登录逻辑

我将创建一系列的文章教程,如果你感兴趣,不妨关注我。在文章合集最后我会附上github链接。

那么应该如何做呢?我们一步一步来。

已有文章:

Flutter如何创建一个企业级项目-Android篇(二)

Flutter 如何创建一个企业级项目 - iOS篇 (三)

1,创建项目

1,使用命令行创建项目

css 复制代码
flutter create -i <objc或者swift> -a <kotlin或者java> --org com.example 项目名字

2,使用FVM配置项目Flutter版本

perl 复制代码
fvm use <last_version>

2, 配置不同环境代码

1, 创建不同环境的配置

dart 复制代码
import '../env/api_config.dart';

export '../env/api_config.dart';

abstract class Env {
  String get title;
  APIConfig get apiConfig;

  @override
  String toString() {
    return 'title: $title\n'
        'apiConfig: ${apiConfig.toString()}\n';
  }
}

class DevEnv extends Env {
  @override
  String get title => 'Pollka Snow Dev';

  @override
  APIConfig get apiConfig => APIConfig(
        apiHost: 'https://dev.pollka.snow.cloud',
        debugUserName: '',
        debugPassword: '',
      );
}


class QaEnv extends Env {
  @override
  String get title => 'Pollka Snow Test';

  @override
  APIConfig get apiConfig => APIConfig(
        apiHost: 'https://test.pollka.snow.cloud',
        debugUserName: '',
        debugPassword: '',
      );
}


class ProductEnv extends Env {
  @override
  String get title => 'Pollka Snow';

  @override
  APIConfig get apiConfig => APIConfig(
        apiHost: 'https://pollka.snow.cloud',
        debugUserName: '',
        debugPassword: '',
      );
}

2, 创建接口配置

dart 复制代码
class APIConfig {
  final String apiHost;
  final String debugUserName;
  final String debugPassword;

  APIConfig({
    required this.apiHost,
    required this.debugUserName,
    required this.debugPassword,
  });

  @override
  String toString() {
    return '$apiHost, debugUserName:$debugUserName, debugPassword:$debugPassword';
  }
}

3, 创建启动配置

dart 复制代码
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import './di/injection_container.dart' as di;

import '../core/util/system_chrome_util.dart';
import './app.dart';
import './env/env.dart';

export './env/env.dart';

class System {
  static void run(Env env) {
    runZonedGuarded(
      () async {
        WidgetsFlutterBinding.ensureInitialized();
        setupSystemChrome(orientations: [DeviceOrientation.portraitUp], lightTheme: true);
        await di.init();
        runApp(App(env));
      },
      (Object exception, StackTrace stack) {},
    );
  }
}

4,设置不同环境 main.dart

dart 复制代码
// [main_dev.dart]
import 'startup/startup.dart';

void main() {
  System.run(DevEnv());
}

// [main_qa.dart]
import 'startup/startup.dart';

void main() {
  System.run(QaEnv());
}

// [main_product.dart]
import 'startup/startup.dart';

void main() {
  System.run(ProductEnv());
}

3, 文件夹结构

4, 配置VSCode

1,创建 launch.json 文件, 支持一键切换不同环境

json 复制代码
{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
       {
            "name": "pollka-snow-dev",
            "request": "launch",
            "type": "dart",
            "program": "lib/main_dev.dart",
            "args": [
                "--flavor",
                "dev"
            ],
        },
        {
            "name": "pollka-snow-dev(profile)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "profile",
            "program": "lib/main_dev.dart",
            "args": [
                "--flavor",
                "dev"
            ],
        },
        {
            "name": "pollka-snow-qa",
            "request": "launch",
            "type": "dart",
            "program": "lib/main_qa.dart",
            "args": [
                "--flavor",
                "qa"
            ],
        },
        {
            "name": "pollka-snow-product",
            "request": "launch",
            "type": "dart",
            "program": "lib/main_product.dart",
            "args": [
                "--flavor",
                "product"
            ],
        },
    ]
}

2,现在可以通过切换不同的环境,运行调试App

相关推荐
jhonjson16 小时前
Flutter开发之flutter_local_notifications
flutter·macos·cocoa
iFlyCai17 小时前
23种设计模式的Flutter实现第一篇创建型模式(一)
flutter·设计模式·dart
恋猫de小郭18 小时前
Flutter 小技巧之 OverlayPortal 实现自限性和可共享的页面图层
flutter
A_cot1 天前
Vue.js:构建现代 Web 应用的强大框架
前端·javascript·vue.js·flutter·html·web·js
B.-1 天前
在 Flutter 应用中调用后端接口的方法
android·flutter·http·ios·https
️ 邪神1 天前
【Android、IOS、Flutter、鸿蒙、ReactNative 】约束布局
android·flutter·ios·鸿蒙·reactnative
pinkrecall20121 天前
flutter调试
flutter
jhonjson1 天前
在Flutter中,禁止侧滑的方法
前端·javascript·flutter
️ 邪神2 天前
【Android、IOS、Flutter、鸿蒙、ReactNative 】文本点击事件
flutter·ios·鸿蒙·reactnative·anroid
️ 邪神2 天前
【Android、IOS、Flutter、鸿蒙、ReactNative 】文本Text显示
flutter·ios·鸿蒙·reactnative·anroid