[Day18] Flutter - Environment (part2)

前言

Hi, 我是鱼板伯爵今天要教大家如何初始化 Environment，在未来的开发的过程中可以快速又方便的切换环境，教学内容只会撷取片段程序码，建议大家搭配完整程序码来练习。

完整程序码

Environment

环境设定可以使开发的时候很方便的切换设定，通常会有开发、测试和产品三个状态，每一个状态中的参数将会对应不同状态而不同，而我们可以预先设定好档案，当重新载入时就可以切换状态。

设置参数

在专案层中创建一个设置参数的json档案，并在pubspec.yaml中设定assets的资料夹路径。

  assets:
    - assets/config/

环境设定

设定每个状态的名称，在开发时可以切换，而且还可以避免打错字的问题。

class Environment {
  /// name of the environment
  final String name;

  /// default constructor
  const Environment(this.name);

  /// preset of common env name 'dev'
  static const String dev = 'development';

  /// preset of common env name 'prod'
  static const String prod = 'production';

  /// preset of common env name 'test'
  static const String test = 'testing';
}

读取刚刚设定好的参数档案，而参数则会根据不同的Environment来获取。

import 'package:flutter/services.dart';
import 'dart:convert';
import 'dart:async';
import 'config_model.dart';

class ConfigReader {
  static ConfigModel _config =
      ConfigModel(API_HOST: "API_HOST", DEBUG: false, TESTING: false);

  static Future<void> initializeApp(String? env) async {
    env = env ?? "development";
    String configString = await rootBundle.loadString('assets/config/env.json');

    final jsonMap = json.decode(configString);
    _config = ConfigModel.fromMap(jsonMap[env]);
  }

  static ConfigModel config() {
    return _config;
  }
}

调用WidgetsFlutterBinding.ensureInitialized()，来实现初始元件的绑定，接着就可以初始环境设定了。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await ConfigReader.initializeApp(Environment.prod);
}

你可以试着切换不同的Environment，然後按下重新载入就可以看到Debug绷带的变化了。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: ConfigReader.config().DEBUG,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}