Flutter Mobile Development · Pelajaran

Platform Channels (MethodChannel)

Berkomunikasilah dengan kode Android native (Kotlin/Java) dan iOS native (Swift/Objective-C) menggunakan Platform Channels untuk fitur khusus platform.

Platform Channels (MethodChannel) adalah pelajaran Flutter Mobile Development gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Flutter Mobile Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Flutter Mobile Development mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Platform Channels: Bridging Native

Welcome to Platform Channels! Sometimes, your Flutter app needs to access features specific to the underlying mobile platform (Android or iOS) that aren't available directly in Flutter or Dart.

This is where Platform Channels come in. They act as a bridge, allowing your Dart code to communicate with native code written in Kotlin/Java for Android or Swift/Objective-C for iOS.

How MethodChannel Works

Platform Channels use a system called MethodChannel to send messages between Flutter and the native platform. Think of it as a two-way street:

Flutter sends method calls to the native side.
Native code executes the method and sends a result back to Flutter.

Messages are sent asynchronously, ensuring your UI remains responsive.

Flutter: Creating MethodChannel

On the Flutter (Dart) side, you create a MethodChannel instance. The key is to use a unique string identifier, often called the 'channel name', which must be the same on both Flutter and native sides.

Let's set up a channel to get device information:

import 'package:flutter/services.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // Define the MethodChannel with a unique name
  static const platform = MethodChannel('com.example.app/device');
  String _deviceModel = 'Unknown';

  Future<void> _getDeviceModel() async {
    // Implementation to invoke native method will be added
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Platform Channel Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Device Model: $_deviceModel'),
            ElevatedButton(
              onPressed: _getDeviceModel,
              child: Text('Get Device Model'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: HomePage()));
}

Flutter: Invoking Native Methods

To call a native method, use platform.invokeMethod(). This call is asynchronous and returns a Future. You'll await its result to get the data from the native side.

We'll update our _getDeviceModel method:

