Flutter原生功能桥接插件nativebrik_bridge的使用
Flutter原生功能桥接插件nativebrik_bridge的使用
在本教程中,我们将介绍如何在Flutter应用中使用nativebrik_bridge
插件来实现与原生功能的桥接。此插件可以帮助开发者快速集成原生SDK的功能,而无需手动编写复杂的原生代码。
Nativebrik Bridge SDK
文档地址
有关更多详细信息,请访问以下文档页面: https://nativebrik.com/intl/en/docs
更新SDK
要更新SDK版本,请运行以下命令:
make patch # 更新补丁版本
make minor # 更新小版本
make major # 更新主版本
这些命令会执行以下操作:
- 更新
pubspec.yaml
文件中的版本号。 - 在
CHANGELOG.md
中插入一个空模板。 - 更新
example
和e2e
目录中的pubspec.lock
文件。
使用示例
以下是完整的示例代码,展示如何在Flutter应用中使用nativebrik_bridge
插件。
示例代码
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:nativebrik_bridge/nativebrik_bridge.dart';
void main() {
runZonedGuarded(() {
WidgetsFlutterBinding.ensureInitialized();
// 初始化Nativebrik Bridge并传入API密钥
NativebrikBridge("cgv3p3223akg00fod19g");
// 捕获Flutter错误并上报
FlutterError.onError = (errorDetails) {
NativebrikCrashReport.instance.recordFlutterError(errorDetails);
};
// 捕获平台错误并上报
PlatformDispatcher.instance.onError = (error, stack) {
NativebrikCrashReport.instance.recordPlatformError(error, stack);
return true;
};
runApp(const MyApp());
}, (error, stack) {
NativebrikCrashReport.instance.recordPlatformError(error, stack);
});
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
[@override](/user/override)
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _message = "Not Found"; // 接收的消息
String _userId = "None"; // 用户ID
String _prefecture = "None"; // 用户所在地区
[@override](/user/override)
void initState() {
super.initState();
initPlatformState(); // 初始化平台状态
}
// 异步初始化平台功能
Future<void> initPlatformState() async {
if (!mounted) return;
// 创建用户对象并获取用户ID
final user = NativebrikUser();
var userId = await user.getId();
// 设置用户属性
await user.setProperties({
'prefecture': "Tokyo",
'environment': const bool.fromEnvironment('dart.vm.product')
? 'production'
: 'development',
});
// 获取用户属性
var properties = await user.getProperties();
// 配置远程配置并获取消息
final config = NativebrikRemoteConfig("cnoku4223akg00e5m630");
var variant = await config.fetch();
var message = await variant.get("message");
// 更新UI状态
setState(() {
_message = message ?? "Not Found";
_userId = userId ?? "Not Found";
_prefecture = properties?['prefecture'] ?? "Not Found";
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: NativebrikProvider( // 使用Provider管理上下文
child: Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
),
body: Column(
children: [
// 嵌入原生组件
NativebrikEmbedding("TOP_COMPONENT", height: 270,
onEvent: (event) {
print("Nativebrik Embedding Event: ${event.payload}");
}),
// 显示消息
const Text("Message:"),
Text(_message),
// 显示用户ID
const Text("User ID:"),
Text(_userId),
// 显示用户地区
const Text("Prefecture:"),
Text(_prefecture),
// 发送自定义事件按钮
ElevatedButton(
onPressed: () {
NativebrikDispatcher().dispatch(NativebrikEvent("my-event"));
},
child: const Text('dispatch custom event'),
),
],
),
),
),
);
}
}
更多关于Flutter原生功能桥接插件nativebrik_bridge的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter原生功能桥接插件nativebrik_bridge的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
nativebrik_bridge
是一个用于在 Flutter 应用中桥接原生功能的插件。它允许你在 Flutter 应用中调用原生平台(Android 和 iOS)的功能。以下是如何使用 nativebrik_bridge
插件的基本步骤:
1. 添加依赖
首先,你需要在 pubspec.yaml
文件中添加 nativebrik_bridge
插件的依赖:
dependencies:
flutter:
sdk: flutter
nativebrik_bridge: ^0.1.0 # 请使用最新版本
然后运行 flutter pub get
来获取依赖。
2. 创建桥接类
接下来,你需要创建一个桥接类来定义你希望在 Flutter 中调用的原生方法。
在 Dart 中定义方法
在 lib
目录下创建一个新的 Dart 文件,例如 native_bridge.dart
,并定义你希望调用的方法:
import 'package:flutter/services.dart';
class NativeBridge {
static const MethodChannel _channel = MethodChannel('nativebrik_bridge');
static Future<String?> getPlatformVersion() async {
final String? version = await _channel.invokeMethod('getPlatformVersion');
return version;
}
// 你可以在这里添加更多的方法
}
3. 在原生端实现方法
你需要在 Android 和 iOS 平台上实现这些方法。
Android 实现
在 android/app/src/main/kotlin/com/example/your_app/MainActivity.kt
中实现方法:
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
class MainActivity: FlutterActivity() {
private val CHANNEL = "nativebrik_bridge"
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
super.configureFlutterEngine(flutterEngine)
MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
if (call.method == "getPlatformVersion") {
result.success("Android ${android.os.Build.VERSION.RELEASE}")
} else {
result.notImplemented()
}
}
}
}
iOS 实现
在 ios/Runner/AppDelegate.swift
中实现方法:
import UIKit
import Flutter
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
let nativebrikBridgeChannel = FlutterMethodChannel(name: "nativebrik_bridge",
binaryMessenger: controller.binaryMessenger)
nativebrikBridgeChannel.setMethodCallHandler({
(call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
if call.method == "getPlatformVersion" {
result("iOS \(UIDevice.current.systemVersion)")
} else {
result(FlutterMethodNotImplemented)
}
})
GeneratedPluginRegistrant.register(with: self)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
4. 在 Flutter 中调用原生方法
现在你可以在 Flutter 应用中调用你定义的原生方法了。
import 'package:flutter/material.dart';
import 'native_bridge.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Native Bridge Example'),
),
body: Center(
child: FutureBuilder<String?>(
future: NativeBridge.getPlatformVersion(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
return Text('Platform Version: ${snapshot.data}');
}
},
),
),
),
);
}
}
5. 运行应用
最后,运行你的 Flutter 应用,你应该能够看到从原生平台返回的版本信息。
flutter run