在你安装好Flutter的前提下(在macOS上搭建Flutter开发环境https://flutterchina.club/setup-macos/),为原项目添加flutter 模块,
比如我的项目是在,/Users/haoran1/Desktop/项目/VideoListApp
在终端执行,
$ cd /Users/haoran1/Desktop/项目/VideoListApp
$ flutter create -t module my_flutter
这将创建一个名称为my_flutter 模块文件。
创建完成之后在项目同级目录下会多出一个文件,其中包含一些Dart代码以启动,以及一个.ios / hidden子文件夹,它包含了包含一些Cocoapods和一个帮助程序Ruby脚本的模块项目。
然后在Podfile文件里面添加如下两行代码:
flutter_application_path:flutter模块的路径
flutter_application_path = '/Users/haoran1/Desktop/项目/VideoListApp/my_flutter'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
执行 pod install ,
然后添加New Run Script Phase,
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
然后去AppDelegate.h 里面,#import <Flutter/Flutter.h>,让AppDelegate继承于FlutterAppDelegate,在m文件里面,修改didFinishLaunchingWithOptions,添加 [GeneratedPluginRegistrant registerWithRegistry:self];
现在已经可以 跳转Flutter 界面啦,
flutter支持热重载,修改代码后能立马看到效果。
终端执行
$ cd /Users/haoran1/Desktop/项目/VideoListApp/my_flutter
$ flutter attach
看到正在等待模拟器启动,监听flutter,然后使用Xcode 启动原生项目,跳转flutter界面,
原生界面:
点击按钮跳转flutter页面:
可以看到 已经跳转成功了,终端监听到flutter页面,
flutter带有热重载功能,修改代码,不重新运行可以直接看到修改后的界面,可以按r来刷新界面,在main.dart内添加一行文字:(main.dart文件在my_flutter/lib里面,使用VSCode或者Android studio打开,如果想要语法联想需要安装Flutter插件)
在跳转flutter页面时,可以通过设置 InitialRoute来展示不通的widget。
在main.dart内,通过routename进行判断,
一个月前接触到flutter,然后使用flutter一边学习一边重写了之前的公司小项目,感觉开发是真的好快,感觉比之前开发时间提快好多,并且是iOS/Android双平台的,页面流畅度也堪比原生(release),毕竟是google爸爸出的,闲鱼有多个页面已经使用flutter。个人感觉比RN入门快,RN基于js桥接,Flutter是自绘UI,真正的一套代码运行双端,另外flutter还可以开发桌面应用(https://github.com/google/flutter-desktop-embedding)(https://feather-apps.com/),另外google新的操作系统Fuchsia也可以使用flutter开发。
这是小项目的下载地址,可以下载体验一下(安卓版):pgyer.com/mBHn