在Android中集成flutter
2019-05-17 20:32
2026 查看
flutter可能是未来跨平台开发的又一技术框架,那么对于一个app,我们不可能完全用flutter来开发,那么就意味着我们需要在已有的Android代码中去集成flutter。目前这一技术还处于预览状态,并且还要切换flutter的channel为mater分支。如下,官方原话:
那么我们在集成之前需要查看现在flutter处于什么渠道:
我的是处于master分支,如果你以前没改过的话,应该是beta分支,那么可以执行:
flutter channel master
进行切换。
下面正式开始集成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项目,就可以看到效果了。
相关文章推荐
- 在Android和iOS中集成flutter
- 零基础学Flutter之Android Studio集成Flutter
- Android 集成 Google Analytics 填坑
- Android集成ZXing二维码扫描,附加竖屏并且不拉伸图片的demo
- android集成百度定位
- 在Windows上将ReactNative集成到现有的Android项目
- 一个简单的demo说明集成reactnative到android项目
- android 集成 第三方应用,包。
- android studio SDK 集成 一键分享 第三方登录:
- Android项目 集成 支付宝功能
- Android项目持续集成之单元测试及代码覆盖率
- 如何集成inmobi到android
- Android可伸缩布局-FlexboxLayout(支持RecyclerView集成)
- Android集成B站弹幕库Danmaku
- Android 集成支付宝支付
- React Native 轻松集成统计功能(Android 篇)
- android_app开发微信支付集成
- android移动广告平台集成的一些问题
- Android支付(支付宝,微信,银联)集成使用