Flutter混合开发:Android中如何启动Flutter

简介: flutter可以独立完成项目,但是在现有项目情况下最好的方式就是混合开发,逐步过渡。这样就会共存native和flutter代码,而其中最关键的就是native如何启动flutter页面,及flutter与native如何交互。本文以Android为例,展示如何在一个现有项目中引入flutter、启动flutter,如何加速启动以及如何传参。

现有项目中引入Flutter


在现有的Android项目中,新建一个flutter module。创建完module后会发现自动在主module中依赖了。当然我们如果其他项目使用该flutter模块,并不会自动进行这一步,所以要先在setting.gradle中注册,如下:

setBinding(new Binding([gradle: this]))
evaluate(new File(
  settingsDir,
  'flutter_module/.android/include_flutter.groovy'
))
include ':flutter_module'
复制代码


然后在主module中依赖:

implementation project(path: ':flutter')
复制代码


这样就可以进行混合开发了。


启动flutter页面


新建flutter module后会自动创建一个main页面,那么native如何打开这个页面?

首先在主module的manifest中添加:

<activity
           android:name="io.flutter.embedding.android.FlutterActivity"
           android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
           android:hardwareAccelerated="true"
           android:windowSoftInputMode="adjustResize"
           />
复制代码


然后用一下代码即可打开flutter主页面


startActivity(FlutterActivity.createDefaultIntent(this))
复制代码


那么如何打开其他页面?

比如我们创建一个新的flutter页面second:


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SecondPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _SecondPage();
  }
}
class _SecondPage extends State<SecondPage>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("test"),
        ),
        body:Text("test")
    );
  }
}
复制代码


然后在main.dart的App下注册这个页面:


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      routes: {
        "second" : (BuildContext context) => SecondPage(),  //也可以用其他方式注册
      },
    );
  }
}
复制代码


这样在flutter中可以用以下代码打开这个页面:


Navigator.of(context).pushNamed("second");
复制代码


而在Android中就可以用以下代码即可打开该页面:


startActivity(FlutterActivity.withNewEngine().initialRoute("second").build(this))
复制代码


加速启动


通过上面代码打开flutter页面时会出现黑屏现象,时间并不短,很影响体验。因为每次都重新new一个flutter engine( createDefaultIntent函数内部其实也是withNewEngine().build(launchContext) )。

官方给出的解决方案是使用engine cache,比如在Appliation中添加cache:


var flutterEngine = FlutterEngine(this)
        flutterEngine.dartExecutor.executeDartEntrypoint(
                DartExecutor.DartEntrypoint.createDefault()
        )
        FlutterEngineCache.getInstance().put("main", flutterEngine)
复制代码


然后将启动改成:


startActivity(FlutterActivity.withCachedEngine("main").build(this))
复制代码


但是上面仅仅是启动main页面,如果想启动其他页面,比如second,就需要继续添加cache:


var flutterEngine2 = FlutterEngine(this)
        flutterEngine2.navigationChannel.setInitialRoute("second")
        flutterEngine2.dartExecutor.executeDartEntrypoint(
                DartExecutor.DartEntrypoint.createDefault()
        )
        FlutterEngineCache.getInstance().put("second", flutterEngine2)
复制代码


注意这里通过setInitialRoute设置了route。然后启动即可:


startActivity(FlutterActivity.withCachedEngine("second").build(this))
复制代码


通过缓存engine,启动时黑屏时间缩短了很多,几乎不可察觉(注意第一次可能还会稍微黑屏一下)。


启动传参


上面我们打开main和second页面没有传参,那么如果想传入一些初始化必要的参数,如何处理?

目前flutter框架并没有封装携带参数的api,也就是说native跳转flutter官方是没有参数。但是我们实际场景又有这样的需求,怎么处理?

官方没有给出相应的api,那么只能从route上想办法。首先改变app中注册route的方式,上面直接使用routes这种map的形式,我们换成onGenerateRoute这种RouteFactory形式,如下:


onGenerateRoute: (RouteSettings settings) {
        if(settings.name.startsWith("second")){
          return MaterialPageRoute(builder: (BuildContext context) {
            return SecondPage(settings.name);
          });
        }
        else {
          return MaterialPageRoute(builder: (BuildContext context) {
            return Scaffold(
              body: Center(
                child: Text("page not found"),
              ),
            );
          });
        }
      },
复制代码


这里的settings.name就是route,因为我们想在route后面添加参数,所以通过开头来判断是那个页面。

注意:示例中直接将route url传给页面,其实应该在这里统一解析出来,以map的形式传给页面。

然后修改Second页面:


class SecondPage extends StatefulWidget{
  String url;
  SecondPage(String url){
    this.url = url;
  }
  @override
  State<StatefulWidget> createState() {
    return _SecondPage();
  }
}
class _SecondPage extends State<SecondPage>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("test"),
        ),
        body:Text("test:${widget.url}")
    );
  }
}
复制代码