import 'package:flutter/services.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  static const platform = MethodChannel('com.example.app/device');
  String _deviceModel = 'Unknown';

  Future<void> _getDeviceModel() async {
    String deviceModel;
    try {
      // Invoking the native method 'getDeviceModel'
      final String result = await platform.invokeMethod('getDeviceModel');
      deviceModel = result; // The result from native is a String
    } on PlatformException catch (e) {
      // Catch errors sent back from the native side
      deviceModel = "Failed to get model: '${e.message}'.";
    }
    setState(() {
      _deviceModel = deviceModel;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Platform Channel Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Device Model: $_deviceModel'),
            ElevatedButton(
              onPressed: _getDeviceModel,
              child: Text('Get Device Model'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: HomePage()));
}

Flutter: Sending Data to Native

You can also pass arguments to native methods. These arguments are sent as a Map, allowing you to include various data types.

Let's create a new method to get a 'custom' device model with a prefix and suffix:

import 'package:flutter/services.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  static const platform = MethodChannel('com.example.app/device');
  String _customModel = 'Unknown';

  Future<void> _getCustomModel(String prefix) async {
    String customModel;
    try {
      // Invoking with arguments: a Map
      final String result = await platform.invokeMethod(
        'getCustomModel',
        {'prefix': prefix, 'suffix': 'v1'}
      );
      customModel = result;
    } on PlatformException catch (e) {
      customModel = "Failed to get custom model: '${e.message}'.";
    }
    setState(() {
      _customModel = customModel;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Platform Channel Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Custom Model: $_customModel'),
            ElevatedButton(
              onPressed: () => _getCustomModel('MyApp'),
              child: Text('Get Custom Model'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: HomePage()));
}

Android (Kotlin): Setting Up Channel

On the Android side, you'll set up the MethodChannel in your MainActivity.kt file. This is where you'll define how to handle incoming method calls from Flutter.

Ensure your channel name matches the one in your Flutter code.

package com.example.coddy_app

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel

class MainActivity: FlutterActivity() {
    private val CHANNEL = "com.example.app/device"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler {
            // This block will execute when Flutter invokes a method
            call, result ->
            // Logic to handle 'call' and respond using 'result'
        }
    }
}

Android (Kotlin): Handling Calls

Inside the setMethodCallHandler, you check the call.method string to identify which method Flutter is trying to invoke. You can also access arguments using call.argument().

Use result.success() to send data back or result.notImplemented() if the method isn't handled.

package com.example.coddy_app

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
import android.os.Build // Import for device info

class MainActivity: FlutterActivity() {
    private val CHANNEL = "com.example.app/device"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler {
            call, result ->
            if (call.method == "getDeviceModel") {
                val model = Build.MODEL // Get device model
                result.success(model) // Return success to Flutter
            } else if (call.method == "getCustomModel") {
                val prefix = call.argument<String>("prefix") ?: ""
                val suffix = call.argument<String>("suffix") ?: ""
                val customModel = "$prefix-${Build.MODEL}-$suffix"
                result.success(customModel)
            }
            else {
                result.notImplemented() // Indicate method not found
            }
        }
    }
}

iOS (Swift): Setting Up Channel

For iOS, you'll typically configure the MethodChannel in your AppDelegate.swift file. Similar to Android, the channel name must match the Flutter side.

The setup involves getting the FlutterViewController and creating a FlutterMethodChannel.

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
    let deviceChannel = FlutterMethodChannel(name: "com.example.app/device",
                                                  binaryMessenger: controller.binaryMessenger)
    deviceChannel.setMethodCallHandler({ // Set up handler for incoming calls
      (call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
      // Logic to handle 'call' and respond using 'result'
    })

    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

iOS (Swift): Handling Calls

In Swift, you use a switch statement or if/else if to check call.method. Arguments are accessed via call.arguments, which is typically a [String: Any] dictionary.

Use result() with the value for success or FlutterMethodNotImplemented for unhandled methods.

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
    let deviceChannel = FlutterMethodChannel(name: "com.example.app/device",
                                                  binaryMessenger: controller.binaryMessenger)
    deviceChannel.setMethodCallHandler({ 
      (call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
      if call.method == "getDeviceModel" {
        let model = UIDevice.current.model // Get device model
        result(model) // Return success to Flutter
      } else if call.method == "getCustomModel" {
        if let args = call.arguments as? [String: Any],
           let prefix = args["prefix"] as? String,
           let suffix = args["suffix"] as? String {
           let customModel = "\(prefix)-\(UIDevice.current.model)-\(suffix)"
           result(customModel)
        } else {
           result(FlutterError(code: "INVALID_ARGUMENTS", message: "Arguments missing or invalid", details: nil))
        }
      }
      else {
        result(FlutterMethodNotImplemented)
      }
    })

    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Handling Native Errors

It's crucial to handle errors from the native side gracefully. Native code can send back an error using result.error() (Android) or FlutterError() (iOS).

Flutter catches these as a PlatformException, which you can handle in a try-on block, as shown in our Flutter invocation examples.

package com.example.coddy_app

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
import android.os.Build

class MainActivity: FlutterActivity() {
    private val CHANNEL = "com.example.app/device"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler {
            call, result ->
            if (call.method == "getCustomModel") {
                val prefix = call.argument<String>("prefix")
                if (prefix == null || prefix.isEmpty()) {
                    // Sending an error back to Flutter
                    result.error("MISSING_PREFIX", "Prefix argument is required.", null)
                } else {
                    val suffix = call.argument<String>("suffix") ?: ""
                    val customModel = "$prefix-${Build.MODEL}-$suffix"
                    result.success(customModel)
                }
            }
            // ... other methods
            else { result.notImplemented() }
        }
    }
}

Platform Channel Check

Test your understanding of Flutter's Platform Channels.

Recap: Bridging the Gap

Great job! You've learned how to use Platform Channels to extend your Flutter app's capabilities by interacting with native platform-specific features.

You create a MethodChannel in Flutter and on each native platform (Android/iOS).
Flutter uses invokeMethod() to call native functions.
Native code handles these calls and returns results or errors.

This powerful technique ensures your Flutter apps are never limited by what the framework provides directly!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Platform Channels (MethodChannel)” gratis?

Ya — teks lengkap “Platform Channels (MethodChannel)” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Flutter Mobile Development, upgrade ke CoddyKit PRO. Kursus Flutter Mobile Development mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Platform Channels (MethodChannel)”?

Berkomunikasilah dengan kode Android native (Kotlin/Java) dan iOS native (Swift/Objective-C) menggunakan Platform Channels untuk fitur khusus platform. Kamu berlatih Flutter Mobile Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Flutter Mobile Development?

Tidak diperlukan pengalaman sebelumnya. Flutter Mobile Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Platform Channels (MethodChannel)” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Flutter Mobile Development ini?

Ya. Setiap pelajaran Flutter Mobile Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Flutter Mobile Development