Flutter应用集成插件flutter_addtoapp_bridge的使用

Flutter应用集成插件flutter_addtoapp_bridge的使用

flutter_addtoapp_bridge 是一个用于在混合开发场景下集成 Flutter 的插件。它支持多 Flutter 引擎,并提供了丰富的功能来实现原生与 Flutter 之间的通信。


功能特性

Dart

以下是一些主要的 Dart API:

  • getPlatformVersion: 获取平台版本信息。
  • isAddToApp: 检查当前环境是否为默认模式或 AddToApp 模式。
  • putString, getString: 存储和获取字符串。
  • putLong, getLong: 存储和获取长整型值。
  • putFloat, getFloat: 存储和获取浮点数值。
  • showToast: 显示 Toast 提示。
  • exitApp: 退出应用。
  • back: 返回操作(如果页面栈为空,则退出应用)。
  • open: 打开指定页面。
  • callPlatform: 调用原生方法(如果未找到插件则返回空值)。
  • setMethodCallHandler: 设置全局方法调用处理器。

Android

以下是一些主要的 Android API:

  • setOnGlobalMethodCall: 设置全局方法调用处理器。
  • back: 返回操作。
  • exitApp: 退出应用。
  • callFlutter: 调用 Flutter 方法。
  • showToast: 显示 Toast 提示。
  • openContainer: 打开 Flutter 容器。
  • getPlugin: 获取插件实例。
  • getIntentWithEntrypoint: 获取带有入口点的 Intent。
  • getFragmentWithEntrypoint: 获取带有入口点的 Fragment。
  • getEngineWithEntrypoint: 获取带有入口点的 Flutter 引擎。

iOS

以下是一些主要的 iOS API:

  • setOnGlobalMethodCall: 设置全局方法调用处理器。
  • topmostViewController: 获取最顶层的 ViewController。
  • showToast: 显示 Toast 提示。
  • getPlugin: 获取插件实例。
  • callFlutter: 调用 Flutter 方法。
  • runBlockInMainThread: 在主线程上执行代码块。
  • back: 返回操作。
  • exitApp: 退出应用。
  • openContainer: 打开 Flutter 容器。
  • getEngineWithEntrypoint: 获取带有入口点的 Flutter 引擎。
  • registerEnginePlugins: 注册引擎插件。
  • getViewControllerWithEntrypoint: 获取带有入口点的 Flutter ViewController。

使用说明

Dart 示例

以下是 Dart 端的基本使用示例:

Future<dynamic> methodCallHandler(MethodCall methodCall) async {
  // 处理来自原生端的方法调用
}

void main() async {
  // 设置全局方法调用处理器
  FlutterAddtoappBridge.setMethodCallHandler(methodCallHandler);
  
  // 显示 Toast 提示
  FlutterAddtoappBridge.showToast("Hello World!");
}

iOS 示例 (Objective-C)

以下是 iOS 端的基本使用示例:

#import <flutter_addtoapp_bridge/FlutterAddtoappBridgePlugin.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary<UIApplicationLaunchOptionsKey, id> *)launchOptions {
  
  // 设置全局方法调用处理器
  [FlutterAddtoappBridgePlugin setOnGlobalMethodCall:^(UIViewController *topmostViewController, FlutterMethodCall *call, FlutterResult result) {}];
  
  // 预热带有 'home' 入口点的 Flutter 引擎
  FlutterViewController *homeFlutterViewController = [FlutterAddtoappBridgePlugin getViewControllerWithEntrypoint:@"home" registerPlugins:YES];
  
  return YES;
}

@end

Android 示例 (Kotlin)

以下是 Android 端的基本使用示例:

import com.codesdancing.flutter.addtoapp.bridge.FlutterAddtoappBridgePlugin

class FinalApplication : Application() {

    override fun onCreate() {
        super.onCreate()

        // 设置全局方法调用处理器
        FlutterAddtoappBridgePlugin.setOnGlobalMethodCall(this, object : FlutterAddtoappBridgePlugin.OnGlobalMethodCall {
            override fun onCall(activity: Activity?, call: MethodCall, result: MethodChannel.Result) {
                // 处理方法调用逻辑
            }
        })

        // 预热带有 'home' 入口点的 Flutter 引擎
        FlutterAddtoappBridgePlugin.getEngineWithEntrypoint(this, "home")
    }
}

完整示例代码

以下是一个完整的示例代码,展示了如何在 Flutter 中集成 flutter_addtoapp_bridge 插件并实现基本功能。

文件结构

example/
├── lib/
│   ├── main.dart

main.dart

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:flutter_addtoapp_bridge/flutter_addtoapp_bridge.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'UNKNOWN';

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('FLUTTER ADDTOAPP BRIDGE EXAMPLE')),
        body: Center(
          child: GestureDetector(
            onTap: () => onTap(),
            child: Container(
              width: double.infinity,
              decoration: BoxDecoration(color: Colors.blueGrey, borderRadius: BorderRadius.all(Radius.circular(5))),
              margin: EdgeInsets.all(30.0),
              padding: EdgeInsets.all(30.0),
              child: Text(
                'PLATFORM_VERSION: \n$_platformVersion\n\n(click to show toast and version)',
                textAlign: TextAlign.center,
                style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ),
      ),
    );
  }

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> onTap() async {
    String platformVersion;
    // Platform messages may fail, so we use a try/catch PlatformException.
    // We also handle the message potentially returning null.
    try {
      platformVersion = await FlutterAddtoappBridge.getPlatformVersion() ?? 'UNKNOWN';
    } on PlatformException {
      platformVersion = 'FAILED';
    }

    // 显示 Toast 提示
    FlutterAddtoappBridge.showToast("HI, I AM FROM FLUTTER!");

    // 如果 widget 已从树中移除,则不更新 UI
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }
}

