Prefácio
Dado que a pilha de tecnologia Flutter não está muito madura neste estágio, ao usar o Flutter para desenvolvimento móvel, muitas vezes precisamos usar o poder da plataforma nativa para complementar as deficiências do Flutter nesta área. Nos dois capítulos anteriores, aprendemos como empacotar projetos Flutter em AAR e integrá-los ao Yuanping dominamos as duas maneiras de interagir com o Flutter e a plataforma nativa . No entanto, em alguns cenários, esperamos que o código para nosso Flutter interagir com a plataforma nativa possa ser usado,
一次开发，多处使用semelhante aos arquivos de biblioteca, para outros projetos ou outros desenvolvedores. Uso, este é o tópico que apresentaremos neste artigoFlutter插件开发e插件如何引用到项目中
Objetivos do curso
- Aprenda como criar um novo plug-in Flutter e entender a estrutura do projeto do plug-in
- Domine como introduzir plug-ins em projetos existentes
1. Crie um novo projeto de plug-in Flutter
As etapas para criar um novo projeto de plug-in Flutter são as mesmas que para criar um novo projeto Flutter, exceto que o tipo de projeto selecionado ao criar um novo projeto é um pouco diferente.
1.1 Novo projeto
1.2 Selecione o plug-in Flutter
Depois disso, é igual à operação normal de criação de uma nova aplicação Flutter. Nomeie o projeto normalmente, selecione o caminho do projeto e outras séries de configurações de inicialização até que o projeto do plug-in seja inicializado. Os leitores conhecerão rapidamente as operações subsequentes e não há nada que exija atenção especial, por isso não colarei as imagens uma por uma.
1.3 Estrutura do projeto de plug-in
No diagrama de estrutura do projeto de plug-in abaixo, podemos ver que o projeto de plug-in Flutter é quase igual à estrutura de projeto Flutter comum, mas há um diretório de exemplo adicional. Depois que o leitor abrir o diretório de exemplo, ele encontrará que no diretório de exemplo está na verdade um projeto Flutter completo, sim, este exemplo é para nos facilitar no desenvolvimento de plug-ins para que possamos depurar se as funções desenvolvidas estão disponíveis normalmente. Se não houver problema, podemos publicá-lo ou usá-lo normalmente em outros projetos.
Os pontos de conhecimento prático do desenvolvimento de plug-ins são alcançados usando a maneira como o Flutter interage com a plataforma nativa sobre a qual falamos na lição anterior. Deixe o Flutter usar as funções do Native para concluir determinadas operações. A plug-inização é apenas chamar o operação da plataforma. A modularização do código torna mais fácil para outros projetos ou terceiros introduzirem o código posteriormente.
一次开发，多处使用Como já falamos sobre os pontos de conhecimento envolvidos no artigo anterior, não entraremos em detalhes sobre a lógica de implementação do código funcional em o plug-in aqui. Vamos analisar brevemente o projeto de plug-in Flutter usado neste curso.
Vejamos primeiro as renderizações:
No projeto do plug-in da imagem acima, implementamos a função de obtenção do número da versão do sistema e uma calculadora simples. Vamos dar uma olhada na configuração específica do projeto de plug-in.
A lógica de implementação de negócios no lado Android do projeto de plug-in:
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()
}
}
}
Como o plug-in será usado no lado do Flutter após ser desenvolvido, ou seja, ele será referenciado pelo arquivo dart, então a instrução do método definida no arquivo dart abaixo é o método fornecido ao chamador pelo plug-in em nós desenvolvemos. A seguir definimos
getplatformVersion: Obtenha o número da versão do sistema
getResult(int a, int b): Calcule a soma de dois números
Os dois métodos interagem com a plataforma por meio de methodChannel, usam o lado nativo para completar determinada lógica específica e, em seguida, retornam o resultado da execução ao chamador. Após a definição do plug-in ser concluída e importada com sucesso para o nosso projeto, podemos importar classes relevantes e referências de métodos para o projeto e usar os componentes que desenvolvemos normalmente.
Código lateral do Flutter do projeto de plug-in:
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;
}
}
Não expliquei detalhadamente a parte de interação com a plataforma aqui, pois já falamos sobre os pontos de conhecimento relevantes no artigo anterior. Caso o leitor não entenda aqui a lógica relacionada à interação com a plataforma, é recomendável lê-lo primeiro. Um artigo sobre a jornada básica do Flutter (19) O Flutter interage com a plataforma nativa.
O endereço de código completo do plug-in acima: https://github.com/xiedong11/flutter_calc_plugin.git
2. Introduzir plug-ins em projetos existentes
Podemos importar o projeto de plug-in que desenvolvemos para um projeto existente para uso.Ou , é 通过github仓库引入claro 本地引入, podemos fazer upload do projeto de plug-in desenvolvido para os pacotes dart do flutter e, em seguida, apresentá-lo com o arquivo pubspec.ymal através do número da versão e fazer upload de pacotes Dart. A configuração é relativamente problemática e limitada pelo espaço. Aqui apresentarei apenas os dois primeiros métodos. Os leitores interessados em fazer upload de pacotes Dart podem se comunicar comigo em particular ou compilarei uma postagem de blog separada para explicar isso em detalhes em um blog subsequente.
2.1 Introdução local
Conforme mostrado na imagem, coloquei o projeto do plug-in pluginno arquivo do projeto e do diretório. Podemos definir nós mesmos o nome do projeto do plug-in. Eu o defino aqui como, flutter_calc_plugindepois no arquivo yaml do projeto onde queremos para introduzir o plug-in, passamos o nome do plug-in, após importar o plug-in adicionando um caminho, você pode usar as funções do plug-in normalmente.
#本地插件引入
flutter_calc_plugin:
path: plugin/flutter_calc_plugin
2.2Introduzido através do endereço do armazém do GitHub
É relativamente simples importar através do endereço do warehouse do github. Não há necessidade de copiar o plug-in localmente. Você só precisa configurar corretamente o endereço do plug-in no arquivo yaml do projeto para importá-lo. Após concluir a configuração em ambos os sentidos, não se esqueça de executá-lo para tornar o projeto dependente flutter packages get. Sincronize-o.
#从github上引入插件依赖
flutter_calc_plugin:
git:
url:
https://github.com/xiedong11/flutter_calc_plugin.git
A propósito, deixe-me mencionar alguns detalhes aqui. Como os arquivos yaml têm requisitos muito rígidos quanto ao formato de recuo, os leitores devem prestar atenção ao recuo ao configurar referências de plug-ins ou outras bibliotecas de terceiros.
Há também uma maneira específica de usar os dois plug-ins acima. Não há uma resposta fixa para isso. Tudo depende de suas preferências pessoais e necessidades de plug-in. Por exemplo, se o seu plug-in for desenvolvido e exigir poucas modificações , então o autor recomenda usar a cotação do github ou o upload para pacotes dart não apenas tornará a estrutura do seu projeto atualizada e clara, mas também tornará o projeto mais fácil de gerenciar. No entanto, se os plug-ins que você desenvolve ainda não estiverem maduros ou precisarem frequentemente a serem alterados, é recomendável importá-los localmente. , também é conveniente depurar o código após a modificação e também elimina a necessidade de fazer upload frequente de versões de plug-ins para pacotes Dart ou github.
Há também um cenário em que o plug-in que você usa não é desenvolvido por você, mas é desenvolvido por outra pessoa a partir de pacotes github ou dart, mas o plug-in desenvolvido por ele não pode atender totalmente às suas necessidades de negócios, ou você precisa usar este plug-in. Com base na repersonalização da IU ou na adição de lógica, neste momento você também pode baixar o plug-in desenvolvido por outros para o local e, em seguida, introduzi-lo em seu projeto por meios locais e, em seguida, modificar o plug-in de acordo com o seu negócio até que seja modificado. Até que você esteja satisfeito, importe-o localmente para o projeto.
No final do artigo, poste a implementação de código específica do exemplo no diagrama gif acima para referência dos leitores:
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),
],
)),
),
);
}
}
Finalmente, todos os códigos completos deste capítulo e da coluna são os seguintes: Se os leitores ainda não entenderem, você pode baixar o código e executar um projeto você mesmo, e ponderar lentamente os detalhes específicos da implementação: Repositório de código da coluna: https:
/ /github.com/xiedong11 /flutter_app.git