Flutter外掛開發

nerdMoss發表於2019-09-12
Flutter

Flutter外掛開發

建立外掛目錄

flutter create -i objc -a java --template=plugin demo

-i, 表示指定iOS的語言, objc, swift
-a, 表示指定安卓的語言, java, kotlin
複製程式碼

通過上面命令，建立一個名為demo的plugin模板, 並生成以下目錄結構

目錄結構

- android // 外掛相關 Android 程式碼
- ios // 外掛相關 iOS 程式碼
- lib // 外掛相關 Dart 程式碼
- example // 示例專案, 用於除錯當前開發的外掛
- pubspec.yaml // 外掛配置檔案
複製程式碼

example目錄

example目錄, 是一個示例專案, 用於除錯當前開發的外掛

在example/lib/main.dart中, 預設生成一些示例程式碼. 程式碼如下:

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';

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

  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion = await Demo.platformVersion;
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Text('Running on: $_platformVersion\n'),
        ),
      ),
    );
  }
}
複製程式碼

示例中的程式碼, Demo.platformVersion, 實際上是呼叫了lib目錄中, Demo類的get方法platformVersion, 也就是我們寫的外掛程式碼

lib目錄

lib目錄, 主要用來存放, 開發的外掛所需要的dart程式碼

在lib/demo.dart, 中可以找到預設生成的示例程式碼, 程式碼如下:

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

class Demo {
  static const MethodChannel _channel =
      const MethodChannel('demo');

  static Future<String> get platformVersion async {
    final String version = await _channel.invokeMethod('getPlatformVersion');
    return version;
  }
}

複製程式碼

以上程式碼, 建立了一個名字為demo的MethodChannel物件, 並提供一個get platformVersion方法, 在該方法中呼叫invokeMethod方法, 去呼叫原生程式碼中, 名字為getPlatformVersion的方法.

MethodChannel

flutter與原生的互動, 可以通過MethodChannel來實現, MethodChannel是雙向的, 通過它可以在flutter中呼叫原生程式碼, 也可以在原生程式碼呼叫flutter程式碼

ios目錄

ios目錄, 主要用來存放, 開發的外掛所需要的iOS程式碼

在ios目錄中, ios/Classes/DemoPlugin.m, 中可以找到getPlatformVersion對應的原生程式碼, 程式碼如下:

#import "DemoPlugin.h"

@implementation DemoPlugin
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
  FlutterMethodChannel* channel = [FlutterMethodChannel
      methodChannelWithName:@"demo"
            binaryMessenger:[registrar messenger]];
  DemoPlugin* instance = [[DemoPlugin alloc] init];
  [registrar addMethodCallDelegate:instance channel:channel];
}

- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
  if ([@"getPlatformVersion" isEqualToString:call.method]) {
    result([@"iOS " stringByAppendingString:[[UIDevice currentDevice] systemVersion]]);
  } else {
    result(FlutterMethodNotImplemented);
  }
}

@end
複製程式碼

android目錄

android目錄, 主要用來存放, 開發的外掛所需要的android程式碼

在android目錄中, android/src/main/java/com/example/demo/DemoPlugin.java, 中可以找到getPlatformVersion對應的原生程式碼, 程式碼如下:

package com.example.demo;

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;

/** DemoPlugin */
public class DemoPlugin implements MethodCallHandler {
  /** Plugin registration. */
  public static void registerWith(Registrar registrar) {
    final MethodChannel channel = new MethodChannel(registrar.messenger(), "demo");
    channel.setMethodCallHandler(new DemoPlugin());
  }

  @Override
  public void onMethodCall(MethodCall call, Result result) {
    if (call.method.equals("getPlatformVersion")) {
      result.success("Android " + android.os.Build.VERSION.RELEASE);
    } else {
      result.notImplemented();
    }
  }
}
複製程式碼

原生程式碼

原生程式碼中, 也都建立一個名為demo的MethodChannel物件. (與lib目中的dart程式碼中的MethodChannel名字一致).

通過註冊, 監聽該channel的回撥. 在回撥中通過判斷call.method的值, 來區分flutter中呼叫的哪個方法.

如示例中判斷是否等於getPlatformVersion, 並在當中執行對應的原生程式碼, 獲取裝置相關的系統版本.

其他

另外, 在flutter中, 如果想使用原生的檢視, 需要使用flutter的UiKitView和AndroidView.

後續我會再整理下對應的筆記, 想要了解的可以先參考下我之前寫的二維碼掃描外掛.

pub: pub.flutter-io.cn/packages/qr…

github: github.com/SiriDx/qrco…

相關文章