Flutter远程配置管理插件remote_config的使用

Flutter远程配置管理插件remote_config的使用

安装

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
   remote_config: ^1.3.0

Firebase控制台

当你进入自己的Firebase项目控制台时，在左侧菜单栏中会有一个名为“Remote Config”的选项。传统上，Remote Config用于存储服务器端默认值以控制应用程序的行为和外观。此库包使Flutter开发者能够更轻松地进行操作。

示例代码

下面是一个完整的示例代码，展示了如何使用remote_config插件来获取远程配置的值。

import 'dart:async';

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_remote_config/firebase_remote_config.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

/// 高级变量
late RemoteConfig hRemoteConfig;

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

  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
        title: 'Remote Config Example',
        home: FutureBuilder<RemoteConfig>(
          future: _setupRemoteConfig(),
          builder: (_, AsyncSnapshot<RemoteConfig> snapshot) {
            Widget widget;
            if (snapshot.hasData) {
              widget = WelcomeWidget();
            } else {
              widget = const SizedBox();
            }
            return widget;
          },
        ),
      );
}

///
Future<RemoteConfig> _setupRemoteConfig() async {
  // 初始化Firebase
  await Firebase.initializeApp(
    options: const FirebaseOptions(
        apiKey: 'AIzaSyAgUhHU8wSJgO5MVNy95tMT07NEjzMOfz0',
        authDomain: 'react-native-firebase-testing.firebaseapp.com',
        databaseURL: 'https://react-native-firebase-testing.firebaseio.com',
        projectId: 'react-native-firebase-testing',
        storageBucket: 'react-native-firebase-testing.appspot.com',
        messagingSenderId: '448618578101',
        appId: '1:448618578101:web:772d484dc9eb15e9ac3efc',
        measurementId: 'G-0N1G9FLDZE'),
  );

  // 初始化RemoteConfig实例
  hRemoteConfig = RemoteConfig(fetchTimeout: 10, minimumFetchInterval: 1);
  
  // 调用initAsync()方法初始化
  await hRemoteConfig.initAsync();

  // 设置配置参数
  await hRemoteConfig.setConfigSettings(RemoteConfigSettings(
    fetchTimeout: const Duration(seconds: 10),
    minimumFetchInterval: const Duration(hours: 1),
  ));

  // 设置默认值
  await hRemoteConfig.setDefaults(<String, dynamic>{
    'welcome': 'default welcome',
    'hello': 'default hello',
  });

  return hRemoteConfig;
}

///
class WelcomeWidget extends AnimatedWidget {
  ///
  WelcomeWidget({
    super.key,
  }) : super(listenable: hRemoteConfig);

  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text('Remote Config Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(hRemoteConfig.getString('welcome')),
              const SizedBox(
                height: 20,
              ),
              const Text('Same value from the RemoteConfigValue:'),
              Text(hRemoteConfig.getValue('welcome').asString()),
              const Text('Indicates at which source this value came from:'),
              Text('${hRemoteConfig.getValue('welcome').source}'),
              const SizedBox(
                height: 20,
              ),
              const Text('Time of last successful fetch:'),
              Text('${hRemoteConfig.lastFetchTime}'),
              const Text('Status of the last fetch attempt:'),
              Text('${hRemoteConfig.lastFetchStatus}'),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          key: const Key('hRemoteConfigRefresh'),
          onPressed: () async {
            // 强制从远程服务器获取数据
            await hRemoteConfig.setConfigSettings(RemoteConfigSettings(
              fetchTimeout: const Duration(seconds: 10),
              minimumFetchInterval: Duration.zero,
            ));

            try {
              await hRemoteConfig.fetchAndActivate(throwError: true);
            } on PlatformException catch (exception) {
              // 处理异常
              if (kDebugMode) {
                print(exception);
              }
            } catch (exception) {
              if (kDebugMode) {
                print(
                    'Unable to fetch remote config. Cached or default values will be '
                    'used');
                print(exception);
              }
            }
          },
          child: const Icon(Icons.refresh),
        ),
      );
}