AppGallery Connect Remote Config Flutter

Remote Configuration Cover

Introduction

Hello everyone,

In this article we will learn about AppGallery Connect Remote Config Flutter SDK.

What is Remote Config Service?

In order to develop a standout application and attain business success, it is crucial to consistently deliver users with new content and features, promptly adapt to evolving user needs and preferences, and present a distinctive user experience for diverse audiences. The Remote Configuration feature of AppGallery Connect enables you to modify the behavior and appearance of your application seamlessly online, eliminating the need for users to manually update the app. Utilizing this service empowers you to offer a personalized experience to your users promptly and efficiently.

How it is work

Remote Configuration offers cloud-based services, allowing your app to retrieve parameter values from the cloud at regular intervals by integrating the client SDK. The service verifies whether the parameter being fetched by your app has received an updated value in the cloud, and if so, it returns the new value. Using the fetched parameter values, you can implement service processing logic to dynamically alter the behavior or appearance of your app.

Remote Config Service Diagram

I will not jump into to how to create AppGallery Connect Console project in this article. You can reach from here how to do it. Follow all

After you create your project and app now it is time to enable Remote Config service. Go to Grow>Remote Config and then click use now

Enable remote config

After that now we can create a Remote parameter for our application

Create parameter

Save parameter

Set key as background and value as green

Add your agconnect-services.json under project/android/app folder

agconnect-service.json

add following repository tag to under buildscript and allProjects tag in project level build.gradle file

 maven {url 'https://developer.huawei.com/repo/'}

dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath 'com.huawei.agconnect:agcp:1.9.0.300'
    }

in pubspec.yaml file add dependency and run flutter pub get

agconnect_remote_config: ^1.9.0+300

We are ready to go

Now we will implement basic background change mechanism with help of remote config. Below code will help us lets check what it is doing.

String color="white";
  Color backColor = Color.fromARGB(255, 255, 255, 255);
  @override
  initState() {
    super.initState();
    callTitle();
  }

  callTitle() async {
    await AGCRemoteConfig.instance.fetch(intervalSeconds: 100);
    await AGCRemoteConfig.instance.applyLastFetched();
    switch(await AGCRemoteConfig.instance.getValue("background")){
      case "green":
        setState(() {
          color="green";
          backColor = Colors.green;
        });
        break;
      case "blue":
        setState(() {
          color="blue";
          backColor=Colors.blue;
        });
        break;
      default:
        setState((){
          color="white";
          backColor= Colors.white;
        });
        break;
    }
  }

changeState() async {
    await callTitle();
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AGC"),
      ),
      body: Center(
        child: Container(
          color: backColor,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Remote Config Param:$color',
              ),
              ElevatedButton(onPressed:changeState, child: Text("Change State"))
            ],
          ),
        )
      ),backgroundColor:backColor , // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

We will first fetch our config keys values. Interval seconds parameter is here for getting cloud cache within interval default is 12 hour. Set this to greater value when publishing against getting fetch throttled error that means too many local fetch.

await AGCRemoteConfig.instance.fetch(intervalSeconds: 10000);

We have to set fetched values to local cache via this code

await AGCRemoteConfig.instance.applyLastFetched();

Then we will get our background config via it is key value

await AGCRemoteConfig.instance.getValue("background")

When app is started we will get green background as we set in Remote Config service

Initial background

With below method which we call on button press event will also fetch remote config and set background of app.

changeState() async {
    await callTitle();
  }

On AGC Console now change value of background to blue and release it.

After we wait for interval seconds that we specified in fetch method we press button and TA-DA background is now blue.

After remote fetch

Conclusion

We have implemented the AGC Remote Config service from the Huawei AppGallery Console for Flutter into our app with ease since most of the hard work is handled by the SDK itself. Now, our app can provide more content without making too much effort.

Congrats if you followed this tutorial till the end and made your app more convenient for you and your users.

References

Document

Document

Document