Flutter with SAP Cloud Platform SDK

Abstraction

One single mobile development language for multiple-platforms is always a dream for pass few years. We have gone through a few of different paths, such as Cordova WebView, React Native, and recently NativeScript for generating Native SDK during runtime. And recently we keep hearing the term of Flutter which has been adopted by some big companies as the cross-platform development language.

I believe there are a lot of documents have introduced how can you utilize Flutter for your cross-platform UI development. But there are a lot of areas which required to be handled platform specifically, such as client authentication, secure store, offline storage, push, and etc. SAP Cloud Mobile Service has provided native iOS & Android SDK which will address such kind of platform specific issues. It will provide you the functions of enterprise level security, online / offline OData support, connecting to SAP backend systems. This article will share with you how to enhance your Flutter application with those enterprise functions by utilizing SAP Cloud Mobile SDK on both iOS and Android platforms.

You will find this article will help you when you

• Want to use Flutter language to develop mobile application and connect to SAP backend system
• Want to achieve OData online and offline functionality for your Flutter application.
• Want to have enterprise security storage for your Flutter application

Cross-platforms development is always the hot topic. We believe that to fully address all of the problems will take some time. But we like to share with you whenever we get some ideas and also like hear your feedback.

Introduction

Flutter became a buzz word recently, especially after Google IO this year. It sounds quite promising in term of developing beautiful mobile application, supporting both Android and iOS with one single code line. And the developer stories show us that some big companies begin to develop their applications with Flutter, like BMW, Alibaba, etc.

So, as a mobile development team, what kind of help can we provide if this technology is widely adopted by the community? This will be a question we should prepare and try to answer.

To answer the above question, we look into the features our cloud SDK (Android and iOS) provided, and think OData, especially offline OData, will be our killer features. This blog is not able to answer the question, but we do want to make our hands dirty and do some preparation for the answers.

The code is share here: https://github.wdf.sap.corp/I062692/flutter_online_odata_sample

Let’s Code

Prepare the environment

• Download Android SDK 2.2.0-SNAPSHOT, and install it to make sure we can access the modules in the local maven repository;
• Setup flutter development environment (https://flutter.dev/docs/get-started/install)
• Install Android Studio, or VS Code as the editor.

Create Flutter Plugin

Run the following command to create the flutter plugin project:

flutter create -t plugin –org com.sap.cloud.flutter -a kotlin –androidx online_odata

The command will create a flutter plugin project ‘online_odata’ with ‘Kotlin’ as the Android development language and AndroidX support.

The reason we create the project with -t as ‘plugin’ is because we can add both Android and iOS code so the flutter/dart can call into. (https://flutter.dev/docs/development/packages-and-plugins/developing-packages)

Then we can go into online_odata/example folder, then

flutter run

To launch the example application in the simulator currently running. If more than one simulators are running, we need to provide ‘-d’ with the simulator ID to the above command.

Without changing anything, the generated project can run both on Android and iOS, here is the result.

Folder Structure

Before we go on, let’s look at the folder structure of the generated application to see what we need to change for this example.

ONLINE_ODATA

|__ android      //android Java/Kotlin code

|_ ios               //iOS code

|_ lib                //dart code in here.

|_ example       //an example application on how to use the plugin of ‘ONLINE_ODATA’

Since Android SDK 2.2.0-SNAPSHOT is targeting Android Studio 3.5, I did the following version changes:

ext.kotlin_version = ‘1.3.50’

com.android.tools.build:gradle:3.5.0

minSdkVersion 23

distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip

We can search the keywords above and replace them with corresponding version.

Add Android SDK Dependencies

Now let’s add Android SDK dependencies into build.gradle. The changes are in ‘online_odata/android/build.gradle’.

• add mavenLocal() so Android SDK library can be accessed;
• 2 ‘classpath’ in dependencies so we could generate OData proxy classes
• 2 ‘implementation’ at the end of the file

Add above into the ‘dependencies’ at the bottom of build.gradle. There is property ‘sapAndroidSDKVersion’, we can define it in the gradle.properties.

With the changes above, run ‘flutter run’ again, then we can find the generated proxy classes in ‘online_odata/example/build/online_data/generated/source/odata’

Build the Bridge between Flutter and Java/Kotlin

Now let’s locate ‘OnlineDataPlugin.kt’ in ‘android/src’ folder and add another ‘method call’ support.

The generated version of this file has only ‘getPlatformVersion’ support, now we add another one, ‘getCustomers’, and execute it within an ‘AsyncTask’ to avoid the error saying something like ‘network call in UI thread.’

The AsyncTask basically calls into the online OData library to retrieve the customer list and return the list in a JSON string. To make things simple, we add a ‘BasicAuthenticationHeaderInterceptor’ which hard-coded the authentication header.

Dart Code

Now we need to provide the dart support so code in ‘example’ can access ‘getCustomers’ defined above.

We add a method into ‘online_odata/lib/online_odata.dart’, as below.

Then we can modify the dart code in ‘example’ to show the customers into list view.

Add ‘FloatingActionButton’ inside ‘Scafflod’, when clicking the button, we navigate to ‘Customers’ list page, please see the source of ‘customers_widget.dart’ for details, it will populate the returned JSON data into a list.

The running screen looks like:

Summary

Before we did this test, we also spent some time on trying to re-write some of the online libraries in dart, so both Android and iOS can use the same code line. But, to fully support the features SAP Cloud Platform SDK online OData library has currently, it will need a lot of efforts, and when we talk about offline later, there might be only one option left, that is, leveraging the current offline/online OData libraries.

The example above did not touch the security part, we hard coded in the basic authentication header in a class to make the example work. But security is another killer features of cloud SDK, to make the story more interesting, we may also provide support on security part with the same approach as in the example.

Currently, the areas we touched are:

• Providing ‘flow’ framework with dart;
• Prototype an ‘ObjectCell’ widget to see how to provide fiori style widget in flutter
• Security store plugin to leverage library in Android SDK;
• Basic and OAuth flow in dart
• Firebase messaging support prototype.

Besides helping us better understand the features within our Android SDK, it may also bring more discussions about the possibilities in mobile development in the team.