在Android和iOS中集成flutter
flutter可能是未来跨平台开发的又一技术框架,那么对于一个app,我们不可能完全用flutter来开发,那么就意味着我们需要在已有的Android和iOS代码中去集成flutter。目前这一技术还处于预览状态,并且还要切换flutter的channel为mater分支。如下,官方原话:
那么我们在集成之前需要查看现在flutter处于什么渠道:
我的是处于master分支,如果你以前没改过的话,应该是beta分支,那么可以执行:
flutter channel master
进行切换。
下面正式开始集成Android和iOS。
Android
首先用Android studio创建一个Android工程,步骤不做介绍了。然后在Android工程的根目录执行一下命令:
flutter create -t module my_flutter
来创建一个flutter的module,成功之后,目录结构如下:
接着我们来修改一下Android功能里的gradle文件:
首先是app的setting.gradle文件,添加如下:
include ':app'
setBinding(new Binding([gradle: this]))
evaluate(new File(
settingsDir.parentFile,
'my_flutter/.android/include_flutter.groovy'
))
目的就是去加载指定目录的include_flutter.groovy文件,那么我们查看一下这个文件:
// Generated file. Do not edit.
def scriptFile = getClass().protectionDomain.codeSource.location.path
def flutterProjectRoot = new File(scriptFile).parentFile.parentFile
gradle.include ':flutter'
gradle.project(':flutter').projectDir = new File(flutterProjectRoot, '.android/Flutter')
def plugins = new Properties()
def pluginsFile = new File(flutterProjectRoot, '.flutter-plugins')
if (pluginsFile.exists()) {
pluginsFile.withReader('UTF-8') { reader -> plugins.load(reader) }
}
plugins.each { name, path ->
def pluginDirectory = flutterProjectRoot.toPath().resolve(path).resolve('android').toFile()
gradle.include ":$name"
gradle.project(":$name").projectDir = pluginDirectory
}
gradle.getGradle().projectsLoaded { g ->
g.rootProject.afterEvaluate { p ->
p.subprojects { sp ->
if (sp.name != 'flutter') {
sp.evaluationDependsOn(':flutter')
}
}
}
}
其中最重要的一段代码,就是include ':flutter',意思就是flutter这个module要参与编译。
接着在app层级(不是project层)的build.gradle文件中添加依赖:
dependencies {
implementation project(':flutter')
:
}
OK配置阶段结束,我们开始先写Android代码,在activity中添加一个button,当我们点击它时,将加载flutter布局,代码如下:
public class MainActivity extends AppCompatActivity {
private TextView button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
FragmentTransaction tx = getSupportFragmentManager().beginTransaction();
tx.replace(R.id.container, Flutter.createFragment("route1"));
tx.commit();
// View flutterView = Flutter.createView(MainActivity.this,getLifecycle(),"route1");
// FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(100,100);
// params.leftMargin = 100;
// params.topMargin = 200;
// addContentView(flutterView,params);
}
});
}
}
这里有两种实现方式,一种是使用fragment,一种是使用FlutterView。代码中的route1字符串则是flutter代码中定义的,接下来就开始写flutter代码:
import 'dart:ui';
import 'package:flutter/material.dart';
void main() => runApp(_widgetForRoute(window.defaultRouteName));
Widget _widgetForRoute(String route) {
switch (route) {
case 'route1':
return SomeWidget();
case 'route2':
return SomeWidget();
default:
return Center(
child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
);
}
}
class SomeWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container www.furong157.com (
width: 100,
height: 100,
color: Color(www.michenggw.com xFF00FF00),
child: Center(
child: Text("hello",textDirection: TextDirection.ltr,),
),
);
}
}
这里可以看到对rout1的定义。
写到这里代码部分就完成了,然后运行android项目,就可以看到效果了。
ios
首先也是执行:
flutter create -t module my_flutter
生成一个flutter工程,由于在Android集成中已经做了这一步,故跳过。然后用Xcode创建一个iOS工程,创建完成之后,目录如下:
下面为工程添加flutter的依赖,这里要使用cocoapods,若以前没有安装过,则执行命令:
sudo gem install cocoapods
然后在iOS工程的根目录创建Podfile文件,命令为:
touch Podfile
然后修改podfile文件,如下:
target 'ios4Flutter' do
platform:ios,'8.0'
flutter_application_path www.mhylpt.com= '../my_flutter/'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
end
其中ios4Flutter为我的iOS工程名,flutter_application_path为flutter工程的根目录。
最后执行:
pod install
完成项目的依赖,效果如下:
之后点击.xcworkSpace文件打开iOS工程,找到Build Phases目录,新建一个Script Phase,粘贴下面的命令:
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_www.gcyL157.com tools/bin/xcode_backend.sh" embed
到text area,如下图:
配置完成之后,⌘B来build工程。如果没有报错,那么部署成功。下面开始写代码:
在AppDelegate.h中:
#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>
@interface AppDelegate : FlutterAppDelegate
@end
AppDelegate.m:
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> // Only if you have Flutter Plugins
#include "AppDelegate.h"
@implementation AppDelegate
// This override can be omitted if you do not have any Flutter Plugins.
- (BOOL)application:www.gcyl152.com/ (UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[GeneratedPluginRegistrant registerWithRegistry:self];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
ViewController.m:
#import <Flutter/Flutter.h>
#import "ViewController.h"
@implementation ViewController
- (void)viewDidLoad www.feifanyule.cn{
[super viewDidLoad];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self
action:@selector(handleButtonAction)
forControlEvents:UIControlEventTouchUpInside];
[button setTitle:@"Press me" forState:UIControlStateNormal];
[button setBackgroundColor:[UIColor blueColor]];
button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
[self.view addSubview:button];
}
- (void)handleButtonAction {
FlutterViewController* flutterViewController = [[FlutterViewController alloc] init];
[flutterViewController setInitialRoute:@"route1"];
[self presentViewController:flutterViewController animated:false completion:nil];
}
@end
OK,oc代码编写完成,运行app,呈现效果。
Hot restart/reload and debugging Dart code
我们可以运用dart语言的特性实现 hot reload,首先在flutter的根目录执行:
flutter attach
如下:
当运行完app,点击按钮进入flutter的view时,终端状态如下:
当我们再次修改dart代码,保存之后,在命令中输入r即可hot reload。
在Android和iOS中集成flutter的更多相关文章
- 现有项目中集成Flutter
本文列举了项目开发使用Flutter会遇到的问题,以及如何使用Flutter module在现有项目中集成Flutter,并对其原理进行了分析. 最近在做的一个商业项目,完全的使用Flutter编写的 ...
- Unity在Android和iOS中如何调用Native API
本文主要是对unity中如何在Android和iOS中调用Native API进行介绍. 首先unity支持在C#中调用C++ dll,这样可以在Android和iOS中提供C++接口在unity中调 ...
- 如何在ios中集成微信登录功能
在ios中集成微信的登录功能有两种方法 1 用微信原生的api来做,这样做的好处就是轻量级,程序负重小,在Build Settings 中这样设置 然后设置 友盟的设置同上,但是要注意,加入你需要的所 ...
- Android 和iOS 中关于View 的一点知识
View的概念和方法十分重要,这里将对Android 和iOS中出现的,关于视图的一些知识点进行总结,预计文章会比较长,要许多时间慢慢补充. 先转载一部分资料,感谢原作者! 原链接为:http://b ...
- Android Studio 项目中集成百度地图SDK报Native method not found: com.baidu.platform.comjni.map.commonmemcache.JNICommonMemCache.Create:()I错误
Android Studio 项目中集成百度地图SDK报以下错误: java.lang.UnsatisfiedLinkError: Native method not found: com.baidu ...
- iOS中集成ijkplayer视频直播框架
ijkplayer 是一款做视频直播的框架, 基于ffmpeg, 支持 Android 和 iOS, 网上也有很多集成说明, 但是个人觉得还是不够详细, 在这里详细的讲一下在 iOS 中如何集成ijk ...
- Android 和iOS中 Gesture 和 Touch
先谈谈在开发中遇到的手势问题: 今天在开发android程序时,在 View.OnTouchListener 的 onTouch(View view, MotionEvent motionEvent) ...
- Android和iOS中Cocos2D日志为什么会出现skip frames
在你运行app在Android或iOS设备或iOS模拟器中时,日志里往往会出现一行: I/Choreographer(28956): Skipped 159 frames! The applicati ...
- 直播软件开发关于Android、iOS中的视频采集步骤
很多人对直播软件开发还是抱有想法的,但是在这个资本冷静的市场下,直播平台该怎么玩,在直播软件开发过程中哪些功能是必须具备的,这都是值得关注的话题.今天我们给大家分享一份详细的直播软件开发关于Andro ...
随机推荐
- 在线代码编辑器 Codemirror 的轻量级 React 组件
代码编辑器 CodeMirror 的轻量级 React 组件 demo @uiw-react.github.io/react-codemirror/ 特性:
- BootStrap中常用样式类
网格选项 row:行 col--:列(第一个可以为xs[超小]/sm[小型]/md[中型]/lg[大型]:第二个必须为12以内的[列数]) col--offset-:列偏移(第一个同上,第二个范围为1 ...
- BZOJ1509: [NOI2003]逃学的小孩(树的直径)
Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1126 Solved: 567[Submit][Status][Discuss] Description ...
- 关于Ubuntu 16.04 pip安装Docker-Compose
$ sudo apt-get update 安装pip: $ sudo apt-get install python-pip 卸载旧版本docker-compose: $ sudo pip unins ...
- 【操作系统作业-lab4】 linux 多线程编程和调度器
linux多线程编程 参考:https://blog.csdn.net/weibo1230123/article/details/81410241 https://blog.csdn.net/skyr ...
- scrapy--json(喜马拉雅Fm)
已经开始听喜马拉雅Fm电台有2个月,听里面的故事,感觉能听到自己,特别是蕊希电台,始于声音,陷于故事,忠于总结.感谢喜马拉雅Fm陪我度过了这2个月,应该是太爱了,然后就开始对Fm下手了.QAQ 该博客 ...
- 《Redis设计与实现》- AOF持久化
1. AOF持久化 Redis AOF 持久化是通过保存Redis服务器所执行的写命令来记录数据库状态的. 2. RDB持久化与AOF持久化的区别 RDB持久化 RDB持久化通过保存数据中的键值对来记 ...
- vue.js实践应用
对于vue.js,不想多比比,直接搞上源码+图片 <!DOCTYPE html> <html> <head> <meta charset="utf- ...
- you do not permission to access / no this server
最近在学习Linux下的httpd服务,自己写了一个虚拟主机的配置文件 重启之后,怎么访问都是出现以下的内容, do not permission to access / no this server ...
- 准备篇(二)C语言
因为C语言部分打算单独维护,所以 目录: 1. C语言基础篇(零)gcc编译和预处理 2. C语言基础篇(一)关键字 3. C语言基础篇(二)运算符 4. C语言指针篇(一)指针与指针变量 5. C语 ...