Flutter环境变量管理插件package_flutter_env的使用

特性

• 动态管理环境变量：支持在运行时动态加载和切换不同的环境变量。
• 多环境支持：支持开发、测试、生产等多个环境配置。
• 简单易用：通过简单的API即可实现对环境变量的管理。

开始使用

要开始使用该插件，请确保已经安装了package_flutter_env。可以通过以下命令将其添加到您的pubspec.yaml文件中：

dependencies:
  package_flutter_env: ^1.0.0

然后执行以下命令以获取依赖项：

flutter pub get

使用方法

1. 导入包

首先，在您的main.dart文件中导入package_flutter_env：

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

2. 初始化环境变量

在应用启动时，初始化环境变量。可以使用MIEnvConfig类来定义不同环境的配置。例如：

void main() async {
  // 初始化环境变量
  await MIEnvConfig.init({
    'development': {'baseUrl': 'https://dev.api.example.com'},
    'production': {'baseUrl': 'https://api.example.com'}
  }, defaultEnv: 'development');

  runApp(const MyApp());
}

上述代码定义了两个环境（development和production），并设置了默认环境为development。

3. 在应用中使用环境变量

可以在任何地方通过MIEnvConfig.currentEnv访问当前环境的变量。例如：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

在MyHomePage中使用环境变量：

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MIAppBarWidget(
        automaticallyImplyLeading: true,
        title: const Text(
          "MI AppBar",
          style: TextStyle(color: Colors.white),
        ),
        toolbarHeight: 56,
        leadingWidth: 50,
        centerTitle: true,
        backgroundColor: Colors.blue,
        statusBarColor: Colors.blueGrey,
        elevation: 10,
        shadowColor: Colors.black,
        //sideMargin: 10,
        shapeBorder: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            bottomRight: Radius.circular(10),
            bottomLeft: Radius.circular(10),
          ),
        ),
        onBackButtonTapped: (BuildContext context) {},
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            Text(
              'Current Base URL: ${MIEnvConfig.currentEnv['baseUrl']}', // 使用环境变量
              style: Theme.of(context).textTheme.bodyLarge,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

完整示例代码

以下是完整的示例代码，展示如何在Flutter应用中使用package_flutter_env管理环境变量：

// example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:package_flutter_env/package_flutter_env.dart';

void main() async {
  // 初始化环境变量
  await MIEnvConfig.init({
    'development': {'baseUrl': 'https://dev.api.example.com'},
    'production': {'baseUrl': 'https://api.example.com'}
  }, defaultEnv: 'development');

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MIAppBarWidget(
        automaticallyImplyLeading: true,
        title: const Text(
          "MI AppBar",
          style: TextStyle(color: Colors.white),
        ),
        toolbarHeight: 56,
        leadingWidth: 50,
        centerTitle: true,
        backgroundColor: Colors.blue,
        statusBarColor: Colors.blueGrey,
        elevation: 10,
        shadowColor: Colors.black,
        //sideMargin: 10,
        shapeBorder: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            bottomRight: Radius.circular(10),
            bottomLeft: Radius.circular(10),
          ),
        ),
        onBackButtonTapped: (BuildContext context) {},
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            Text(
              'Current Base URL: ${MIEnvConfig.currentEnv['baseUrl']}', // 使用环境变量
              style: Theme.of(context).textTheme.bodyLarge,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}