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

相关推荐
雨季66621 分钟前
构建 OpenHarmony 简易分账计算器:用除法解决日常公平难题
javascript·flutter·ui·自动化·dart
符哥200825 分钟前
对比ArkTsUI和Flutter和 SwiftUI 和Jetpack Compose四个框架语法及使用场景。
flutter·ios·swiftui
子春一31 分钟前
Flutter for OpenHarmony:构建一个智能 BMI 计算器:深入解析 Flutter 中的实时计算、状态反馈与健康数据可视化
flutter·信息可视化
2401_8920005233 分钟前
Flutter for OpenHarmony 猫咪管家App实战 - 疫苗记录实现
开发语言·javascript·flutter
一起养小猫36 分钟前
Flutter for OpenHarmony 实战:CustomPainter游戏画面渲染详解
flutter·游戏
灰灰勇闯IT1 小时前
Flutter for OpenHarmony:调用原生能力与平台特定组件集成
flutter
ujainu1 小时前
Flutter + OpenHarmony 卡片式布局:Card 与 ListTile 在信息聚合界面(如服务卡片)中的应用
flutter·组件
zilikew2 小时前
Flutter框架跨平台鸿蒙开发——读书笔记工具APP的开发流程
flutter·华为·harmonyos·鸿蒙
kirk_wang2 小时前
Flutter video_thumbnail库在鸿蒙(OpenHarmony)端的完整适配实践
flutter·移动开发·跨平台·arkts·鸿蒙
●VON2 小时前
Flutter for OpenHarmony:基于软删除状态机与双轨数据管理的 TodoList 回收站安全体系实现
安全·flutter·交互·openharmony·跨平台开发·von