flutter环境配置

小伙伴,很高兴能看到这篇文章,也许你是 flutter 大牛,也许你是小白,请耐心看完, 这是 flutter 多环境配置及 Dio 请求封装的最佳实践, 相信这也是全网最好的一篇 flutter 实践文章, 适合大中小型项目, 相信一定会有所收获

如果阅读过程中让你感到困惑,请按照文章步骤,创建对应文件,编写代码运行项目感受一下,相信这不会让你失望的

flutter 多环境配置

所谓多环境是指 开发环境, 联调环境, 测试环境, 演示环境, 生产环境等,当我们在各个环境之间切换时,势必需要快速高效的解决方案, 多环境配置由此而生, 相信在看到这篇文章之前,也看过很多关于环境配置的博文,大多都是在项目中手动切换环境变量以达到环境切换目的(例如下图), 虽然能解决问题但是总感觉有些low,下面让我们来解开 flutter 正确的启动方式

**

提示: 在本地初始化一个 flutter 项目,然后按照下文操作

**

目录结构概览

先来看下图的 目录结构总览, 接下来我们会逐一创建各个文件,并详细讲解其作用
==需要注意每个文件的位置==

1. config.dart // 环境公共配置文件
2. dev.dart // 开发环境配置文件
3. prod.dart // 生产环境配置文件
4. main.dart // 项目入口文件
5. index.dart // 项目主页文件
6. http.dart // dio请求封装文件
7. interface.dart // 接口文件
   

创建文件

1. 在 lib 目录下创建 public 文件夹

2. 在public目录下创建 config.dart 文件

3. 在public目录下创建 dev.dart 文件

4. 在public目录下创建 prod.dart 文件

   目前先创建这几个文件

环境变量公共配置文件 config.dart

打开 config.dart 文件 编写如下代码 推荐使用 android studio 编写 flutter 应用

/// 注意这里包的引入路径
/// 如果你是 Android studio 用户 这里可以不着急引入包,当你把代码复制到自己的项目里时,由于路径不对, 
/// 编辑器检测不到对应的包时,对应的代码会变红,如下图,此时把选中红色波浪线的单词按住 ctrl + enter键 选择需要的包就好了
import 'package:flutter/material.dart';

/**
 * @CreateDate:   2020/7/2 20:45
 * @Author:       Gleason
 * @Description:  环境变量
 **/
 /// 这里继承自 InheritedWidget 这个类 
 /// 可以在 weiget 中通过上下文获取到环境变量
 /// 当然 也可把 主题和一些全局 设置放到这里
class ENV extends InheritedWidget {
   
  static String appName; // 系统名称
  static String envName; // 运行环境
  static String baseUrl; // 基础url

  ENV({
   
    @required String appName,
    @required String envName,
    @required String baseUrl,
    @required Widget child,
  }) : super(child: child){
   
    ENV.appName = appName;
    ENV.envName = envName;
    ENV.baseUrl = baseUrl;
  }
  // 这里 是在 weiget 中拿到当前环境变量的关键
  static ENV of(BuildContext context) {
   
    return context.dependOnInheritedWidgetOfExactType(aspect: ENV);
  }

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

配置 dev 环境 (开发环境)

import 'package:flutter_template/main.dart';
import 'package:flutter/material.dart';
import 'package:flutter_template/public/config.dart';
void main() {
   

  var configuredApp = new ENV(
    appName: 'app 名称', // 项目名称 或者 app 名称
    envName: 'dev',		// 环境变量
    baseUrl: 'https://www.dev.com/', // 接口基础地址
    child: new MyApp(),
  );

  runApp(configuredApp