Zenn
🦮

【Flutter】Pluginを自作してGithubに公開する

2022/05/10に公開
Flutter
Kotlin
Swift
tech

はじめに

今回はKotlinでAndroid，swiftでiosでプラグインの開発をします。
PluginをPub.devに公開せずに、Githubに公開して参照する方法を取ります。

flutterのpluginとは

Flutterには、Dart PackagesとPlugin Packagesの2種類のPackageがあります。
Dart Packages
Flutterフレームワークのみを使ったPackageです。Dartだけで書きます。

Plugin Packages
iOSやAndroidのネイティブAPIを活用したPackageです。Dartだけではなく、iOSならSwiftかObjective-C、AndroidならKotlinかJavaを書くことになります。

Plugin用のプロジェクトを作る

まずは下記のようなコマンドでPluginの雛型を作成します。
今回はKotlinでAndroid，swiftでiosのPluginを開発したかったので下記のコマンドを利用しました。

flutter create --org com.example --template=plugin --platforms=android,ios -i swift -a kotlin [プラグインの名前]

今回は以下のコマンドでflutter_sample_pluginという名前のプラグインを作成します。

flutter create --org com.example --template=plugin --platforms=android,ios -i swift -a kotlin flutter_sample_plugin

flutter createコマンドのオプションは下記になります。

オプション 指定できる値 補足
--org 任意の文字列
--template package または plugin
--platforms android / ios / web / linux / macos , 区切りで複数指定
--a kotlin または java defaultはkotlin
--i swift または objc defaultはswift

コードを実装する

今回はpluginを動かすことが目的なのでコードは書きませんが，実装の仕方を記述しておきます。

  • テンプレート作成時に追加されている、 example ディレクトリに移動し、AndroidとiOSをそれぞれ事前にビルドしておきます。
    exampleではデフォルトで端末のバージョンを表示するコードが書いてあります。

Android向けのコード

  • Android Studioを起動し、 [プラグイン名]/example/android/build.gradle を選択してプロジェクトを開きます。
  • プラグイン名のモジュールを開いて [プラグイン名]/java/[パッケージ名]/[プラグイン名]Plugin というファイルに実装を追加していきます。

iOS向けのコード

  • Xcodeを起動し、 [プラグイン名]/example/ios/Runner.xcworkspace を選択してプロジェクトを開きます。
  • プロジェクトナビゲータから Pods/Development Pods/hello/../../example/ios/.symlinks/plugins/hello/i os/Classes　配下のファイルに実装を追加していきます。

Android Studio, Xcode上から、exampleで自動追加されたテストアプリを実行しながら、直接プラグインのコードを修正できます。

githubにflutter_sample_pluginを公開

先ほど作成したflutter_sample_pluginをgithubにpublicで公開してください。

これでPlugin側(flutter_sample_plugin)の実装は終わりです。

Githubに公開したPluginを使ってみる

先ほど作成したflutter_sample_pluginをテストするflutter_call_sample_pluginを作っていきます。

flutter_sample_pluginプラグインをテストするアプリを作成

Pluginをテストするアプリを作っていきます。

$ flutter create flutter_call_sample_plugin
pubspec.yamlを編集

リポジトリのurlとパッケージの名前を置き換えてください。今回はflutter_sample_pluginという名前で作成しましたよね。urlには先ほどgithubに公開したであろうflutter_sample_pluginリポジトリのリンク.gitで入力してください。
私の作ったプラグインを使いたい場合はurlをurl:https://github.com/maropook/flutter_sample_plugin.gitにしてください。

pubspec.yaml
dependencies:
  flutter_sample_plugin:
    git:
      url: git@github.com:xxxxx/flutter_sample_plugin.git
      ref: HEAD

編集したらflutter pub upgradeしましょう。

これでflutter_sample_pluginを参照することでpub.devに公開されたPluginと同じように利用することができます。

git管理しているPlugin側を更新した場合もflutter pub upgradeで最新のものが取得できます。

main.dartを編集

main.dartを以下のように編集します。先ほど作成したプラグインflutter_sample_pluginを使用するようにしています。

main.dart
import 'package:flutter/material.dart';
import 'dart:async';

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> 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 FlutterSamplePlugin.platformVersion ??
          'Unknown platform version';
    } 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'),
        ),
      ),
    );
  }
}

作成したプラグインを使うことができました！

参考

リポジトリ

今回作成したプラグイン

https://github.com/maropook/flutter_sample_plugin

今回作成したプラグインを呼び出しているサンプル

https://github.com/maropook/flutter_call_sample_plugin

Discussion