序文
Flutter テクノロジー スタックが現段階ではあまり成熟していないという事実を考慮すると、モバイル開発に Flutter を使用する場合、この分野での Flutter の欠点を補うためにネイティブ プラットフォームの力を使用する必要があることがよくあります。 Flutter プロジェクトを AAR にパッケージ化し、それらをAAR に統合する方法を学びました。Yuanping は、Flutter とネイティブ プラットフォームと対話する 2 つの方法を習得しました。ただし、シナリオによっては、Flutter がネイティブ プラットフォームと対話するためのコードを次のようにできることを期待しています。ライブラリ ファイルと同様に、他のプロジェクトや他の開発者に使用されます
一次开发，多处使用。これは、この記事で紹介するトピックですFlutter插件开发。插件如何引用到项目中
コースの目的
- 新しい Flutter プラグインを作成する方法を学び、プラグイン プロジェクトの構造を理解する
- 既存のプロジェクトにプラグインを導入する方法をマスターする
1. 新しい Flutter プラグイン プロジェクトを作成する
新しい Flutter プラグイン プロジェクトを作成する手順は、新しいプロジェクトを作成するときに選択したプロジェクト タイプが若干異なることを除いて、新しい Flutter プロジェクトを作成する手順と同じです。
1.1 新しいプロジェクト
1.2 Flutterプラグインの選択
以降は通常のFlutterアプリの新規作成と同様に、通常通りプロジェクトに名前を付け、プロジェクトのパスを選択し、プラグインプロジェクトの初期化までの一連の初期化設定を行います。その後の操作は読者であれば一目で分かりますし、特に注意する点もないので、いちいち写真を貼り付けません。
1.3 プラグインプロジェクトの構造
以下のプラグイン プロジェクト構造図から、Flutter プラグイン プロジェクトは通常の Flutter プロジェクト構造とほぼ同じですが、追加のサンプル ディレクトリがあることがわかります。読者がサンプル ディレクトリを開いた後、次のことがわかります。 example ディレクトリの下にあるのは、実際には完全な Flutter プロジェクトです。はい、このサンプルは、プラグインの開発を容易にし、開発した機能が正常に利用できるかどうかをデバッグできるようにするためのものです。問題がなければ、公開するか、使用することができます通常は他のプロジェクトで使用されます。
プラグイン開発の実践的な知識ポイントは、前のレッスンで説明した Flutter がネイティブ プラットフォームと対話する方法を使用して達成されます。Flutter にネイティブの機能を使用して特定の操作を完了させます。プラグイン化は、単にコードのモジュール化により、後で他のプロジェクトなどでコードを導入することが容易になります。
一次开发，多处使用関連する知識ポイントについては前の記事ですでに説明したため、関数コードの実装ロジックについては、ここでは詳しく説明しません。このコースで使用される Flutter プラグイン プロジェクトを簡単に分析してみましょう。
まずレンダリングを見てみましょう。
上図のプラグインプロジェクトでは、システムのバージョン番号を取得する機能と簡単な計算機を実装しています。プラグイン プロジェクトの具体的な構成を見てみましょう。
プラグイン プロジェクトの Android 側のビジネス実装ロジック:
class FlutterCalcPlugin : MethodCallHandler {
companion object {
@JvmStatic
fun registerWith(registrar: Registrar) {
val channel = MethodChannel(registrar.messenger(), "flutter_calc_plugin")
channel.setMethodCallHandler(FlutterCalcPlugin())
}
}
override fun onMethodCall(call: MethodCall, result: Result) {
if (call.method == "getPlatformVersion") {
result.success("Android ${android.os.Build.VERSION.RELEASE}")
} else if (call.method == "getResult") {
var a = call.argument<Int>("a")
var b = call.argument<Int>("b")
result.success((a!! + b!!).toString())
} else {
result.notImplemented()
}
}
}
プラグインは開発後にFlutter側で使用すること、つまりdartファイルから参照することになるため、以下のdartファイルに定義されているメソッド文がプラグインが呼び出し元に提供するメソッドとなります。で開発しました。次のように定義します
getplatformVersion。 システムのバージョン番号を取得します
getResult(int a, int b)。 : 2 つの数値の合計を計算します。
2 つのメソッドは、methodChannel を通じてプラットフォームと対話し、ネイティブ側を使用して特定のロジックを完了し、実行結果を呼び出し元に返します。プラグイン定義が完了し、プロジェクトに正常にインポートされたら、関連するクラスとメソッド参照をプロジェクトにインポートし、自分たちで開発したコンポーネントを通常どおり使用できます。
プラグイン プロジェクトの Flutter サイド コード:
class FlutterCalcPlugin {
static const MethodChannel _channel =
const MethodChannel('flutter_calc_plugin');
static Future<String> getplatformVersion async {
final String version = await _channel.invokeMethod('getPlatformVersion');
return version;
}
/**
*计算两个数的和
*/
static Future<String> getResult(int a, int b) async {
Map<String, dynamic> map = {
"a": a, "b": b};
String result = await _channel.invokeMethod("getResult", map);
print(result+"----------aa--");
return result;
}
}
プラットフォームとの対話に関する部分については、前の記事で関連する知識ポイントについてすでに説明しているため、ここでは詳しく説明しませんでしたが、読者がプラットフォームとの対話に関するロジックを理解していない場合は、ここを読むことをお勧めします。Flutter の入門レベルの記事(19) Flutter はネイティブ プラットフォームと対話します。
上記のプラグインの完全なコード アドレス: https://github.com/xiedong11/flutter_calc_plugin.git
2. 既存のプロジェクトにプラグインを導入する
開発したプラグイン プロジェクトを既存のプロジェクトにインポートして使用することも、通过github仓库引入もちろん本地引入、開発したプラグイン プロジェクトを flutter のdart パッケージにアップロードして、バージョン番号を介して pubspec.ymal ファイルで導入することもできますdart パッケージをアップロードします。設定は比較的面倒でスペースに制限があります。ここでは最初の 2 つの方法のみを紹介します。dart パッケージのアップロードに興味のある読者は、個人的に私と連絡を取ることができます。または、別のブログ記事で説明します。詳細は次回のブログで。
2.1 現地での紹介
図に示すように、pluginプロジェクトとディレクトリ内のファイルの下にプラグイン プロジェクトを配置します。プラグイン プロジェクト名は自分で定義できます。ここでは次のように定義し、プロジェクトflutter_calc_pluginの yaml ファイル内で必要な場所に定義します。プラグインを導入するには、プラグイン名を渡します。パスを追加してプラグインをインポートすると、プラグイン内の機能が通常どおり使用できるようになります。
#本地插件引入
flutter_calc_plugin:
path: plugin/flutter_calc_plugin
2.2github ウェアハウス アドレスを通じて導入
Github ウェアハウス アドレスを使用してインポートするのは比較的簡単です。プラグインをローカルにコピーする必要はありません。プラグインをインポートするには、プロジェクトの yaml ファイルでプラグインのアドレスを正しく構成するだけです。構成の完了後どちらの方法でも、忘れずに実行してプロジェクトを依存関係にしflutter packages get、同期してください。
#从github上引入插件依赖
flutter_calc_plugin:
git:
url:
https://github.com/xiedong11/flutter_calc_plugin.git
ちなみに、ここで少し詳しく説明しますと、yaml ファイルにはインデント形式に関する非常に厳しい要件があるため、プラグイン参照やその他のサードパーティ ライブラリを設定する際には、読者はインデントに注意する必要があります。
上記 2 つのプラグインを使用する特定の方法もあります。これに対する固定された答えはありません。すべては個人の好みとプラグインのニーズによって異なります。たとえば、プラグインが開発されており、ほとんど変更が必要ない場合の場合、著者は、github から引用するか、dart パッケージにアップロードすることを使用することをお勧めします。これにより、プロジェクトの構造が更新され明確になるだけでなく、プロジェクトの管理も容易になります。ただし、開発するプラグインがまだ成熟していない場合、または頻繁に必要な場合は、変更する場合は、ローカルにインポートすることをお勧めします。変更後のコードのデバッグにも便利で、プラグインのバージョンを dart パッケージや github に頻繁にアップロードする必要もなくなります。
使用するプラグインが自分で開発したものではなく、他の人が github や dart パッケージから開発したシナリオもありますが、その人が開発したプラグインはビジネス ニーズを完全に満たすことができない、または使用する必要があるこのプラグインは、UI の再カスタマイズやロジックの追加に基づいて、現時点では、他の人が開発したプラグインをローカルにダウンロードし、ローカルの手段でプロジェクトに導入し、変更することもできます。プラグインをビジネスに合わせて修正し、満足するまでプラグインをローカルのプロジェクトにインポートします。
読者の参考のために、記事の最後に、上の GIF 図の例の具体的なコード実装を投稿してください。
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:flutter_calc_plugin/flutter_calc_plugin.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _platformVersion = 'Unknown';
String addResult = '';
TextEditingController _addNumber1Controller,_addNumber2Controller;
@override
void initState() {
super.initState();
_addNumber1Controller = TextEditingController();
_addNumber2Controller = TextEditingController();
}
Future<void> getAddResult() async {
int addNumber1= int.parse(_addNumber1Controller.value.text);
int addNumber2=int.parse(_addNumber2Controller.value.text);
String result = '';
try {
result = await FlutterCalcPlugin.getResult(addNumber2, addNumber1);
} on PlatformException {
result = '未知错误';
}
setState(() {
addResult = result;
});
}
Future<void> initPlatformState() async {
String platformVersion;
try {
platformVersion = await FlutterCalcPlugin.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('插件示例'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
MaterialButton(
color: Colors.amber,
child: Text("获取系统版本"),
onPressed: () {
initPlatformState();
},
),
Text('当前系统版本 : $_platformVersion\n'),
SizedBox(height: 30),
Text("加法计算器"),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
width: 80,
child: TextField(
controller: _addNumber1Controller,
keyboardType: TextInputType.number,
),
),
Text(" + ",style: TextStyle(fontSize: 26),),
SizedBox(
width: 80,
child: TextField(
controller: _addNumber2Controller,
keyboardType: TextInputType.number,
),
),
Text(" = ",style: TextStyle(fontSize: 26),),
],
),
SizedBox(height: 30),
MaterialButton(
color: Colors.amber,
child: Text("结果等于"),
onPressed: () {
getAddResult();
},
),
Text(addResult),
],
)),
),
);
}
}
最後に、この章とコラムの完全なコードは次のとおりです。読者がまだ理解できない場合は、コードをダウンロードして自分でプロジェクトを実行し、具体的な実装の詳細についてゆっくり検討してください: コラム コード リポジトリ: https:
/ /github.com/xiedong11 /flutter_app.git