在Android中集成flutter


创建了一个Android开发水友圈,感兴趣的私信我加入。

flutter可能是未来跨平台开发的又一技术框架,那么对于一个app,我们不可能完全用flutter来开发,那么就意味着我们需要在已有的Android和iOS代码中去集成flutter。看看之前的官方原话:

在Android中集成flutter

那么我们在集成之前需要查看现在flutter处于什么渠道:

在Android中集成flutter

我的是处于master分支,如果你以前没改过的话,应该是beta分支,那么可以执行:

<code>flutter channel master/<code>

进行切换。

下面正式开始集成Android和iOS。

Android

首先用Android studio创建一个Android工程,步骤不做介绍了。然后在Android工程的根目录执行一下命令:

<code>flutter create -t module my_flutter/<code>

来创建一个flutter的module,成功之后,目录结构如下:

在Android中集成flutter

接着我们来修改一下Android功能里的gradle文件:

首先是app的setting.gradle文件,添加如下:

<code>include ':app'
setBinding(new Binding([gradle: this]))
evaluate(new File(
settingsDir.parentFile,
'my_flutter/.android/include_flutter.groovy'
))/<code>

目的就是去加载指定目录的include_flutter.groovy文件,那么我们查看一下这个文件:

<code>// Generated file. Do not edit.

def/>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')
}
}
}
}/<code>

其中最重要的一段代码,就是include ':flutter',意思就是flutter这个module要参与编译。

接着在app层级(不是project层)的build.gradle文件中添加依赖:

<code>dependencies {
implementation project(':flutter')
:
}/<code>

OK配置阶段结束,我们开始先写Android代码,在activity中添加一个button,当我们点击它时,将加载flutter布局,代码如下:

<code>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);
}
});
}
}/<code>

这里有两种实现方式,一种是使用fragment,一种是使用FlutterView。代码中的route1字符串则是flutter代码中定义的,接下来就开始写flutter代码:

<code>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(

width: 100,
height: 100,
color: Color(0xFF00FF00),
child: Center(
child: Text("hello",textDirection: TextDirection.ltr,),
),
);
}
}/<code>

这里可以看到对rout1的定义。

写到这里代码部分就完成了,然后运行android项目,就可以看到效果了。

觉得有帮助的可以关注转发一下,若有任何疑问可通过 私信或者留言联系我,留言不一定回

现创建了一个Android开发水友圈,圈内会不定时更新一些Android中高级的进阶资料,欢迎大家带着技术问题来讨论,共同成长进步!(包含资深UI工程师,Android底层开发工程师,Android架构师,原生性能优化及混合优化,flutter专精);希望有技术的大佬加入,水圈内解决的问题越多获得的权利越大!

有兴趣的可以私信我加圈,圈内有部分Android进阶资料领,免费的。私信我“资料”即可入圈。


分享到:


相關文章: