deep dive into the native world utilizing technique channels – Software Not Responding | Cult Tech

Picture by Joseph Barrientos on Unsplash

Introduction

Flutter features a built-in means of speaking with the underlying platform: the so-called technique channels.

However…wait a second…Is not Flutter a cross platform framework? So why do we have to go all the way down to the “native” world?

Nicely, generally we wish to reap the benefits of a sure HW function, like digicam or geolocation, and we will not discover a third-party plugin or library that fits our wants. Then we’ll must do all of the heavy lifting ourselves and entry the perform natively by utilizing technique channels.

Overview

Technique channels are simply one other sort of object supplied by the Flutter API. Every channel is recognized by its Identifyso each communication “bridge” between Flutter and the native platform should have a Distinctive identifier.

That is why we normally configure the names by combining the bundle identifier and a few suffix, for instance:

static const String PACKAGE =
"com.bgomez.flutter_weather";

static const String SUFFIX = "/openweather";

information sharing

Technique channels could be considered as a direct information stream with the native working system, permitting us to invoke strategies and ship or retrieve data.

All information exchanged over technique channels is distributed as messages: A message is only a packet with some key-value pairs mechanically serialized and deserialized by the platform.

All exchanged messages are despatched asynchronously.

System structure

When utilizing technique channels, the Flutter framework and its underlying platform comply with a shopper server structure.

The commonest situation is when:

• on the Flutter facet, we request sources (so Flutter acts as a shopper)
• on the native facet, we carry out the required operations and serve the outcome (so the native facet acts because the server)

Nevertheless, we are able to additionally configure the channel to change the roles performed by all sides.

undertaking setup

Along with the dart recordsdata in our utility, when utilizing technique channels, we’ll want so as to add Android and/or ios native code thus, every one in its corresponding folder.

workflow

1. On the native facet, implement the required code
2. On the native facet, configure the native “entry level” class
3. On Flutter’s facet, create a way channel
4. On the Flutter facet, use the above object to invoke native operation

The steps required to get a way channel up and working are the identical for Android and iOS, however the implementation particulars change on the native facet.

The next sections take the native Android implementation for example, implementing a way channel to retrieve climate forecast information.

1. Native facet: implementation

To start with, we are going to outline a category known as “OpenWeatherService“, liable for retrieving the climate forecast from a distant server. The category implementation makes use of Kotlin coroutines:

object OpenWeatherService {
    val URL = "api.openweathermap.org"

    droop enjoyable getForecast(
appId: String, 
lat: Double, 
lon: Double) : String 

... 
//XXX: hit some API and get climate information...


        

2. Native facet: configure the entry level

After that, we’ll “hook” the above service class, in order that its strategies could be accessed from the native Android app.

To try this, we should:

• register the title of the operations we wish to entry
• Hyperlink every of those names to the corresponding implementation of the operation inside the category

In Flutter, the entry level for the underlying Android undertaking is the “MainActivity.configureFlutterEngine()” technique. So each the registration and the binding have to be accomplished inside that technique:

non-public val CHANNEL = "com.bgomez.flutter_weather"
non-public val SUFFIX = "/openweather"
non-public val GET_CURRENT = "getCurrentWeather"
non-public val GET_FORECAST = "getForecast"
 
override enjoyable configureFlutterEngine(
   @NonNull flutterEngine: FlutterEngine) 
   tremendous.configureFlutterEngine(flutterEngine)         
 
   MethodChannel(
      binaryMessenger, 
      "$CHANNEL$SUFFIX")
      .setMethodCallHandler  name, outcome ->

      // CURRENT WEATHER
      if (name.technique == GET_CURRENT) 
         val res = 
            OpenWeatherService
               .getCurrentWeather(appId, lat, lon)
         outcome.success(res)
                   
      // 24H FORECAST
       else if (name.technique == GET_FORECAST)     
         val res= 
            OpenWeatherService
               .getForecast(appId, lat, lon)
         outcome.success(res)
      
   

The invocation of the strategy channel have to be accomplished within the Android UI Threadso we have to wrap the above snippet with some thread dealing with code:

override enjoyable configureFlutterEngine(
   @NonNull flutterEngine: FlutterEngine) 
   tremendous.configureFlutterEngine(flutterEngine)

   // Drive invocation on UI thread     
   android.os.Handler(
      android.os.Looper.getMainLooper()).submit 
         //XXX: prev technique channel code goes right here 
      )

3. Flutter facet: create a way channel

As talked about above, the Flutter framework consists of the “ChannelMethod” information sort. Situations of this class characterize a communication bridge between Flutter and native:

A channel is created straight by calling the category constructor and passing its title as a parameter. We are able to wrap the operation in a manufacturing facility technique:

  static const String PACKAGE ="...";
  static const String SUFFIX = "/climate";

  MethodChannel create() 
    return MethodChannel("$PACKAGE$SUFFIX");
  

After that, we use the above perform to create our occasion:

 closing channel = create();

4. Flutter facet: native technique invocation utilizing MethodChannel

Final however not least, we have to invoke operations on the underlying platform utilizing the “MethodChannel.invokeMethod()“, which takes as parameters:

• the native technique title we wish to run
• the message we wish to transfer to the native facet. That is only a JSON object containing key-value pairs with the values ​​wanted to carry out the operation

closing json = 
await channel
.invokeMethod(
      "getForecast", 
      
        "lat": settings.metropolis.geo.lat,
        "lon": settings.metropolis.geo.lon,
        "appId": settings.appId
      );

And that may be all! Our technique channel is now prepared to speak with the underlying platform.

pattern code

As standard, take a look at this repository to entry the supply code. Write to you subsequent time!

https://github.com/begomez/FlutterForecast

References:

https://flutter.dev/docs/improvement/platform-integration/platform-channels