更多关于Flutter应用集成插件flutter_addtoapp_bridge的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter应用集成插件flutter_addtoapp_bridge的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_addtoapp_bridge 是一个用于在现有原生应用中集成 Flutter 模块的插件。它允许你在原生应用(如 Android 或 iOS)中嵌入 Flutter 模块,并通过桥接机制实现原生代码与 Flutter 代码之间的通信。

以下是如何在 Flutter 应用中集成 flutter_addtoapp_bridge 的基本步骤:

1. 创建 Flutter 模块

首先,你需要创建一个 Flutter 模块,而不是一个完整的 Flutter 应用。你可以使用以下命令创建一个 Flutter 模块:

flutter create --template module my_flutter_module

这将在当前目录下创建一个名为 my_flutter_module 的 Flutter 模块。

2. 在原生应用中集成 Flutter 模块

接下来,你需要在你的原生应用(Android 或 iOS)中集成这个 Flutter 模块。

Android 集成

  1. settings.gradle 文件中添加 Flutter 模块的路径:

    include ':app'
    setBinding(new Binding([gradle: this]))
    evaluate(new File(
      settingsDir.parentFile,
      'my_flutter_module/.android/include_flutter.groovy'
    ))
    
  2. app/build.gradle 文件中添加 Flutter 模块的依赖:

    dependencies {
        implementation project(':flutter')
    }
    
  3. MainActivity 中启动 Flutter 模块:

    import io.flutter.embedding.android.FlutterActivity;
    
    public class MainActivity extends AppCompatActivity {
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            startActivity(
                FlutterActivity.createDefaultIntent(this)
            );
        }
    }
    

iOS 集成

  1. Podfile 中添加 Flutter 模块的依赖:

    flutter_application_path = '../my_flutter_module'
    load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
    install_all_flutter_pods(flutter_application_path)
    
  2. 运行 pod install 来安装依赖。

  3. AppDelegate 中启动 Flutter 模块:

    #import <Flutter/Flutter.h>
    
    @interface AppDelegate : FlutterAppDelegate
    @end
    
    @implementation AppDelegate
    
    - (BOOL)application:(UIApplication *)application
        didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        [GeneratedPluginRegistrant registerWithRegistry:self];
        return [super application:application didFinishLaunchingWithOptions:launchOptions];
    }
    
    @end
    

3. 使用 flutter_addtoapp_bridge 进行通信

flutter_addtoapp_bridge 允许你在 Flutter 和原生代码之间进行通信。你可以通过以下步骤实现通信:

在 Flutter 中定义方法

在 Flutter 模块中,你可以使用 MethodChannel 来定义方法:

import 'package:flutter/services.dart';

class FlutterBridge {
  static const MethodChannel _channel = MethodChannel('flutter_addtoapp_bridge');

  static Future<String> getPlatformVersion() async {
    final String version = await _channel.invokeMethod('getPlatformVersion');
    return version;
  }
}

在原生代码中实现方法

在原生代码中,你需要实现 MethodChannel 的方法。

Android 实现

MainActivity 中实现方法:

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugins.GeneratedPluginRegistrant;

public class MainActivity extends FlutterActivity {
    private static final String CHANNEL = "flutter_addtoapp_bridge";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        GeneratedPluginRegistrant.registerWith(this.getFlutterEngine());

        new MethodChannel(getFlutterEngine().getDartExecutor().getBinaryMessenger(), CHANNEL)
            .setMethodCallHandler(
                (call, result) -> {
                    if (call.method.equals("getPlatformVersion")) {
                        result.success("Android " + android.os.Build.VERSION.RELEASE);
                    } else {
                        result.notImplemented();
                    }
                }
            );
    }
}
iOS 实现

AppDelegate 中实现方法:

#import <Flutter/Flutter.h>

@interface AppDelegate : FlutterAppDelegate
@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [GeneratedPluginRegistrant registerWithRegistry:self];

    FlutterViewController* controller = (FlutterViewController*)self.window.rootViewController;
    FlutterMethodChannel* channel = [FlutterMethodChannel
        methodChannelWithName:@"flutter_addtoapp_bridge"
              binaryMessenger:controller.binaryMessenger];

    [channel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
        if ([@"getPlatformVersion" isEqualToString:call.method]) {
            result([@"iOS " stringByAppendingString:[[UIDevice currentDevice] systemVersion]]);
        } else {
            result(FlutterMethodNotImplemented);
        }
    }];

    return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

4. 在 Flutter 中调用原生方法

现在你可以在 Flutter 中调用原生方法了:

void getPlatformVersion() async {
  String platformVersion = await FlutterBridge.getPlatformVersion();
  print('Platform Version: $platformVersion');
}
回到顶部