最近发现AGC上部分服务开始支持第三方框架了，其中包括Flutter，所以就小试牛刀试着在远程配置上实验了一把。

## 集成步骤
1. 安装flutter环境

a) 下载Flutter sdk包，地址：https://flutter.dev/docs/get-started/install/windows。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164737785.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

将压缩包解压到任意文件夹，例如D:\Flutter

b) 将Flutter添加到环境变量中，此处我添加的Path为D:\Flutter\flutter_windows_1.22.2-stable\flutter\bin。

c)  在Android Studio中点击“File-Settings-Plugins”，下载Flutter和Dart插件，重启Android Studio使插件生效。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164745824.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

2. 开通服务&创建工程

a) 在AGC创建Android项目并开通远程配置服务。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164753103.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

b) 在远程配置中添加如下配置项。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164758787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

c)  在Android Studio中点击“File-New-New Flutter Project…”，新建Flutter工程。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164805926.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

d) 在AGC“项目设置”页面，找到应用菜单下载agconnect-services.json文件。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164810572.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

e) 将agconnect-services.json文件放入如下图目录中的位置。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164817478.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

f) 在应用级build.gradle文件中作如下maven仓和远程配置插件配置。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164822163.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

g) 打开Flutter项目android/app文件夹下的build.gradle文件，添加编译依赖和AGC插件地址。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164828741.png#pic_center)

3. 集成SDK

在pubspec.yaml文件中添加远程配置的pub依赖
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164835453.png#pic_center)

然后点击Pub get进行同步
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164839583.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

4. 基本功能

这里我实现了一个简单的demo应用以演示几个最主要的功能。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164848946.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

UI设计中，有描述为“Mode 1:Fetch And Activate Immediately”、“Mode 2:Fetch And Activate Next Time”、“Clear Data”三个按钮，可以实现如下的主要功能。

a)获取云端数据，本次生效

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164854412.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020111016490080.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

点击“Mode 1:Fetch And Activate Immediately”按钮，调用fetch后直接调用applyLastFetched来获取本次fetch到的数据。由于是立即生效，所以我们调用getMergedAll接口来将所有配置应用到本地，我们在手机上就能获取到云端的数据，点击效果如下：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164904898.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

b)获取云端数据，生效上次获取的配置

延迟生效的实现接口与立刻生效相同，只不过顺序不同：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164911206.png#pic_center)

点击“Mode 2:Fetch And Activate Next Time”按钮，会先apply和getMergedAll来应用上一次fetch的结果，再调用fetch来获取最新配置以供下次使用。

c) 清除数据

如果想要清除数据，只要点击“Clear Data”，调用clearAll接口就可以了。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164929142.png#pic_center)

d) 设置本地配置项

我们可以通过在dart文件中新建一个Map类型的参数，然后调用applyDefault接口来应用本地配置：

```java
Map defaults = {    
    'mLong': 1000,    
    'mString': 'hello world',    
    'mDouble': 3.14,    
    'mBoolean': true
};
AGCRemotConfig.instance.applyDefaults(defaults);
```

e)打包

与Android相同，只需要在Android Studio中点击运行即可

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110164935884.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

## 注意事项

与在[Android平台设置本地配置项](https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-remoteconfig-dev-guide)不同的是，Flutter无法使用xml文件来存放本地的配置项。
 
##  欲了解更多详情，请参见：
Flutter官方指导文档：
[https://flutter.dev/docs/get-started/install/windows](https://flutter.dev/docs/get-started/install/windows)

如何在Android平台集成远程配置服务：
[https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-remoteconfig-introduction](https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-remoteconfig-introduction)

---
原文链接：
[https://developer.huawei.com/consumer/cn/forum/topic/0201399745099710131?fid=0101271690375130218](https://developer.huawei.com/consumer/cn/forum/topic/0201399745099710131?fid=0101271690375130218)
作者：鼓楼赵又廷

ITPub博客

如何在Flutter中集成华为远程配置服务

最新文章