Flutter插件開發

Flutter插件開發

建立插件目錄

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

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

經過上面命令,建立一個名爲demo的plugin模板, 並生成如下目錄結構java

目錄結構

- android // 插件相關 Android 代碼
- ios // 插件相關 iOS 代碼
- lib // 插件相關 Dart 代碼
- example // 示例項目, 用於調試當前開發的插件
- pubspec.yaml // 插件配置文件
複製代碼

example目錄

example目錄, 是一個示例項目, 用於調試當前開發的插件android

在example/lib/main.dart中, 默認生成一些示例代碼. 代碼以下:ios

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, 也就是咱們寫的插件代碼git

lib目錄

lib目錄, 主要用來存放, 開發的插件所須要的dart代碼github

在lib/demo.dart, 中能夠找到默認生成的示例代碼, 代碼以下:swift

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的方法.bash

MethodChannel

flutter與原生的交互, 能夠經過MethodChannel來實現, MethodChannel是雙向的, 經過它能夠在flutter中調用原生代碼, 也能夠在原生代碼調用flutter代碼app

ios目錄

ios目錄, 主要用來存放, 開發的插件所須要的iOS代碼async

在ios目錄中, ios/Classes/DemoPlugin.m, 中能夠找到getPlatformVersion對應的原生代碼, 代碼以下:ide

#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…

相關文章
相關標籤/搜索