MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Flutter平台插件的开发：为iOS与Android定制功能

2022-04-143.4k 阅读

一、Flutter 平台插件基础

在 Flutter 开发中，平台插件是连接 Flutter 与原生平台（如 iOS 和 Android）的桥梁。通过平台插件，开发者可以利用原生平台的特定功能，而这些功能在 Flutter 框架中可能没有直接提供。例如，访问设备的传感器、使用特定平台的 UI 组件等。

Flutter 插件遵循一种约定俗成的结构。通常，一个插件会有一个 Flutter 端的库，用于在 Dart 代码中调用插件功能，同时在 iOS（使用 Swift 或 Objective - C）和 Android（使用 Java 或 Kotlin）端分别有对应的实现。

1.1 插件项目结构

一个典型的 Flutter 插件项目结构如下：

my_plugin/
├── android/
│   └── src/
│       └── main/
│           ├── java/
│           │   └── com/
│           │       └── example/
│           │           └── my_plugin/
│           │               └── MyPlugin.java
│           └── res/
├── example/
│   ├── android/
│   ├── ios/
│   ├── lib/
│   │   └── main.dart
│   ├── pubspec.yaml
│   └── README.md
├── ios/
│   └── Classes/
│       └── MyPlugin.m
├── lib/
│   └── my_plugin.dart
├── pubspec.yaml
└── README.md
  • android/ 目录包含 Android 平台的原生代码实现。
  • ios/ 目录包含 iOS 平台的原生代码实现。
  • lib/ 目录包含 Flutter 端调用插件功能的 Dart 代码。
  • example/ 目录是一个示例应用，展示如何在 Flutter 项目中使用该插件。

1.2 开发前准备

在开始开发插件之前，需要确保以下几点：

  • 安装并配置好 Flutter 开发环境，包括 Flutter SDK 和相应的 IDE（如 Android Studio 或 Visual Studio Code）。
  • 熟悉 Dart 语言，因为 Flutter 端的插件代码使用 Dart 编写。
  • 掌握原生平台开发语言，对于 Android 是 Java 或 Kotlin，对于 iOS 是 Swift 或 Objective - C。

二、开发 Flutter 插件的 iOS 部分

2.1 创建 iOS 插件项目

在 Flutter 插件项目的 ios/Classes/ 目录下创建 iOS 插件实现文件。通常使用 Objective - C 或 Swift 编写。

假设我们要创建一个简单的获取设备唯一标识符的插件。在 ios/Classes/ 目录下创建 MyDevicePlugin.m（Objective - C）文件：

#import "MyDevicePlugin.h"
#import <UIKit/UIKit.h>

@implementation MyDevicePlugin

+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
    FlutterMethodChannel* channel = [FlutterMethodChannel
                                     methodChannelWithName:@"com.example.my_device_plugin"
                                     binaryMessenger:[registrar messenger]];
    MyDevicePlugin* instance = [[MyDevicePlugin alloc] init];
    [registrar addMethodCallDelegate:instance channel:channel];
}

- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
    if ([@"getDeviceId" isEqualToString:call.method]) {
        UIDevice *device = [UIDevice currentDevice];
        NSString *deviceId = device.identifierForVendor.UUIDString;
        result(deviceId);
    } else {
        result(FlutterMethodNotImplemented);
    }
}

@end

在上述代码中：

  • registerWithRegistrar: 方法用于注册插件到 Flutter 引擎。它创建了一个 Flutter 方法通道，并将插件实例注册为该通道的方法调用代理。
  • handleMethodCall:result: 方法处理来自 Flutter 端的方法调用。如果接收到的方法名为 getDeviceId，则获取设备的唯一标识符并返回给 Flutter 端。

2.2 使用 Swift 实现 iOS 插件

如果使用 Swift 实现，在 ios/Classes/ 目录下创建 MyDevicePlugin.swift 文件：

import Flutter
import UIKit

public class MyDevicePlugin: NSObject, FlutterPlugin {
    public static func register(with registrar: FlutterPluginRegistrar) {
        let channel = FlutterMethodChannel(name: "com.example.my_device_plugin", binaryMessenger: registrar.messenger())
        let instance = MyDevicePlugin()
        registrar.addMethodCallDelegate(instance, channel: channel)
    }

