Flutter项目配置管理插件flutter_flavor的使用

flutter_flavor

flutter_flavor 插件帮助我们为应用程序的不同实例创建构建。例如，我们可以为开发环境、生产环境和演示环境创建不同的flavor。通过这种方式，可以在发布到App Store和Google Play之前拥有应用程序的不同版本。

flutter_flavor 允许快速配置和定义每个flavor的动态变量。flavors及其名称由开发者或开发团队动态定义。在flavor配置中可以设置每个flavor的name、color以及其横幅的location。当属性name未定义或为空时，横幅将被隐藏。

你还可以独立配置横幅。上述属性是全局配置在FlavorConfig中的，但可以在FlavorBanner中更改。

Screenshot

PROD	DEV	TEST

注意 默认情况下横幅显示在BannerLocation.topStart，并且仅在配置的name属性已定义且非空时可见。

Getting Started

Adding package

在pubspec.yaml文件中添加：

dependencies:
  flutter_flavor: ^3.1.4

Importing package

在需要使用的dart文件中导入：

import 'package:flutter_flavor/flutter_flavor.dart';

Configuring

配置一个flavor如下：

FlavorConfig(
    name: "DEVELOP",
    color: Colors.red,
    location: BannerLocation.bottomStart,
    variables: {
        "counter": 0,
        "baseUrl": "https://www.example.com",
    }
);

Using variables

使用配置好的变量：

int _counter = FlavorConfig.instance.variables["counter"];

Example

下面是一个完整的示例demo，包括main.dart和app.dart两个文件的内容。

Main

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

import 'app.dart';

void main() {
  FlavorConfig(
    name: "DEVELOP",
    color: Colors.red,
    location: BannerLocation.topStart,
    variables: {
      "counter": 5,
      "baseUrl": "https://www.example2.com",
    },
  );

  runApp(const MyApp());
}

App

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

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

  @override
  Widget build(BuildContext context) {
    return FlavorBanner(
      child: 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
  State<MyHomePage> createState() => _MyHomePageState();
}

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

VSCode Configuration

在工作区中创建.vscode文件夹（如果不存在的话），然后在该文件夹内创建launch.json文件并配置内容如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "PROD-Flavor",
      "program": "[project-folder]/lib/main_prod.dart",
      "request": "launch",
      "type": "dart"
    },
    {
      "name": "DEV-Flavor",
      "program": "[project-folder]/lib/main_dev.dart",
      "request": "launch",
      "type": "dart"
    }
  ]
}

更多信息请访问：

• Debugging in Visual Studio Code
• Dart and Flutter Debugging

License

MIT License