这里没有解析,直接将url展示出来了,目的是参数传到位即可。

最后在native使用如下代码:


startActivity(FlutterActivity.withNewEngine().initialRoute("second?text=second test").build(this))
复制代码


就可以传递参数了。

但是这样就引出了另外一个问题,因为上面这种启动方式并没有使用engine cache,如果使用engine cache那么route就必须提前定好以便在Appllication中放入cache中。但是我们既然要传参,那么说明route是动态改变的,所以这两个是冲突的,这样在传参的情况下就无法加速启动了么?

因为我们传参本身不是官方api的行为,所以官方的engine cache没有相应的支持。但是这个问题并不是无法解决,比如闲鱼开放的flutter混合框架 —— flutter-boost,就可以很轻松的实现native携参打开flutter页面。不过这里面涉及的东西比较多,后面我单独用一篇文章来解读一下flutter-boost是如何实现传参+快速启动的。



目录
相关文章
|
12天前
|
搜索推荐 前端开发 API
探索安卓开发中的自定义视图:打造个性化用户界面
在安卓应用开发的广阔天地中,自定义视图是一块神奇的画布,让开发者能够突破标准控件的限制,绘制出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战技巧,逐步揭示如何在安卓平台上创建和运用自定义视图来提升用户体验。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开新的视野,让你的应用在众多同质化产品中脱颖而出。
38 19
|
12天前
|
JSON Java API
探索安卓开发:打造你的首个天气应用
在这篇技术指南中,我们将一起潜入安卓开发的海洋,学习如何从零开始构建一个简单的天气应用。通过这个实践项目,你将掌握安卓开发的核心概念、界面设计、网络编程以及数据解析等技能。无论你是初学者还是有一定基础的开发者,这篇文章都将为你提供一个清晰的路线图和实用的代码示例,帮助你在安卓开发的道路上迈出坚实的一步。让我们一起开始这段旅程,打造属于你自己的第一个安卓应用吧!
37 14
|
15天前
|
Java Linux 数据库
探索安卓开发:打造你的第一款应用
在数字时代的浪潮中,每个人都有机会成为创意的实现者。本文将带你走进安卓开发的奇妙世界,通过浅显易懂的语言和实际代码示例,引导你从零开始构建自己的第一款安卓应用。无论你是编程新手还是希望拓展技术的开发者,这篇文章都将为你打开一扇门,让你的创意和技术一起飞扬。
|
13天前
|
XML 存储 Java
探索安卓开发之旅:从新手到专家
在数字时代,掌握安卓应用开发技能是进入IT行业的关键。本文将引导读者从零基础开始,逐步深入安卓开发的世界,通过实际案例和代码示例,展示如何构建自己的第一个安卓应用。我们将探讨基本概念、开发工具设置、用户界面设计、数据处理以及发布应用的全过程。无论你是编程新手还是有一定基础的开发者,这篇文章都将为你提供宝贵的知识和技能,帮助你在安卓开发的道路上迈出坚实的步伐。
26 5
|
12天前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
|
13天前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
13天前
|
搜索推荐 前端开发 测试技术
打造个性化安卓应用:从设计到开发的全面指南
在这个数字时代,拥有一个定制的移动应用不仅是一种趋势,更是个人或企业品牌的重要延伸。本文将引导你通过一系列简单易懂的步骤,从构思你的应用理念开始,直至实现一个功能齐全的安卓应用。无论你是编程新手还是希望拓展技能的开发者,这篇文章都将为你提供必要的工具和知识,帮助你将创意转化为现实。
|
16天前
|
Java 调度 Android开发
安卓与iOS开发中的线程管理差异解析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自拥有独特的魅力。如同东西方文化的差异,它们在处理多线程任务时也展现出不同的哲学。本文将带你穿梭于这两个平台之间,比较它们在线程管理上的核心理念、实现方式及性能考量,助你成为跨平台的编程高手。
|
13天前
|
Java Android开发 开发者
探索安卓开发:构建你的第一个“Hello World”应用
在安卓开发的浩瀚海洋中,每个新手都渴望扬帆起航。本文将作为你的指南针,引领你通过创建一个简单的“Hello World”应用,迈出安卓开发的第一步。我们将一起搭建开发环境、了解基本概念,并编写第一行代码。就像印度圣雄甘地所说:“你必须成为你希望在世界上看到的改变。”让我们一起开始这段旅程,成为我们想要见到的开发者吧!
22 0
|
16天前
|
存储 监控 Java
探索安卓开发:从基础到进阶的旅程
在这个数字时代,移动应用已成为我们日常生活的一部分。对于开发者来说,掌握安卓开发不仅是技能的提升,更是通往创新世界的钥匙。本文将带你了解安卓开发的核心概念,从搭建开发环境到实现复杂功能,逐步深入安卓开发的奥秘。无论你是初学者还是有经验的开发者,这篇文章都将为你提供新的见解和技巧,帮助你在安卓开发的道路上更进一步。
19 0