在移动开发工作中,我们为一个项目至少需要配置两个独立的开发环境:“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<MyHomePage> {
@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: <Widget>[
// 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<MyHomePage> {
@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: <Widget>[
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_ <environment> .dart
我们将为不同的环境生成对应的APK。 要在iOS上构建版本,只需将apk替换为ios。是不是很方便?
六、 在IntelliJ IDEA / Android Studio等ide中设置运行环境
如果您在Android Studio或IntelliJ IDEA的开发ide里与Flutter插件一起使用,可以轻松创建运行单独环境所需的运行配置。 首先,点击运行按钮旁边下拉菜单中的编辑配置。
然后,单击+按钮创建一个新的运行配置。 在列表中选择Flutter
对于开发环境,输入dev作为名称。如果需要和你的小伙伴的版本控制中包含此运行配置,请确保选中共享复选框。 然后,为Dart入口点选择lib / main_dev.dart文件。
下面这样是不是很酷?:)
特别声明:本文完全参考大牛# Iiro Krankka 的文章 《Separating build environments in Flutter apps》
完整的项目地址在 https://github.com/FlutterRocks/separating_build_environments