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

相关推荐
xmdy58661 天前
Flutter + 开源鸿蒙跨端实战|基于空间地理信息的**城市全域智慧泊车调度与多维运维管理平台** Day1 项目架构基座与工程化环境搭建
flutter·开源·harmonyos
KillerNoBlood1 天前
2026移动端跨平台开发面经总结
android·算法·flutter·ios·移动开发·鸿蒙·kmp
xmdy58661 天前
Flutter+开源鸿蒙全域智慧泊车调度管理平台 Day4 订单全流程闭环+支付核验+会员权益+个人中心开发
flutter·开源·harmonyos
W蘭1 天前
Flutter从入门到实战-01-Dart语言基础
flutter
xuankuxiaoyao1 天前
Vue.js 插槽、作用域插槽、商品、阶段案例
android·vue.js·flutter
恋猫de小郭1 天前
终于,Flutter 修复 Android 中文字体异常,但是很草台,不知怎么吐槽
android·前端·flutter
xmdy58661 天前
Flutter + 开源鸿蒙跨端实战|基于空间地理信息的城市全域智慧泊车调度与多维运维管理平台 Day3
flutter·华为·开源
UnicornDev1 天前
【Flutter x HarmonyOS 6】魔方计时APP——挑战页面的UI设计
flutter·ui·华为·harmonyos·鸿蒙
张风捷特烈1 天前
状态管理大乱斗#08 | MobX 源码评析 - 透明魔法
android·前端·flutter
西西学代码1 天前
Flutter---RichText(混合文本样式)
flutter