flutter 配置不同的开发环境(qa/dev/prod)

在移动开发工作中,我们为一个项目至少需要配置两个独立的开发环境:“development开发环境” 和 “生产环境production ”。 这样方便我们在开发环境里自由地开发和测试新的功能,而对生产环境的用户不造成丝毫的影响。
以flutter 项目开发为例:

一、初始化项目

首先我们看入口文件
lib/main.dart

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: '我的项目',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: '我的主页'),
    );
  }
}

然后,我们给项目建立一个新的主页,注意这里和项目默认的模板有差异
lib/my_home_page.dart

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Build flavors'),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Every value is hardcoded in the app.
            // No development or production variants exist yet.
            new Text('This is the production app.'),
            new Text('Backend API url is https://api.example.com/'),
          ],
        ),
      ),
    );
  }
}

二、把 app 区分不同的环境变量

我们举例,以下的数据是需要和生产环境区分开来的
1. APP的标题:开发环境为“我的项目 DEV” 生产环境为“我的项目”
2. 第一个text widget:开发环境为“这是正在开发的APP” 生产环境为 “这是一个正式上线的APP”
3. API 接口调用:开发环境为 https://dev-api.example.com/ ,生产环境为https://api.example.com/ 。

三、创建配置信息对象

创建一个新文件用来保存所有环境特定配置信息
lib/app_config.dart

import 'package:meta/meta.dart';

class AppConfig {
  AppConfig({
    @required this.appName,
    @required this.flavorName,
    @required this.apiBaseUrl,
  });

  final String appName;
  final String flavorName;
  final String apiBaseUrl;
}

四、把 AppConfig 转化为 InheritedWidget类

为了让我们的AppConfig类成为InheritedWidget,我们将继承InheritedWidget类,提供获取实例的静态方法“of”,并且重载了“updateShouldNotify”方法。
lib/app_config.dart

import 'package:flutter/material.dart';
import 'package:meta/meta.dart';

class AppConfig extends InheritedWidget {
  AppConfig({
    @required this.appName,
    @required this.flavorName,
    @required this.apiBaseUrl,
    @required Widget child,
  }) : super(child: child);

  final String appName;
  final String flavorName;
  final String apiBaseUrl;

  static AppConfig of(BuildContext context) {
    return context.inheritFromWidgetOfExactType(AppConfig);
  }

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) => false;
}

需要注意的是:

  • 子构造函数的参数将成为我们的整个MaterialApp实例,我们用AppConfig对象包装我们的应用程序。
  • 我们创建了一个名为“of”的静态方法。 这是InheritedWidgets的惯例。 它使我们能够在需要时调用AppConfig.of(context)来获取特定于环境的配置。
  • 在updateShouldNotify方法中,我们只返回false。 这是因为我们的AppConfig在创建后不会改变。
    接下来,我们为两个环境创建文件。

四.、为不同的环境创建不同的启动文件

我们将为每个环境创建各自的“启动文件”。 在我们的例子中,我们只有两个环境,开发和生产,所以我们的文件将是main_dev.dart和main_prod.dart。 在每个文件中,我们将使用各自的配置数据创建一个AppConfig类的实例。 我们将MyApp的新实例传递给我们的AppConfig widget,以便我们应用中的任何widget都可以轻松获取配置的实例。 然后,我们将调用runApp,它将成为我们整个应用程序的入口点。
lib/main_dev.dart

import 'package:build_flavors/app_config.dart';
import 'package:build_flavors/main.dart';
import 'package:flutter/material.dart';

void main() {
  var configuredApp = new AppConfig(
    appName: 'Build flavors DEV',
    flavorName: 'development',
    apiBaseUrl: 'https://dev-api.example.com/',
    child: new MyApp(),
  );
  
  runApp(configuredApp);
}

生产应用程序启动程序文件与开发文件完全相同,但具有不同的配置值。
lib/main.dart

import 'package:build_flavors/app_config.dart';
import 'package:build_flavors/my_home_page.dart';
import 'package:flutter/material.dart';

// We can remove this line here:
// void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Call AppConfig.of(context) anywhere to obtain the 
    // environment specific configuration 
    var config = AppConfig.of(context);
    
    return new MaterialApp(
      title: config.appName,
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

在这里,我们只是获取应用配置实例,并根据我们当前的环境正确设置我们的MaterialApp标题。 我们删除了void main()=> runApp(new MyApp())行,因为我们的环境特定的启动程序文件将覆盖该行。
由于我们的整个应用程序都包装在AppConfig widget中(它继承了InheritedWidget 类),所以我们可以在任何地方通过调用AppConfig.of(context)来获取的配置实例。
lib/my_home_page.dart

import 'package:build_flavors/app_config.dart';
import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    var config = AppConfig.of(context);
    
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(config.appName),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new Text('This is the ${config.flavorName} app.'),
            new Text('Backend API url is ${config.apiBaseUrl}'),
          ],
        ),
      ),
    );
  }
}

我们的主页widget与之前基本相同,但具有特定环境的值。 像以前一样,我们通过调用AppConfig.of(context)来获得AppConfig对象的实例。

五、在不同的环境下运行APP

我们可以通过运行带 --target 或者 -t 参数来运行不同的环境。
因此,在我们的例子中:

  • 运行开发版本,采用:
flutter run -t lib / main_dev.dart
  • 运行生产版本,采用
flutter run -t lib / main_prod.dart

要在Android上创建一个release版本,我们可以 运行

flutter build apk -t lib / main_  .dart

我们将为不同的环境生成对应的APK。 要在iOS上构建版本,只需将apk替换为ios。是不是很方便?

六、 在IntelliJ IDEA / Android Studio等ide中设置运行环境

如果您在Android Studio或IntelliJ IDEA的开发ide里与Flutter插件一起使用,可以轻松创建运行单独环境所需的运行配置。 首先,点击运行按钮旁边下拉菜单中的编辑配置。


run-configuration-1.png

然后,单击+按钮创建一个新的运行配置。 在列表中选择Flutter


run-configuration-2.png

对于开发环境,输入dev作为名称。如果需要和你的小伙伴的版本控制中包含此运行配置,请确保选中共享复选框。 然后,为Dart入口点选择lib / main_dev.dart文件。
Screenshot from 2018-05-18 16-41-38.png

下面这样是不是很酷?:)


run-configuration-final.png

特别声明:本文完全参考大牛# Iiro Krankka 的文章 《Separating build environments in Flutter apps》
完整的项目地址在 https://github.com/FlutterRocks/separating_build_environments

你可能感兴趣的:(flutter 配置不同的开发环境(qa/dev/prod))