Flutter连接管理插件flutter_pluggy_connect的使用
Flutter连接管理插件flutter_pluggy_connect的使用
Flutter Pluggy Connect SDK
Flutter绑定的我们的Pluggy Connect组件。
要求
- Dart SDK版本:
>=2.17.0 <4.0.0
- Flutter版本:
>=3.0.0
- Android: 最低SDK版本
>=19
, 编译SDK版本>=34
, AGP版本>=7.3.0
(可以使用Android Studio - Android Gradle插件升级助手帮助升级),支持AndroidX(详见AndroidX迁移以迁移现有应用) - iOS: 版本
9.0+
: 使用Swift语言,Xcode版本>=14.3
- MacOS: 版本
10.11+
: Xcode版本>=14.3
如果您的应用程序不符合这些要求,请使用1.5.0
版本。
安装
在pubspec.yaml
文件中添加依赖:
dart pub add flutter_pluggy_connect
额外的Android设置
如果您的AndroidManifest.xml
文件中还没有,请添加以下权限:
<uses-permission android:name="android.permission.INTERNET"/>
基本用法
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_pluggy_connect/flutter_pluggy_connect.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: PluggyConnect(connectToken: '<connect token>'))),
);
}
一个完整的可运行示例可以在example
文件夹中找到。
OAuth支持
要完全支持OAuth,请遵循以下指南:OAuth支持指南
配置
可用的配置参数如下表所示:
参数 | 描述 | 必须? | 类型 | 默认值 |
---|---|---|---|---|
connectToken |
您的Pluggy Connect令牌,用于访问API。 | ✅ | String |
N/A |
includeSandbox |
是否在连接选择步骤中显示沙盒连接(不适用于生产环境)。 | ❌ | bool |
false |
updateItem |
要更新的项目ID。 如果指定,模态框将直接显示要更新项目的凭据表单。 | ❌ | String |
N/A |
connectorTypes |
连接器类型列表。 如果定义,则仅列出指定连接器类型的连接器。 | ❌ | List<String> |
N/A |
connectorIds |
连接器ID列表。 如果定义,则仅列出指定连接器ID的连接器。 | ❌ | List<int> |
N/A |
countries |
国家代码列表(ISO-3166-1 alpha 2格式)。 如果定义,则仅列出指定国家的连接器。 | ❌ | List<String> |
N/A |
language |
用于显示小部件的语言ISO字符串(2个字母)。 如果未指定或所选语言不受支持,则默认为'pt' 。 |
❌ | String |
浏览器语言 |
onSuccess |
当项目成功创建/更新时执行的函数。 | ❌ | void Function(dynamic data) |
无操作 |
onError |
当加载小部件时发生一般错误或项目创建/更新状态不成功时执行的函数。 | ❌ | void Function(dynamic error) |
无操作 |
onOpen |
当小部件模态框打开时执行的函数。 | ❌ | VoidCallback |
无操作 |
onClose |
当小部件模态框关闭时执行的函数。 | ❌ | VoidCallback |
无操作 |
onEvent |
用于处理自定义用户交互事件的函数。 详情请参阅文档。 | ❌ | 自v2.0.0起:void Function(dynamic payload) 直到1.x版本: void Function(String event, dynamic metadata) |
无操作 |
selectedConnectorId |
如果定义且连接器存在,则在接受条款后,它将直接导航到连接器登录表单,跳过选择步骤。 | ❌ | int |
N/A |
有关更多信息,请参阅官方Pluggy Connect小部件文档。
示例代码
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_pluggy_connect/flutter_pluggy_connect.dart';
class HomePageState extends State<HomePage> {
bool _showPluggyConnect = false;
void _togglePluggyConnect() {
setState(() {
_showPluggyConnect = !_showPluggyConnect;
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return PluggyConnect(
includeSandbox: true,
onSuccess: (data) {
print('Success');
print(jsonEncode(data));
},
onClose: () {
print('Closed');
_togglePluggyConnect();
},
onError: (error) {
print('Error');
print(jsonEncode(error));
},
onOpen: () {
print('Opened');
},
onEvent: (payload) {
print('Event');
print(jsonEncode(payload));
},
connectToken: '<YOUR_CONNECT_TOKEN>', // 请替换为您自己的connectToken
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
[@override](/user/override)
HomePageState createState() => HomePageState();
}
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(backgroundColor: Colors.black, toolbarHeight: 1),
body: const HomePage())),
);
}
更多关于Flutter连接管理插件flutter_pluggy_connect的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter连接管理插件flutter_pluggy_connect的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何使用Flutter连接管理插件 flutter_pluggy_connect
的示例代码。需要注意的是,由于 flutter_pluggy_connect
并不是一个广泛认知的官方或流行插件,我假设它提供了基本的连接管理功能(如建立连接、发送和接收数据、关闭连接等)。如果实际插件的功能和API有所不同,请参考该插件的官方文档进行调整。
首先,确保你已经在 pubspec.yaml
文件中添加了 flutter_pluggy_connect
插件的依赖:
dependencies:
flutter:
sdk: flutter
flutter_pluggy_connect: ^x.y.z # 替换为实际版本号
然后运行 flutter pub get
来获取依赖。
接下来是一个简单的使用示例,包括初始化插件、建立连接、发送和接收数据,以及关闭连接。
import 'package:flutter/material.dart';
import 'package:flutter_pluggy_connect/flutter_pluggy_connect.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Pluggy Connect Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final FlutterPluggyConnect _pluggyConnect = FlutterPluggyConnect();
String _connectionStatus = 'Disconnected';
String _receivedData = '';
@override
void initState() {
super.initState();
initPluggyConnect();
}
void initPluggyConnect() async {
// 初始化连接(假设插件提供了这样的方法)
await _pluggyConnect.initialize();
// 设置连接状态改变的监听器
_pluggyConnect.onConnectionStateChange.listen((status) {
setState(() {
_connectionStatus = status == ConnectionStatus.connected
? 'Connected'
: 'Disconnected';
});
});
// 设置数据接收的监听器
_pluggyConnect.onMessageReceived.listen((message) {
setState(() {
_receivedData = message;
});
});
// 尝试建立连接(假设插件提供了这样的方法)
await _pluggyConnect.connect('ws://example.com/socket');
}
void sendMessage() async {
// 发送消息(假设插件提供了这样的方法)
await _pluggyConnect.sendMessage('Hello, Server!');
}
void disconnect() async {
// 关闭连接(假设插件提供了这样的方法)
await _pluggyConnect.disconnect();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Pluggy Connect Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Connection Status: $_connectionStatus'),
SizedBox(height: 16),
Text('Received Data: $_receivedData'),
SizedBox(height: 16),
ElevatedButton(
onPressed: sendMessage,
child: Text('Send Message'),
),
SizedBox(height: 16),
ElevatedButton(
onPressed: disconnect,
child: Text('Disconnect'),
),
],
),
),
);
}
}
在上面的代码中:
- 我们初始化了
FlutterPluggyConnect
实例。 - 设置了连接状态改变和数据接收的监听器。
- 尝试建立 WebSocket 连接。
- 提供了发送消息和关闭连接的方法。
- 在 UI 中显示了连接状态、接收到的数据,并提供了发送消息和关闭连接的按钮。
请注意,由于 flutter_pluggy_connect
并非一个真实存在的插件(或至少在我最后的知识更新时不是),因此上述代码中的方法名称(如 initialize
、connect
、sendMessage
、disconnect
等)和事件监听器(如 onConnectionStateChange
、onMessageReceived
)都是假设的。实际使用时,请参照 flutter_pluggy_connect
的官方文档或源代码来调整代码。