在Android中集成Flutter的学习笔记

96
Android技术干货分享
0.3 2019.01.29 19:51 字数 670

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(

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

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

写到这里代码部分就完成了,然后运行android项目,就可以看到效果了。
【附】相关资料


有些大家需要的资料知识我都分享在群里了,还有些录制成视频供大家免费下载,希望可以帮助在这个行业发展的朋友,在论坛博客等地方少花些时间找资料,把有限的时间,真正花在学习上,所以我把这些资料,分享出来。相信对于已经工作和遇到技术瓶颈或者写博客码友,在这份资料中一定都有你需要的内容。
进群【940780115】免费领取,欢迎各位一起来探讨在Android开发上面所遇见的问题。

日记本
Web note ad 1