最近發現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)
作者：鼓樓趙又廷

如何在Flutter中整合華為遠端配置服務

相關文章