Image of Jose Barrientos is Unsplash

Introduction

Flutter features a built-in solution to talk with the underlying platform: the so-called methodology 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 benefit from 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 should do all of the heavy lifting ourselves and entry the operate natively utilizing methodology pipelines.

Overview

Methodology channels are simply one other kind of object offered by the Flutter API. Every channel is recognized by its Titleso any communication “bridge” between Flutter and the native platform will need to have a Distinctive identifier.

That is why we often 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";

knowledge alternate

Methodology channels will be seen as a direct knowledge stream with the native working system, permitting us to invoke strategies and ship or retrieve info.

All knowledge exchanged by means of methodology channels is shipped 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 methodology pipelines, the Flutter framework and its underlying platform observe a consumer server structure.

Essentially the most frequent situation is when:

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

Nevertheless, we are able to additionally configure the channel to alternate the roles performed by either side.

mission settings

Along with the dart recordsdata in our software, when utilizing methodology channels, we might want to add Android and/or ios native code like this, each 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 the Flutter facet, create a technique channel
4. On the Flutter facet, use the above object to invoke native operation

The steps required to get a technique pipeline up and operating 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 technique pipeline to retrieve knowledge in regards to the climate forecast.

1. Native Aspect: Implementation

To get began, we’ll outline a category known as “OpenWeatherService“, chargeable 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 knowledge...


        

2. Native facet: set the entry level

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

To do this, we should:

• register 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 mission is the “MainActivity.configureFlutterEngine()” methodology. So each registration and binding should be performed inside that methodology:

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, consequence ->

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

The tactic channel invocation should be carried out on the Android UI Threadso we have to wrap the above snippet with some code for dealing with threads:

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

   // Pressure invocation on UI thread     
   android.os.Handler(
      android.os.Looper.getMainLooper()).publish 
         //XXX: prev methodology channel code goes right here 
      )

3. Flutter facet: create a technique channel

As talked about above, the Flutter framework consists of the “ChannelMethod” knowledge kind. Situations of this class signify 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 will wrap the operation in a manufacturing facility methodology:

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

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

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

 ultimate channel = create();

4. Flutter facet: native methodology 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 methodology title we wish to execute
• the message we wish to go over to the native facet. That is only a JSON object containing key-value pairs with the values ​​wanted to carry out the operation

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

And that might be all! Our methodology pipeline is now prepared to speak with the underlying platform.

pattern code

As normal, try this repository to entry the supply code. Write to you subsequent time!

https://github.com/begomez/FlutterForecast

References:

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