Flutter和原生iOS交互
具体集成请看下面文章
此篇记录的是集成之后的iOS界面和flutter的交互，iOS界面怎么跳转到不同的flutter界面。
老项目集成Flutter中文文档
老项目集成Flutter详细一篇
老项目集成Flutter详细另一篇
老项目集成Flutter闲鱼一篇
github flutter
下载新的项目demo
1、 Native跳转到不同的flutter界面
2、 Native传值给flutter
3、 Flutter传值给Native
项目地址
flutter主动和iOS交互
flutter MyApp界面里
1、flutter点击事件之后 iOS跳转界面
2、flutter传map类型参数给iOS进行相应交互
3、在flutter界面的事件响应之后，iOS返回响应数据给flutter
iOS代码如下：
//
// ViewController.m
// FlutterD
//
// Created by 侯佳男 on 2018/10/30.
// Copyright © 2018年 侯佳男. All rights reserved.
//
#import "ViewController.h"
#import "TargetViewController.h"
#import <Flutter/Flutter.h>
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (void)pushFlutterViewController {
FlutterViewController* flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
// 设置路由名字 跳转到不同的flutter界面
/*flutter代码*/
/*
import 'dart:ui';
void main() => runApp(_widgetForRoute(window.defaultRouteName));
Widget _widgetForRoute(String route) {
switch (route) {
case 'myApp':
return new MyApp();
case 'home':
return new HomePage();
default:
return Center(
child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
);
}
}
*/
[flutterViewController setInitialRoute:@"myApp"];
__weak __typeof(self) weakSelf = self;
// 要与main.dart中一致
NSString *channelName = @"com.pages.your/native_get";
FlutterMethodChannel *messageChannel = [FlutterMethodChannel methodChannelWithName:channelName binaryMessenger:flutterViewController];
[messageChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult _Nonnull result) {
// call.method 获取 flutter 给回到的方法名，要匹配到 channelName 对应的多个 发送方法名，一般需要判断区分
// call.arguments 获取到 flutter 给到的参数，（比如跳转到另一个页面所需要参数）
// result 是给flutter的回调， 该回调只能使用一次
NSLog(@"method=%@ \narguments = %@", call.method, call.arguments);
// method和WKWebView里面JS交互很像
// flutter点击事件执行后在iOS跳转TargetViewController
if ([call.method isEqualToString:@"iOSFlutter"]) {
TargetViewController *vc = [[TargetViewController alloc] init];
[self.navigationController pushViewController:vc animated:YES];
}
// flutter传参给iOS
if ([call.method isEqualToString:@"iOSFlutter1"]) {
NSDictionary *dic = call.arguments;
NSLog(@"arguments = %@", dic);
NSString *code = dic[@"code"];
NSArray *data = dic[@"data"];
NSLog(@"code = %@", code);
NSLog(@"data = %@",data);
NSLog(@"data 第一个元素%@",data[0]);
NSLog(@"data 第一个元素类型%@",[data[0] class]);
}
// iOS给iOS返回值
if ([call.method isEqualToString:@"iOSFlutter2"]) {
if (result) {
result(@"返回给flutter的内容");
}
}
}];
[self.navigationController pushViewController:flutterViewController animated:YES];
}
// 点击跳转到flutter界面
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[self pushFlutterViewController];
}
@end
flutter代码
import 'dart:ui' as ui; // 调用window拿到route判断跳转哪个界面
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_module/HomePage.dart';
void main() => runApp(_widgetForRoute(ui.window.defaultRouteName));
// 根据iOS端传来的route跳转不同界面
Widget _widgetForRoute(String route) {
switch (route) {
case 'myApp':
return new MyApp();
case 'home':
return new HomePage();
default:
return Center(
child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
);
}
}
class MyApp extends StatelessWidget {
Widget _home(BuildContext context) {
return new MyHomePage(title: 'Flutter Demo Home Page');
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
routes: <String, WidgetBuilder>{
"/home":(BuildContext context) => new HomePage(),
},
home: _home(context),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// 创建一个给native的channel (类似iOS的通知）
static const methodChannel = const MethodChannel('com.pages.your/native_get');
_iOSPushToVC() async {
await methodChannel.invokeMethod('iOSFlutter', '参数');
}
_iOSPushToVC1() async {
Map<String, dynamic> map = {"code": "200", "data":[1,2,3]};
await methodChannel.invokeMethod('iOSFlutter1', map);
}
_iOSPushToVC2() async {
dynamic result;
try {
result = await methodChannel.invokeMethod('iOSFlutter2');
} on PlatformException {
result = "error";
}
if (result is String) {
print(result);
showModalBottomSheet(context: context, builder: (BuildContext context) {
return new Container(
child: new Center(
child: new Text(result, style: new TextStyle(color: Colors.brown), textAlign: TextAlign.center,),
),
height: 40.0,
);
});
}
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new FlatButton(onPressed: () {
_iOSPushToVC();
}, child: new Text("跳转ios新界面，参数是字符串")),
new FlatButton(onPressed: () {
_iOSPushToVC1();
}, child: new Text("传参，参数是map，看log")),
new FlatButton(onPressed: () {
_iOSPushToVC2();
}, child: new Text("接收客户端相关内容")),
],
),
),
);
}
}
iOS主动和flutter交互
flutter MyApp界面里
1、初始化flutter界面时候iOS传值给flutter
iOS代码
//
// TargetViewController.m
// FlutterD
//
// Created by 侯佳男 on 2018/10/30.
// Copyright © 2018年 侯佳男. All rights reserved.
//
#import "TargetViewController.h"
#import <Flutter/Flutter.h>
@interface TargetViewController () <FlutterStreamHandler>
@end
@implementation TargetViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"TargetViewController";
self.view.backgroundColor = [UIColor whiteColor];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (void)pushFlutterViewController_EventChannel {
FlutterViewController* flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
flutterViewController.navigationItem.title = @"Demo";
[flutterViewController setInitialRoute:@"home"];
// 要与main.dart中一致
NSString *channelName = @"com.pages.your/native_post";
FlutterEventChannel *evenChannal = [FlutterEventChannel eventChannelWithName:channelName binaryMessenger:flutterViewController];
// 代理FlutterStreamHandler
[evenChannal setStreamHandler:self];
[self.navigationController pushViewController:flutterViewController animated:YES];
}
#pragma mark - <FlutterStreamHandler>
// // 这个onListen是Flutter端开始监听这个channel时的回调，第二个参数 EventSink是用来传数据的载体。
- (FlutterError* _Nullable)onListenWithArguments:(id _Nullable)arguments
eventSink:(FlutterEventSink)events {
// arguments flutter给native的参数
// 回调给flutter， 建议使用实例指向，因为该block可以使用多次
if (events) {
events(@"push传值给flutter的vc");
}
return nil;
}
/// flutter不再接收
- (FlutterError* _Nullable)onCancelWithArguments:(id _Nullable)arguments {
// arguments flutter给native的参数
NSLog(@"%@", arguments);
return nil;
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[self pushFlutterViewController_EventChannel];
}
@end
flutter代码
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
// 注册一个通知
static const EventChannel eventChannel = const EventChannel('com.pages.your/native_post');
// 渲染前的操作，类似viewDidLoad
@override
void initState() {
super.initState();
// 监听事件，同时发送参数12345
eventChannel.receiveBroadcastStream(12345).listen(_onEvent,onError: _onError);
}
String naviTitle = 'title' ;
// 回调事件
void _onEvent(Object event) {
setState(() {
naviTitle = event.toString();
});
}
// 错误返回
void _onError(Object error) {
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Material(
child: new Scaffold(
body: new Center(
child: new Text(naviTitle),
),
),
),
);
}
}
后续：
如果有报错如下，解决办法：进入到项目目录flutter_module下，执行flutter create -t module flutter_module
/Users/xxxx/Library/Developer/Xcode/DerivedData/FlutterD-ahzvxiwdocategdkaaadxprgaqbj/Build/Intermediates.noindex/FlutterD.build/Debug-iphonesimulator/FlutterD.build/Script-DC57D7F321880EB20048BF54.sh: line 3: /packages/flutter_tools/bin/xcode_backend.sh: No such file or directory
如下错误
The path /Users/houjianan/Desktop/FlutterDemo/flutter_module does not exist The path /Users/houjianan/Desktop/FlutterDemo/flutter_module does not exist
GA_关注
12<time datetime="2018-10-31T03:19:40.000Z" style="box-sizing: border-box; margin-right: 10px;">2018.10.31 11:19:40</time>字数 340阅读 35,180
<article class="_2rhmJa" style="box-sizing: border-box; display: block; font-weight: normal; line-height: 1.8; margin-bottom: 20px; word-break: break-word; caret-color: rgb(64, 64, 64); color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">
具体集成请看下面文章
此篇记录的是集成之后的iOS界面和flutter的交互，iOS界面怎么跳转到不同的flutter界面。
老项目集成Flutter中文文档
老项目集成Flutter详细一篇
老项目集成Flutter详细另一篇
老项目集成Flutter闲鱼一篇
github flutter
下载新的项目demo
1、 Native跳转到不同的flutter界面
2、 Native传值给flutter
3、 Flutter传值给Native
项目地址
flutter主动和iOS交互
flutter MyApp界面里
1、flutter点击事件之后 iOS跳转界面
2、flutter传map类型参数给iOS进行相应交互
3、在flutter界面的事件响应之后，iOS返回响应数据给flutter
iOS代码如下：
//
// ViewController.m
// FlutterD
//
// Created by 侯佳男 on 2018/10/30.
// Copyright © 2018年 侯佳男. All rights reserved.
//
#import "ViewController.h"
#import "TargetViewController.h"
#import <Flutter/Flutter.h>
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (void)pushFlutterViewController {
FlutterViewController* flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
// 设置路由名字 跳转到不同的flutter界面
/*flutter代码*/
/*
import 'dart:ui';
void main() => runApp(_widgetForRoute(window.defaultRouteName));
Widget _widgetForRoute(String route) {
switch (route) {
case 'myApp':
return new MyApp();
case 'home':
return new HomePage();
default:
return Center(
child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
);
}
}
*/
[flutterViewController setInitialRoute:@"myApp"];
__weak __typeof(self) weakSelf = self;
// 要与main.dart中一致
NSString *channelName = @"com.pages.your/native_get";
FlutterMethodChannel *messageChannel = [FlutterMethodChannel methodChannelWithName:channelName binaryMessenger:flutterViewController];
[messageChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult _Nonnull result) {
// call.method 获取 flutter 给回到的方法名，要匹配到 channelName 对应的多个 发送方法名，一般需要判断区分
// call.arguments 获取到 flutter 给到的参数，（比如跳转到另一个页面所需要参数）
// result 是给flutter的回调， 该回调只能使用一次
NSLog(@"method=%@ \narguments = %@", call.method, call.arguments);
// method和WKWebView里面JS交互很像
// flutter点击事件执行后在iOS跳转TargetViewController
if ([call.method isEqualToString:@"iOSFlutter"]) {
TargetViewController *vc = [[TargetViewController alloc] init];
[self.navigationController pushViewController:vc animated:YES];
}
// flutter传参给iOS
if ([call.method isEqualToString:@"iOSFlutter1"]) {
NSDictionary *dic = call.arguments;
NSLog(@"arguments = %@", dic);
NSString *code = dic[@"code"];
NSArray *data = dic[@"data"];
NSLog(@"code = %@", code);
NSLog(@"data = %@",data);
NSLog(@"data 第一个元素%@",data[0]);
NSLog(@"data 第一个元素类型%@",[data[0] class]);
}
// iOS给iOS返回值
if ([call.method isEqualToString:@"iOSFlutter2"]) {
if (result) {
result(@"返回给flutter的内容");
}
}
}];
[self.navigationController pushViewController:flutterViewController animated:YES];
}
// 点击跳转到flutter界面
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[self pushFlutterViewController];
}
@end
flutter代码
import 'dart:ui' as ui; // 调用window拿到route判断跳转哪个界面
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_module/HomePage.dart';
void main() => runApp(_widgetForRoute(ui.window.defaultRouteName));
// 根据iOS端传来的route跳转不同界面
Widget _widgetForRoute(String route) {
switch (route) {
case 'myApp':
return new MyApp();
case 'home':
return new HomePage();
default:
return Center(
child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
);
}
}
class MyApp extends StatelessWidget {
Widget _home(BuildContext context) {
return new MyHomePage(title: 'Flutter Demo Home Page');
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
routes: <String, WidgetBuilder>{
"/home":(BuildContext context) => new HomePage(),
},
home: _home(context),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// 创建一个给native的channel (类似iOS的通知）
static const methodChannel = const MethodChannel('com.pages.your/native_get');
_iOSPushToVC() async {
await methodChannel.invokeMethod('iOSFlutter', '参数');
}
_iOSPushToVC1() async {
Map<String, dynamic> map = {"code": "200", "data":[1,2,3]};
await methodChannel.invokeMethod('iOSFlutter1', map);
}
_iOSPushToVC2() async {
dynamic result;
try {
result = await methodChannel.invokeMethod('iOSFlutter2');
} on PlatformException {
result = "error";
}
if (result is String) {
print(result);
showModalBottomSheet(context: context, builder: (BuildContext context) {
return new Container(
child: new Center(
child: new Text(result, style: new TextStyle(color: Colors.brown), textAlign: TextAlign.center,),
),
height: 40.0,
);
});
}
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new FlatButton(onPressed: () {
_iOSPushToVC();
}, child: new Text("跳转ios新界面，参数是字符串")),
new FlatButton(onPressed: () {
_iOSPushToVC1();
}, child: new Text("传参，参数是map，看log")),
new FlatButton(onPressed: () {
_iOSPushToVC2();
}, child: new Text("接收客户端相关内容")),
],
),
),
);
}
}
iOS主动和flutter交互
flutter MyApp界面里
1、初始化flutter界面时候iOS传值给flutter
iOS代码
//
// TargetViewController.m
// FlutterD
//
// Created by 侯佳男 on 2018/10/30.
// Copyright © 2018年 侯佳男. All rights reserved.
//
#import "TargetViewController.h"
#import <Flutter/Flutter.h>
@interface TargetViewController () <FlutterStreamHandler>
@end
@implementation TargetViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"TargetViewController";
self.view.backgroundColor = [UIColor whiteColor];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (void)pushFlutterViewController_EventChannel {
FlutterViewController* flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
flutterViewController.navigationItem.title = @"Demo";
[flutterViewController setInitialRoute:@"home"];
// 要与main.dart中一致
NSString *channelName = @"com.pages.your/native_post";
FlutterEventChannel *evenChannal = [FlutterEventChannel eventChannelWithName:channelName binaryMessenger:flutterViewController];
// 代理FlutterStreamHandler
[evenChannal setStreamHandler:self];
[self.navigationController pushViewController:flutterViewController animated:YES];
}
#pragma mark - <FlutterStreamHandler>
// // 这个onListen是Flutter端开始监听这个channel时的回调，第二个参数 EventSink是用来传数据的载体。
- (FlutterError* _Nullable)onListenWithArguments:(id _Nullable)arguments
eventSink:(FlutterEventSink)events {
// arguments flutter给native的参数
// 回调给flutter， 建议使用实例指向，因为该block可以使用多次
if (events) {
events(@"push传值给flutter的vc");
}
return nil;
}
/// flutter不再接收
- (FlutterError* _Nullable)onCancelWithArguments:(id _Nullable)arguments {
// arguments flutter给native的参数
NSLog(@"%@", arguments);
return nil;
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[self pushFlutterViewController_EventChannel];
}
@end
flutter代码
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
// 注册一个通知
static const EventChannel eventChannel = const EventChannel('com.pages.your/native_post');
// 渲染前的操作，类似viewDidLoad
@override
void initState() {
super.initState();
// 监听事件，同时发送参数12345
eventChannel.receiveBroadcastStream(12345).listen(_onEvent,onError: _onError);
}
String naviTitle = 'title' ;
// 回调事件
void _onEvent(Object event) {
setState(() {
naviTitle = event.toString();
});
}
// 错误返回
void _onError(Object error) {
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Material(
child: new Scaffold(
body: new Center(
child: new Text(naviTitle),
),
),
),
);
}
}
后续：
如果有报错如下，解决办法：进入到项目目录flutter_module下，执行flutter create -t module flutter_module
/Users/xxxx/Library/Developer/Xcode/DerivedData/FlutterD-ahzvxiwdocategdkaaadxprgaqbj/Build/Intermediates.noindex/FlutterD.build/Debug-iphonesimulator/FlutterD.build/Script-DC57D7F321880EB20048BF54.sh: line 3: /packages/flutter_tools/bin/xcode_backend.sh: No such file or directory
如下错误
The path /Users/houjianan/Desktop/FlutterDemo/flutter_module does not exist The path /Users/houjianan/Desktop/FlutterDemo/flutter_module does not exist
</article>
网友评论