    public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
        if call.method == "getDeviceId" {
            let device = UIDevice.current
            let deviceId = device.identifierForVendor?.uuidString
            result(deviceId)
        } else {
            result(FlutterMethodNotImplemented)
        }
    }
}

Swift 版本的代码逻辑与 Objective - C 类似，只是语法上有所不同。register(with:) 方法用于注册插件，handle(_:result:) 方法处理方法调用。

三、开发 Flutter 插件的 Android 部分

3.1 创建 Android 插件项目

在 Flutter 插件项目的 android/src/main/java/com/example/my_plugin/ 目录下创建 Android 插件实现文件。以 Java 为例，创建 MyDevicePlugin.java 文件：

package com.example.my_plugin;

import android.content.Context;
import android.provider.Settings;
import io.flutter.plugin.common.MethodCall;
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugin.common.MethodChannel.MethodCallHandler;
import io.flutter.plugin.common.MethodChannel.Result;
import io.flutter.plugin.common.PluginRegistry.Registrar;

public class MyDevicePlugin implements MethodCallHandler {
    private final Context context;

    private MyDevicePlugin(Context context) {
        this.context = context;
    }

    public static void registerWith(Registrar registrar) {
        final MethodChannel channel = new MethodChannel(registrar.messenger(), "com.example.my_device_plugin");
        MyDevicePlugin instance = new MyDevicePlugin(registrar.context());
        channel.setMethodCallHandler(instance);
    }

    @Override
    public void onMethodCall(MethodCall call, Result result) {
        if (call.method.equals("getDeviceId")) {
            String deviceId = Settings.Secure.getString(context.getContentResolver(), Settings.Secure.ANDROID_ID);
            result.success(deviceId);
        } else {
            result.notImplemented();
        }
    }
}

在这段 Java 代码中：

  • registerWith(Registrar registrar) 方法用于将插件注册到 Flutter 引擎。它创建了一个方法通道，并设置插件实例为方法调用的处理者。
  • onMethodCall(MethodCall call, Result result) 方法处理来自 Flutter 端的方法调用。当接收到 getDeviceId 方法调用时，获取 Android 设备的唯一标识符并返回给 Flutter 端。

3.2 使用 Kotlin 实现 Android 插件

如果使用 Kotlin 实现，在 android/src/main/kotlin/com/example/my_plugin/ 目录下创建 MyDevicePlugin.kt 文件：

package com.example.my_plugin

import android.content.Context
import android.provider.Settings
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.common.MethodChannel.MethodCallHandler
import io.flutter.plugin.common.MethodChannel.Result
import io.flutter.plugin.common.PluginRegistry.Registrar

class MyDevicePlugin(private val context: Context) : MethodCallHandler {
    companion object {
        @JvmStatic
        fun registerWith(registrar: Registrar) {
            val channel = MethodChannel(registrar.messenger(), "com.example.my_device_plugin")
            channel.setMethodCallHandler(MyDevicePlugin(registrar.context()))
        }
    }

    override fun onMethodCall(call: MethodCall, result: Result) {
        if (call.method == "getDeviceId") {
            val deviceId = Settings.Secure.getString(context.contentResolver, Settings.Secure.ANDROID_ID)
            result.success(deviceId)
        } else {
            result.notImplemented()
        }
    }
}

Kotlin 版本的代码实现了相同的功能，通过 registerWith 方法注册插件，onMethodCall 方法处理方法调用。

四、Flutter 端调用插件

在 Flutter 插件项目的 lib/ 目录下创建 my_device_plugin.dart 文件，用于在 Flutter 端调用插件功能：

import 'package:flutter/services.dart';

class MyDevicePlugin {
  static const MethodChannel _channel =
      MethodChannel('com.example.my_device_plugin');

  static Future<String?> getDeviceId() async {
    try {
      final String? deviceId = await _channel.invokeMethod('getDeviceId');
      return deviceId;
    } on PlatformException catch (e) {
      print("Failed to get device id: '${e.message}'");
      return null;
    }
  }
}

