Flutter Mobile Development · 강의

플랫폼 채널(MethodChannel)

플랫폼별 기능을 위해 Platform Channels를 사용해 네이티브 Android(Kotlin/Java) 및 iOS(Swift/Objective-C) 코드와 통신합니다.

플랫폼 채널(MethodChannel)은(는) CoddyKit의 무료 Flutter Mobile Development 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Flutter Mobile Development 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Flutter Mobile Development 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

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!

자주 묻는 질문

“플랫폼 채널(MethodChannel)” 강의는 무료인가요?

네 — “플랫폼 채널(MethodChannel)” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Flutter Mobile Development 강의 전체를 잠금 해제할 수 있습니다. Flutter Mobile Development 강의에는 총 4개의 강의가 포함되어 있습니다.

“플랫폼 채널(MethodChannel)”에서 뭘 배우나요?

플랫폼별 기능을 위해 Platform Channels를 사용해 네이티브 Android(Kotlin/Java) 및 iOS(Swift/Objective-C) 코드와 통신합니다. 브라우저에서 직접 실행하는 실습 코드로 Flutter Mobile Development을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Flutter Mobile Development을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Flutter Mobile Development은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“플랫폼 채널(MethodChannel)” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Flutter Mobile Development 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Flutter Mobile Development 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Flutter Mobile Development(으)로 돌아가기