Flutter多环境配置插件sa_flutter

Flutter多环境配置插件sa_flutter_flavor的使用

SA Flutter Flavors

是的，又一个基于“口味”的包，抱歉。

该插件用于创建Flutter应用的不同版本（仅限Dart代码，不适用于特定于操作系统的应用）。它允许为每个“口味”定义属性，并提供了一个名为FlavorBanner的视觉指示器来显示当前运行的口味。

底部左下角标志
顶部左上角标志
底部右下角标志
顶部右上角标志

特性

Flavor Banner
可以改变标志的颜色
可以改变标志的文本
可以改变标志的位置
Flavor属性

开始使用

要开始使用，只需将该包添加到你的主pubspec.yaml文件中。

使用方法

该插件的目的是允许维护和运行应用程序的不同版本。例如，你可能希望将开发或测试应用程序连接到一组与生产应用程序不同的端点。这可以通过设置应用程序各种“口味”的属性来实现。

为了使这个过程尽可能简单，只需要为每个口味设置不同的lib/main.dart文件。在这些文件中进行所有的口味更改，然后你可以保持其余部分的应用程序相同，这意味着对于每个口味来说，必须更少的自定义代码/维护。

例如：

lib/main_dev.dart （开发口味）
lib/main_test.dart （测试口味）
lib/main.dart （生产口味）

以下是一些简单的示例，或者你可以查看/example文件夹中的详细用法，其中口味由Riverpod提供商跟踪。

main_dev.dart (我们的开发口味)

这将在应用上添加一个绿色标记，并带有标题“DEV”。

import 'package:flavours/app.dart';
import 'package:flutter/material.dart';
import 'package:sa_flutter_flavor/sa_flutter_flavor.dart';

void main() {
  runApp(App(
    flavor: FlavorConfig(
        name: "DEV",
        color: Colors.green,
        attributes: {'title': "Development App"}),
  ));
}

main_test.dart (我们的测试口味)

这将在应用上添加一个红色标记，并带有标题“TEST”。

import 'package:flavours/app.dart';
import 'package:flutter/material.dart';
import 'package:sa_flutter_flavor/sa_flutter_flavor.dart';

void main() {
  runApp(App(
    flavor: FlavorConfig(
        name: "TEST",
        color: Colors.red,
        attributes: {'title': "Test App"}),
  ));
}

main.dart (我们的生产口味)

这不会显示口味标志，因为它被标记为生产口味。

import 'package:flavours/app.dart';
import 'package:flutter/material.dart';
import 'package:sa_flutter_flavor/sa_flutter_flavor.dart';

void main() {
  runApp(App(
    flavor: FlavorConfig(
        name: "PROD",
        isProduction: true,
        attributes: {'title': "My App"}),
  ));
}

这些应该是所需的唯一口味不同的文件。你只需在每个文件中添加更多的属性，以便在每个“口味”中需要任何差异时使用。最后，app.dart文件负责处理口味并显示标志。

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

class App extends StatelessWidget {
  final FlavorConfig flavor;
  const App({super.key, required this.flavor});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp(
      title: flavor.attributes['title'],
      debugShowCheckedModeBanner: true,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FlavorBanner(
          bannerConfig: flavor.banner,
          child: const AppMain()),
    );
  }
}

完整示例

下面是一个完整的示例，展示了如何使用sa_flutter_flavor插件来配置不同口味的应用程序。

main.dart (生产口味)

import 'package:example/src/app/app.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:sa_flutter_flavor/sa_flutter_flavor.dart';

/// 这是生产版本的应用程序
void main() {
  runApp(ProviderScope(
      child: App(
    flavor: FlavorConfig(
        name: "PROD", isProduction: true, attributes: {'title': "Prod App"}),
  )));
}

更多关于Flutter多环境配置插件sa_flutter_flavor的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 1楼

更多关于Flutter多环境配置插件sa_flutter_flavor的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter项目中使用sa_flutter_flavor插件进行多环境配置的示例代码和配置步骤。sa_flutter_flavor插件允许你轻松地为Flutter应用配置多个构建变体（如开发、测试、生产等），每个变体可以有不同的配置，比如API端点、图标等。