在上述 Dart 代码中：

  • _channel 定义了与原生平台通信的方法通道，名称与原生端创建的通道名称一致。
  • getDeviceId 方法通过 _channel.invokeMethod 调用原生端的 getDeviceId 方法，并处理可能出现的异常。

在 Flutter 应用中使用该插件，例如在 example/lib/main.dart 文件中：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My Device ID Example'),
        ),
        body: Center(
          child: FutureBuilder<String?>(
            future: MyDevicePlugin.getDeviceId(),
            builder: (BuildContext context, AsyncSnapshot<String?> snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasData) {
                  return Text('Device ID: ${snapshot.data}');
                } else {
                  return Text('Failed to get device ID');
                }
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }
}

上述代码通过 FutureBuilder 异步获取设备唯一标识符，并在 UI 上显示结果。

五、处理复杂功能和数据传递

5.1 传递复杂数据结构

在实际开发中，可能需要在 Flutter 与原生平台之间传递复杂的数据结构，如 JSON 对象或列表。

在 iOS 端（以 Swift 为例），假设要传递一个包含设备信息的字典：

public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
    if call.method == "getDeviceInfo" {
        let device = UIDevice.current
        let deviceInfo = [
            "name": device.name,
            "systemVersion": device.systemVersion,
            "model": device.model
        ] as [String : Any]
        result(deviceInfo)
    } else {
        result(FlutterMethodNotImplemented)
    }
}

在 Android 端（以 Kotlin 为例）：

override fun onMethodCall(call: MethodCall, result: Result) {
    if (call.method == "getDeviceInfo") {
        val deviceInfo = mapOf(
            "name" to Build.MODEL,
            "systemVersion" to Build.VERSION.RELEASE,
            "model" to Build.MANUFACTURER
        )
        result.success(deviceInfo)
    } else {
        result.notImplemented()
    }
}

在 Flutter 端：

class MyDevicePlugin {
  static const MethodChannel _channel =
      MethodChannel('com.example.my_device_plugin');

  static Future<Map<String, dynamic>?> getDeviceInfo() async {
    try {
      final Map<String, dynamic>? deviceInfo =
          await _channel.invokeMethod('getDeviceInfo');
      return deviceInfo;
    } on PlatformException catch (e) {
      print("Failed to get device info: '${e.message}'");
      return null;
    }
  }
}

在 Flutter 应用中显示设备信息：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My Device Info Example'),
        ),
        body: Center(
          child: FutureBuilder<Map<String, dynamic>?>(
            future: MyDevicePlugin.getDeviceInfo(),
            builder: (BuildContext context, AsyncSnapshot<Map<String, dynamic>?> snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasData) {
                  final deviceInfo = snapshot.data!;
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Name: ${deviceInfo['name']}'),
                      Text('System Version: ${deviceInfo['systemVersion']}'),
                      Text('Model: ${deviceInfo['model']}'),
                    ],
                  );
                } else {
                  return Text('Failed to get device info');
                }
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }
}

5.2 处理异步操作

有些原生功能可能是异步的，例如读取文件或进行网络请求。在这种情况下，需要在原生端和 Flutter 端正确处理异步操作。

在 iOS 端（以 Swift 为例），假设进行一个异步的网络请求：

import Foundation
import Flutter

public class MyNetworkPlugin: NSObject, FlutterPlugin {
    public static func register(with registrar: FlutterPluginRegistrar) {
        let channel = FlutterMethodChannel(name: "com.example.my_network_plugin", binaryMessenger: registrar.messenger())
        let instance = MyNetworkPlugin()
        registrar.addMethodCallDelegate(instance, channel: channel)
    }

    public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
        if call.method == "fetchData" {
            let url = URL(string: "https://example.com/api/data")!
            let task = URLSession.shared.dataTask(with: url) { data, response, error in
                guard let data = data, error == nil else {
                    result(FlutterError(code: "NETWORK_ERROR", message: error?.localizedDescription, details: nil))
                    return
                }
                if let json = try? JSONSerialization.jsonObject(with: data, options: []) {
                    result(json)
                } else {
                    result(FlutterError(code: "PARSE_ERROR", message: "Failed to parse JSON", details: nil))
                }
            }
            task.resume()
        } else {
            result(FlutterMethodNotImplemented)
        }
    }
}

