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

相关推荐
jcLee9521 小时前
Flutter/Dart:使用日志模块Logger Easier
flutter·log4j·dart·logger
tmacfrank1 天前
Flutter 异步编程简述
flutter
tmacfrank1 天前
Flutter 基础知识总结
flutter
叫我菜菜就好1 天前
【Flutter_Web】Flutter编译Web第三篇(网络请求篇):dio如何改造方法,变成web之后数据如何处理
前端·网络·flutter
AiFlutter1 天前
Flutter-底部分享弹窗(showModalBottomSheet)
java·前端·flutter
m0_748247802 天前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
迷雾漫步者2 天前
Flutter组件————PageView
flutter·跨平台·dart
迷雾漫步者3 天前
Flutter组件————FloatingActionButton
前端·flutter·dart
coder_pig3 天前
📝小记:Ubuntu 部署 Jenkins 打包 Flutter APK
flutter·ubuntu·jenkins
捡芝麻丢西瓜3 天前
flutter自学笔记5- dart 编码规范
flutter·dart