Flutter原生功能桥接插件nativebrik_bridge的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter原生功能桥接插件nativebrik_bridge的使用

在本教程中,我们将介绍如何在Flutter应用中使用nativebrik_bridge插件来实现与原生功能的桥接。此插件可以帮助开发者快速集成原生SDK的功能,而无需手动编写复杂的原生代码。

Nativebrik Bridge SDK

文档地址

有关更多详细信息,请访问以下文档页面: https://nativebrik.com/intl/en/docs

更新SDK

要更新SDK版本,请运行以下命令:

make patch   # 更新补丁版本
make minor   # 更新小版本
make major   # 更新主版本

这些命令会执行以下操作:

  1. 更新pubspec.yaml文件中的版本号。
  2. CHANGELOG.md中插入一个空模板。
  3. 更新examplee2e目录中的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

1 回复

更多关于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
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!