Flutter系列文章-Flutter 外掛開發

2023-08-24 12:00:35

在本篇文章中,我們將學習如何開發 Flutter 外掛,實現 Flutter 與原生平臺的互動。我們將詳細介紹外掛的開發過程,包括如何建立外掛專案、實現方法通訊、處理非同步任務等。最後,我們還將演示如何將外掛打包並行布到 Flutter 社群。

第一部分:Flutter 與原生平臺互動

在 Flutter 專案中,你可能需要與原生平臺進行互動,以實現一些 Flutter 無法直接完成的功能。這時,你可以通過開發 Flutter 外掛來實現這些功能。

  1. 建立外掛專案
    首先,建立一個新的 Flutter 外掛專案。使用 Flutter 提供的命令列工具來建立:
flutter create -t plugin my_plugin
  1. 實現方法通訊
    Flutter 外掛的核心是實現 Flutter 端和原生端之間的方法通訊。例如,我們建立一個簡單的外掛,獲取裝置的電池電量。

在 lib 資料夾中,建立 my_plugin.dart 檔案:

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

class MyPlugin {
  static const MethodChannel _channel = MethodChannel('my_plugin');

  static Future<int> getBatteryLevel() async {
    final int result = await _channel.invokeMethod('getBatteryLevel');
    return result;
  }
}

在原生端,實現方法呼叫並返回電池電量。在 android/src/main/java/com/example/my_plugin/MyPluginPlugin.java 檔案中:

package com.example.my_plugin;

import android.content.Context;
import android.os.BatteryManager;
import androidx.annotation.NonNull;
import io.flutter.embedding.engine.plugins.FlutterPlugin;
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;

/** MyPluginPlugin */
public class MyPluginPlugin implements FlutterPlugin, MethodCallHandler {
  private Context context;
  private MethodChannel channel;

  @Override
  public void onAttachedToEngine(@NonNull FlutterPluginBinding flutterPluginBinding) {
    context = flutterPluginBinding.getApplicationContext();
    channel = new MethodChannel(flutterPluginBinding.getBinaryMessenger(), "my_plugin");
    channel.setMethodCallHandler(this);
  }

  @Override
  public void onMethodCall(@NonNull MethodCall call, @NonNull Result result) {
    if (call.method.equals("getBatteryLevel")) {
      int batteryLevel = getBatteryLevel();
      result.success(batteryLevel);
    } else {
      result.notImplemented();
    }
  }

  private int getBatteryLevel() {
    BatteryManager batteryManager = (BatteryManager) context.getSystemService(Context.BATTERY_SERVICE);
    int batteryLevel = batteryManager.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY);
    return batteryLevel;
  }

  @Override
  public void onDetachedFromEngine(@NonNull FlutterPluginBinding binding) {
    channel.setMethodCallHandler(null);
  }
}
  1. 在 Flutter 介面使用外掛
    在 Flutter 介面中,使用我們的外掛獲取電池電量。在你的 Flutter 頁面中:
import 'package:flutter/material.dart';
import 'package:my_plugin/my_plugin.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BatteryLevelScreen(),
    );
  }
}

class BatteryLevelScreen extends StatefulWidget {
  @override
  _BatteryLevelScreenState createState() => _BatteryLevelScreenState();
}

class _BatteryLevelScreenState extends State<BatteryLevelScreen> {
  int batteryLevel = 0;

  @override
  void initState() {
    super.initState();
    _getBatteryLevel();
  }

  void _getBatteryLevel() async {
    int level = await MyPlugin.getBatteryLevel();
    setState(() {
      batteryLevel = level;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Battery Level'),
      ),
      body: Center(
        child: Text('Battery Level: $batteryLevel%'),
      ),
    );
  }
}

第二部分:打包和釋出外掛

  1. 打包外掛
    在開發完成外掛後,你可以將其打包成一個可供他人使用的庫。在外掛專案的根目錄中,執行以下命令:
flutter pub publish

這將會將你的外掛釋出到 Dart 包管理系統中。你需要登入自己的賬戶,然後按照提示完成釋出。

  1. 使用外掛
    其他開發者可以通過在 pubspec.yaml 中新增你的外掛來使用它:
dependencies:
  flutter:
    sdk: flutter
  my_plugin: ^0.0.1  # 修改為外掛的版本號

然後執行 flutter pub get 來安裝外掛。

總結

通過本篇文章,我們學習瞭如何開發 Flutter 外掛,實現 Flutter 與原生平臺的互動。我們掌握了外掛的建立、方法通訊和非同步任務處理。最後,我們還學會了如何打包和釋出外掛,以供其他開發者使用。

希望這篇文章能夠幫助你更深入地瞭解 Flutter 外掛開發,為你的專案提供更多可能性。如果你有任何問題或需要進一步的指導,請隨時向我詢問。