步骤 1: 添加依赖

首先，在你的pubspec.yaml文件中添加sa_flutter_flavor依赖：

dependencies:
  flutter:
    sdk: flutter
  # 其他依赖...

dev_dependencies:
  flutter_test:
    sdk: flutter
  # 其他开发依赖...
  sa_flutter_flavor: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

步骤 2: 配置`flavor_config.dart`

在你的项目根目录下创建一个flavor_config.dart文件，并定义你的构建变体配置：

import 'package:sa_flutter_flavor/sa_flutter_flavor.dart';

class Flavors extends FlavorConfig {
  @override
  Map<String, Map<String, dynamic>> getFlavors() {
    return {
      'dev': {
        'app_name': 'MyApp Dev',
        'android': {
          'applicationIdSuffix': '.dev',
          'versionNameSuffix': '-dev',
        },
        'ios': {
          'bundleIdentifierSuffix': '.Dev',
        },
        'api_url': 'https://dev.api.example.com',
      },
      'prod': {
        'app_name': 'MyApp',
        'android': {
          'applicationIdSuffix': '',
          'versionNameSuffix': '',
        },
        'ios': {
          'bundleIdentifierSuffix': '',
        },
        'api_url': 'https://api.example.com',
      },
    };
  }
}

步骤 3: 更新`pubspec.yaml`以包含flavor配置

在pubspec.yaml文件中添加对flavor_config.dart的引用：

flutter:
  # 其他Flutter配置...
  plugins:
    - sa_flutter_flavor:
        class_name: Flavors

步骤 4: 更新Android和iOS项目配置

Android

在android/app/build.gradle文件中，确保你有以下配置：

android {
    // ...
    flavorDimensions "version"
    productFlavors {
        dev {
            dimension "version"
            // 这里不需要设置applicationIdSuffix等，因为sa_flutter_flavor会自动处理
        }
        prod {
            dimension "version"
        }
    }
}

iOS

在ios/Runner/Info.plist中，确保你有一个占位符用于bundle identifier的后缀：

<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)$(FLAVOR_SUFFIX)</string>

然后，在ios/Podfile中，添加对flavor的支持：

platform :ios, '10.0'

# ...

target 'Runner' do
  use_frameworks!
  
  # Flutter Pod
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))

  # 添加flavor配置
  post_install do |installer|
    installer.pods_project.targets.each do |target|
      flavor_suffix = installer.pod_file.target_definitions['Runner']['ios'].build_configurations.find { |config| config.name == 'Release' }[:flavor_suffix] || ''
      target.build_configurations.each do |config|
        config.build_settings['PRODUCT_BUNDLE_IDENTIFIER'] = "$(PRODUCT_BUNDLE_IDENTIFIER)#{flavor_suffix}" unless config.build_settings['PRODUCT_BUNDLE_IDENTIFIER'].include?("$(FLAVOR_SUFFIX)")
      end
    end
  end
end

注意：你可能需要根据你的项目结构稍微调整上述代码。

步骤 5: 使用配置

在你的Flutter代码中，你可以通过读取环境变量来获取当前构建变体的配置，例如API URL：

String getApiUrl() {
  if (kDebugMode) {
    return FlavorConfig().getFlavor('dev')!['api_url'] ?? 'https://default.api.example.com';
  } else {
    return FlavorConfig().getFlavor('prod')!['api_url'] ?? 'https://default.api.example.com';
  }
}

注意：kDebugMode是Flutter内置的一个变量，用于判断当前是否处于调试模式。在实际项目中，你可能需要更复杂的逻辑来确定当前的环境。

总结

通过上述步骤，你可以在Flutter项目中轻松配置和使用多个构建变体。sa_flutter_flavor插件大大简化了这一过程，使得管理不同环境的配置变得更加方便。

Flutter多环境配置插件sa_flutter_flavor的使用