Method Channel Flutter

Method channel is a named channel for communicating with the Flutter application using asynchronous method calls.
Method calls are encoded into binary before being sent, and binary results received are decoded into Dart values.

Why do we require Method Channel?

One of the biggest challenges for mobile cross-platform frameworks is how to achieve native performance
how to help developers create different kinds of features for different devices and platforms with as little effort as possible.
In doing so, we need to keep in mind that UX should remain the same but with unique components that are specific for each particular platform (Android and iOS).

As a result, we are in a need of communication between our flutter application with native code.

The question is, how can those frameworks establish communication between the specific platform and application? The best example is Flutter’s Platform Channel.

How does it work?

Method Channel is based on the idea of sending and receiving messages without having to generate any code. The communication is asynchronous and bidirectional. In this communication, the Flutter program (the Dart-based element of the app) represents a client that sends messages to the host (Android or iOS) and waits for a response, either as a success or failure.

When the message is received on the host’s side, we can execute the necessary logic in native code (Java/Kotlin for Android or Objective-C/Swift for iOS) or call any platform-specific APIs and send a response back to the Flutter application through the channel. When channels are created, we need to be mindful of naming conventions. The name of the channel in the Flutter application needs to be the same as the one on the native side.

All MethodChannels provided by the Flutter framework guarantee FIFO ordering.

Let’s start the implementation

In this blog, we are going to learn about the basic implementation of the Method channel.

Step-1: First setup in dart side

static const methodChannelName = "com.demo.methodchannel";
//-----Name your channel-----//

1 2	static const methodChannelName = "com.demo.methodchannel"; //-----Name your channel-----//

import 'package:flutter/services.dart';

//=========Handle Deep Linking=========//
  var methodChannel = const MethodChannel(AppConstant.methodChannelName);

  Future<String> callNativeCode() async {
    try {
      var data = await methodChannel.invokeMethod('messageFunction');
      return data;
    } on PlatformException catch (e) {
      return "Failed to Invoke: '${e.message}'.";
    }
  }

import 'package:flutter/services.dart';

//=========Handle Deep Linking=========//

var methodChannel = const MethodChannel(AppConstant.methodChannelName);

Future<String> callNativeCode() async {

try {

var data = await methodChannel.invokeMethod('messageFunction');

return data;

} on PlatformException catch (e) {

return "Failed to Invoke: '${e.message}'.";

}

Step-2: Setup in android

In your MainActivity.kt

package com.webkul.flutter_project_structure


import android.app.Activity
import android.app.role.RoleManager
import android.content.ComponentName
import android.content.Context
import android.content.Intent
import android.content.pm.PackageManager
import android.os.Build
import androidx.annotation.NonNull
import androidx.annotation.RequiresApi
import io.flutter.embedding.android.FlutterFragmentActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
import webkul.opencart.mobikul.mlkit.CameraSearchActivity

class MainActivity : FlutterFragmentActivity() {
    private val EVENTS = "com.demo.methodchannel"
    var methodChannelResult: MethodChannel.Result? = null

    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(
            flutterEngine.dartExecutor.binaryMessenger,
            EVENTS
        ).setMethodCallHandler { call, result ->
            methodChannelResult = result;
            if (call.method == "messageFunction") {
                 result.success("Message From Android")
            }
        }
    }

}

package com.webkul.flutter_project_structure

import android.app.Activity

import android.app.role.RoleManager

import android.content.ComponentName

import android.content.Context

import android.content.Intent

import android.content.pm.PackageManager

import android.os.Build

import androidx.annotation.NonNull

import androidx.annotation.RequiresApi

import io.flutter.embedding.android.FlutterFragmentActivity

import io.flutter.embedding.engine.FlutterEngine

import io.flutter.plugin.common.MethodChannel

import webkul.opencart.mobikul.mlkit.CameraSearchActivity

class MainActivity : FlutterFragmentActivity() {

private val EVENTS = "com.demo.methodchannel"

var methodChannelResult: MethodChannel.Result? = null

override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {

super.configureFlutterEngine(flutterEngine)

MethodChannel(

flutterEngine.dartExecutor.binaryMessenger,

EVENTS

).setMethodCallHandler { call, result ->

methodChannelResult = result;

if (call.method == "messageFunction") {

result.success("Message From Android")

}

Step-3: Setup in iOS

In your AppDelegate.swift

import Flutter
import UIKit

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
   override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {

   let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
        let mlkitChannel = FlutterMethodChannel(name: "com.demo.methodchannel",
                                                  binaryMessenger: controller.binaryMessenger)
    mlkitChannel.setMethodCallHandler({
          (call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
        if call.method == "messageFunction"{
        result("Message From Ios")
        }
     })
  }
}

import Flutter

import UIKit

@UIApplicationMain

@objc class AppDelegate: FlutterAppDelegate {

override func application(

_ application: UIApplication,

didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?

) -> Bool {

let controller : FlutterViewController = window?.rootViewController as! FlutterViewController

let mlkitChannel = FlutterMethodChannel(name: "com.demo.methodchannel",

binaryMessenger: controller.binaryMessenger)

mlkitChannel.setMethodCallHandler({

(call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in

if call.method == "messageFunction"{

result("Message From Ios")

}

})

}

Step-4: use this function in your dart file

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Method Channel Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    callNativeCode();
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Demo Application for method channel',
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

home: const MyHomePage(title: 'Method Channel Demo'),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key, required this.title}) : super(key: key);

final String title;

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

@override

Widget build(BuildContext context) {

callNativeCode();

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

const Text(

'Demo Application for method channel',

);

}

As a result, you will receive messages according to the Host (Android, IOS).
From Ios ==> “Message From Ios”
From Android ==> “Message From Android”

Hopefully, this blog will be helpful to you. If you have any query, please write them in the comment section.

Vipul Chauhan 31 May 2022

. . .

Method Channel Flutter

Why do we require Method Channel?

How does it work?

Let’s start the implementation

Step-1: First setup in dart side

Step-2: Setup in android

Step-3: Setup in iOS

Step-4: use this function in your dart file

Hopefully, this blog will be helpful to you. If you have any query, please write them in the comment section.

Leave a Comment Cancel Reply

Message Sent!