在 Android 端（以 Kotlin 为例）：

import android.os.AsyncTask
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.common.MethodChannel.Result
import io.flutter.plugin.common.PluginRegistry.Registrar
import java.io.BufferedReader
import java.io.InputStreamReader
import java.net.HttpURLConnection
import java.net.URL

class MyNetworkPlugin(private val context: Context) : MethodCallHandler {
    companion object {
        @JvmStatic
        fun registerWith(registrar: Registrar) {
            val channel = MethodChannel(registrar.messenger(), "com.example.my_network_plugin")
            channel.setMethodCallHandler(MyNetworkPlugin(registrar.context()))
        }
    }

    override fun onMethodCall(call: MethodCall, result: Result) {
        if (call.method == "fetchData") {
            FetchDataTask(result).execute("https://example.com/api/data")
        } else {
            result.notImplemented()
        }
    }

    private class FetchDataTask(private val result: Result) : AsyncTask<String, Void, String>() {
        override fun doInBackground(vararg urls: String): String? {
            try {
                val url = URL(urls[0])
                val connection = url.openConnection() as HttpURLConnection
                connection.requestMethod = "GET"
                val reader = BufferedReader(InputStreamReader(connection.inputStream))
                val response = StringBuilder()
                var line: String?
                while (reader.readLine().also { line = it } != null) {
                    response.append(line)
                }
                reader.close()
                return response.toString()
            } catch (e: Exception) {
                e.printStackTrace()
                return null
            }
        }

        override fun onPostExecute(response: String?) {
            if (response != null) {
                try {
                    val json = JsonParser.parseString(response)
                    result.success(json)
                } catch (e: Exception) {
                    result.error("PARSE_ERROR", "Failed to parse JSON", null)
                }
            } else {
                result.error("NETWORK_ERROR", "Failed to fetch data", null)
            }
        }
    }
}

在 Flutter 端：

class MyNetworkPlugin {
  static const MethodChannel _channel =
      MethodChannel('com.example.my_network_plugin');

  static Future<dynamic> fetchData() async {
    try {
      final dynamic data = await _channel.invokeMethod('fetchData');
      return data;
    } on PlatformException catch (e) {
      print("Failed to fetch data: '${e.message}'");
      return null;
    }
  }
}

在 Flutter 应用中使用异步网络请求：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My Network Example'),
        ),
        body: Center(
          child: FutureBuilder<dynamic>(
            future: MyNetworkPlugin.fetchData(),
            builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasData) {
                  return Text('Data: ${snapshot.data}');
                } else {
                  return Text('Failed to fetch data');
                }
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }
}

六、插件发布与维护

6.1 发布插件到 pub.dev

当插件开发完成并经过测试后，可以将其发布到 pub.dev 上，以便其他开发者使用。

  1. 确保插件项目的 pubspec.yaml 文件包含以下必要信息：
    • name：插件名称，必须是唯一的。
    • description：插件的简要描述。
    • version：插件版本号，遵循语义化版本号规则（如 1.0.0）。
    • author：作者信息。
    • homepage：插件的主页链接。
  2. 在终端中进入插件项目目录，运行 flutter pub publish 命令。按照提示操作，可能需要登录 Google 账号进行身份验证。

6.2 维护插件

随着 Flutter 框架的更新以及原生平台的变化，插件可能需要不断维护和更新。

  • 关注 Flutter 官方发布的版本更新日志，确保插件与最新的 Flutter 版本兼容。
  • 及时处理用户在使用插件过程中提出的问题和反馈，修复漏洞并添加新功能。
  • 保持对原生平台新特性的关注，适时更新插件以利用这些新特性，提升插件的功能和性能。

通过以上步骤和方法，开发者可以开发出功能强大、跨平台的 Flutter 插件，为 Flutter 应用增添更多原生平台特定的功能。无论是简单的设备信息获取，还是复杂的异步网络操作，都能通过精心设计的插件实现。同时，合理的发布与维护策略可以让插件在 Flutter 社区中得到广泛应用和认可。