Flutter 与原生交互入门：MethodChannel 基础使用教程

flutter create method_channel_demo
cd method_channel_demo

// Flutter 端定义（后续使用）
static const MethodChannel _methodChannel = MethodChannel('com.example.methodchannel_demo/device');
// 原生端需使用相同的名称

package com.example.methodchannel_demo

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

class MainActivity : FlutterActivity() {
    // 与 Flutter 端一致的 Channel 名称
    private val CHANNEL = "com.example.methodchannel_demo/device"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        // 创建 MethodChannel
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
            // 根据方法名处理不同的调用
            when (call.method) {
                // 处理 "getDeviceModel" 方法调用
                "getDeviceModel" -> {
                    // 获取设备型号（Android 原生 API）
                    val deviceModel = android.os.Build.MODEL
                    // 成功回调：将结果返回给 Flutter
                    result.success(deviceModel)
                }
                // 处理未定义的方法
                else -> {
                    result.notImplemented()
                }
            }
        }
    }
}

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        // 获取 FlutterViewController
        let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
        // 与 Flutter 端一致的 Channel 名称
        let channel = FlutterMethodChannel(name: "com.example.methodchannel_demo/device", binaryMessenger: controller.binaryMessenger)
        
        // 设置方法回调
        channel.setMethodCallHandler { [weak self] call, result in
            // 根据方法名处理调用
            switch call.method {
            case "getDeviceModel":
                // 获取设备型号（iOS 原生 API）
                let deviceModel = UIDevice.current.model
                // 成功回调
                result(deviceModel)
            default:
                // 未实现方法
                result(FlutterMethodNotImplemented)
            }
        }
        
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 1. 创建 MethodChannel（名称与原生端一致）
  static const MethodChannel _methodChannel =
      MethodChannel('com.example.methodchannel_demo/device');
  
  String _deviceModel = "未获取到设备型号";

  // 2. 调用原生方法获取设备型号
  Future<void> _getDeviceModel() async {
    try {
      // 发起异步调用：方法名 "getDeviceModel"，无参数（可传 null 或 Map/List）
      final String result = await _methodChannel.invokeMethod('getDeviceModel');
      setState(() {
        _deviceModel = "设备型号：$result";
      });
    } on PlatformException catch (e) {
      // 处理调用失败（如原生未实现该方法、参数错误等）
      setState(() {
        _deviceModel = "获取失败：${e.message}";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('MethodChannel 基础使用')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_deviceModel),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _getDeviceModel,
              child: const Text('获取设备型号'),
            ),
          ],
        ),
      ),
    );
  }
}

@override
void initState() {
  super.initState();
  // 监听原生发起的方法调用
  _methodChannel.setMethodCallHandler((call) async {
    switch (call.method) {
      // 处理原生调用的 "showToast" 方法
      case "showToast":
        // 获取原生传递的参数（如 Toast 内容）
        final String message = call.arguments as String;
        // 显示 Toast（需导入 fluttertoast 包，或使用 SnackBar 简化）
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text(message)),
        );
        // 返回成功结果给原生
        return "Toast 显示成功";
      default:
        throw PlatformException(code: "NOT_IMPLEMENTED", message: "方法未实现");
    }
  });
}

// 在 MainActivity 中添加按钮点击事件（示例，需手动布局或动态创建按钮）
Button button = new Button(this);
button.setText("原生调用 Flutter 显示 Toast");
button.setOnClickListener(v -> {
    // 调用 Flutter 的 "showToast" 方法，传递参数 "来自 Android 原生的调用"
    methodChannel.invokeMethod("showToast", "来自 Android 原生的调用", new MethodChannel.Result() {
        @Override
        public void success(Object result) {
            // 接收 Flutter 返回的结果
            Log.d("MethodChannel", "调用成功：" + result);
        }

        @Override
        public void error(String errorCode, String errorMessage, Object errorDetails) {
            Log.e("MethodChannel", "调用失败：" + errorMessage);
        }

        @Override
        public void notImplemented() {
            Log.w("MethodChannel", "方法未实现");
        }
    });
});
// 将按钮添加到布局
setContentView(button);

// 创建按钮并添加点击事件
let button = UIButton(type: .system)
button.setTitle("原生调用 Flutter 显示 Toast", for: .normal)
button.addTarget(self, action: #selector(callFlutterMethod), for: .touchUpInside)
button.frame = CGRect(x: 50, y: 200, width: 250, height: 44)
self.window?.rootViewController?.view.addSubview(button)

// 按钮点击事件：调用 Flutter 方法
@objc func callFlutterMethod() {
    channel.invokeMethod("showToast", arguments: "来自 iOS 原生的调用") { result in
        // 处理 Flutter 返回的结果
        if let error = result as? FlutterError {
            print("调用失败：\(error.message ?? "")")
        } else if result is NSNull {
            print("方法未实现")
        } else {
            print("调用成功：\(result ?? "")")
        }
    }
}