android 集成flutter混合开发

最新推荐文章于 2024-04-05 18:37:40 发布
最新推荐文章于 2024-04-05 18:37:40 发布
阅读量977 收藏 1
点赞数 4
分类专栏： Android 文章标签： android kotlin flutter 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41771564/article/details/114693904
版权

一、安装flutter

java的环境变量与android studio的安装与配置在此忽略，仅作为已有android项目添加集成flutter项目参考。
1、android studio安装flutter与dart插件
android studio的File->Settings->Plugins中搜索flutter与dart，然后install即可
在这里插入图片描述
在这里插入图片描述

2、下载flutterSDK
去flutter官网下载其最新可用的安装包，点击下载 ；

注意，Flutter的渠道版本会不停变动，请以Flutter官网为准。另外，在中国大陆地区，要想正常获取安装包列表或下载安装包，可能需要翻墙，读者也可以去Flutter github项目下去下载安装包 。

将安装包zip解压到你想安装Flutter SDK的路径（如：C:\src\flutter；注意，不要将flutter安装到需要一些高权限的路径如C:\Program Files\）。

在Flutter安装目录的flutter文件下找到flutter_console.bat，双击运行并启动flutter命令行，接下来，你就可以在Flutter命令行运行flutter命令了。

3、配置flutter环境变量
如果想在命令行中使用 flutter 命令，你需要添加flutter的路径到path中去。这个和配置java环境变量是同样的做法，找到flutter安装路径，比如我的是xx\flutter\bin，我复制这个路径，右键我的电脑–>属性–>高级系统属性–>环境变量–>找到PATH，点击编辑–>在最后把刚复制的路径粘贴进来，–>一直保存确定就可以了。

继续添加flutter的国内镜像，避免后续需要翻墙下载资源，直接添加到系统变量就行。
FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn
PUB_HOSTED_URL: https://pub.flutter-io.cn
在这里插入图片描述

打开cmd运行flutter doctor ,flutter会自动下载相关依赖
在这里插入图片描述
没有报错，就安装完成了

二、创建flutter项目并关联至native项目*

1、创建flutter项目
在这里插入图片描述
在这里插入图片描述

创建好了就这样
在这里插入图片描述

2、把这个flutter项目关联到native项目
首先在android项目的settings.gradle文件中添加如下代码，然后点击Sync。

include ':flutter_module'
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'AndroidDemo/flutter_module/.android/include_flutter.groovy'))

在这里插入图片描述编译完成后，就看到已经flutter项目已经导入进来了在这里插入图片描述

在native项目下build文件中添加implementation project(’:flutter’)以导入flutter项目到native项目中。
在这里插入图片描述
同步完成后就可以运行了。

三、android与flutter交互**

我这里选择FlutterBoost ，这是阿里系闲鱼技术团队开源的 Flutter 插件，它可以轻松为现有原生应用程序提供 Flutter 混合集成方案。其理念是将 Flutter 像 WebView 那样来使用。FlutterBoost 帮开发者处理 Native 与 Flutter 页面的映射和跳转，开发者只需关心页面的名字和参数即可 ( 通常可以是 URL ) 。由于FlutterBoost不一定支持最新Flutter版本，关于Flutter安装版本，自行查看FlutterBoost当前支持版本。
关于FlutterBoost的使用，我参考的大佬博客，查看原文章
1、flutter添加依赖
在根目录 pubspec.yaml 文件中的 dependencies : 下添加 FlutterBoost 依赖并点击Pub get。


flutter_boost: 1.12.13

在这里插入图片描述
2、android端添加FlutterBoost依赖
同步完成后在android的app->build.gradle->dependencies中添加FlutterBoost的依赖

implementation project(path: ':flutter_boost')

在这里插入图片描述

3、android 端FlutterBoost的使用
(1)在 AndroidManifest.xml 中添加配置

<!-- FlutterBoost 配置 -->
<meta-data
    android:name="flutterEmbedding"
    android:value="2" />

在这里插入图片描述
(2)添加路由配置PageRouter

class PageRouter {

    val pageName: HashMap<String?, String?> = object : HashMap<String?, String?>() {
        init {
            put("first", "first")
            put("second", "second")
            put("tab", "tab")
            put("sample://flutterPage", "flutterPage")
        }
    }

    val FLUTTER_PAGE_MAIN = "sample://firstPage"
    val NATIVE_PAGE_URL = "sample://nativePage"
    val FLUTTER_PAGE_URL = "sample://flutterPage"
    val FLUTTER_FRAGMENT_PAGE_URL = "sample://flutterFragmentPage"
    fun openPageByUrl(context: Context, url: String, params: Map<*, *>): Boolean {
        return openPageByUrl(context, url, params as HashMap<String?, Any?>, 0)
    }

    fun openPageByUrl(
        context: Context,
        url: String,
        params: HashMap<String?, Any?>,
        requestCode: Int
    ): Boolean {
        val path = url.split("\\?".toRegex()).toTypedArray()[0]
        Log.i("openPageByUrl", path)
      return false
    }
}

(2)自定义 Application ，并在 onCreate 方法中初始化 FlutterBoost

class MyApplication: Application() {

    override fun onCreate() {
        super.onCreate()
//引擎生命周期监听
        val boostLifecycleListener = object : FlutterBoost.BoostLifecycleListener {
            override fun onEngineCreated() {
                //引擎创建成功
            }

            override fun onPluginsRegistered() {
                //插件注册
            }

            override fun beforeCreateEngine() {
                //创建引擎前
            }

            override fun onEngineDestroy() {
                //引擎被销毁
            }
        }
        //路由跳转监听
        val router = INativeRouter { context, url, urlParams, requestCode, exts ->
            //当 Flutter 中使用 FlutterBoost 启动新页面 (Flutter/Native) 时，触发该回调
            PageRouter().openPageByUrl(context, url,
                urlParams as HashMap<String?, Any?>, requestCode)
        }
        //
        // AndroidManifest.xml 中必须要添加 flutterEmbedding 版本设置
        //
        //   <meta-data android:name="flutterEmbedding"
        //               android:value="2">
        //    </meta-data>
        //
        val platform = FlutterBoost.ConfigBuilder(this, router)
            .isDebug(true)
            .whenEngineStart(FlutterBoost.ConfigBuilder.ANY_ACTIVITY_CREATED)
            .renderMode(FlutterView.RenderMode.texture)
            .lifecycleListener(boostLifecycleListener)
            .build()
        FlutterBoost.instance().init(platform)
    }
}

(3)在页面中写个按钮，实现native跳转到flutter页面

 findViewById<TextView>(R.id.tv_to_flutter).setOnClickListener {
            val params = BoostFlutterActivity.SerializableMap().map
            val intent =
                BoostFlutterActivity.withNewEngine().url("firstPage")
                    .params(params)
                    .backgroundMode(BoostFlutterActivity.BackgroundMode.opaque)
                    .build(this)
            startActivity(intent)
        }

注册BoostFlutterActivity到AndroidManifest.xml

 <activity android:name="com.idlefish.flutterboost.containers.BoostFlutterActivity"/>

(4)在flutter中初始化FlutterBoost

import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'package:flutter_module/one_page.dart';
import 'package:flutter_module/two_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();

    FlutterBoost.singleton.registerPageBuilders({
      'firstPage': (pageName, params, _) => OnePage(params: params,),
      'secondPage': (pageName, params, _) => TwoPage(),
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Boost example',
        builder: FlutterBoost.init(),
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          platform: TargetPlatform.iOS, // 使页面跳转时从左至右滑动
        ),
        home: Container(
            color: Colors.white
        )
    );
  }
}

在这里插入图片描述
OnePage.dart

import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';

class OnePage extends StatefulWidget {
  dynamic params;

  OnePage({Key key,this.params}) : super(key:key);
  @override
  _OnePageState createState() => _OnePageState();
}

class _OnePageState extends State<OnePage> {

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    print("参数");
    print(widget.params);

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: InkWell(
          child: Text('这是 One 页面，点击可以跳转回android页面'),
          onTap: (){

            print("点击");
            FlutterBoost.singleton.open("sample://nativePage", urlParams: <dynamic,dynamic>{
              "query": {"aaa": "bbb"},
              "params":"参数2"
            });

          },
        ),
      ),
    );
  }
}

到此就可以运行了，android也能跳转到flutter的页面。

4、传参
(1)android端传参

findViewById<TextView>(R.id.tv_to_flutter).setOnClickListener {
            var requestParams: MutableMap<String, Any>? = null
           var params = requestParams ?: mutableMapOf()
            params.put("test1","这是参数1")
            params.put("test2","这是参数2")
            val intent =
                BoostFlutterActivity.withNewEngine().url("firstPage")
                    .params(params)
                    .backgroundMode(BoostFlutterActivity.BackgroundMode.opaque)
                    .build(this)
            startActivity(intent)
        }

Flutter端打印结果

(2)android 端接收参数并跳转到native界面
在PageRouter的openPageByUrl方法中处理，完整PageRouter：

class PageRouter {

    val pageName: HashMap<String?, String?> = object : HashMap<String?, String?>() {
        init {
            put("first", "first")
            put("second", "second")
            put("tab", "tab")
            put("sample://flutterPage", "flutterPage")
        }
    }

    val FLUTTER_PAGE_MAIN = "sample://firstPage"
    val NATIVE_PAGE_URL = "sample://nativePage"
    val FLUTTER_PAGE_URL = "sample://flutterPage"
    val FLUTTER_FRAGMENT_PAGE_URL = "sample://flutterFragmentPage"
    fun openPageByUrl(context: Context, url: String, params: Map<*, *>): Boolean {
        return openPageByUrl(context, url, params as HashMap<String?, Any?>, 0)
    }

    fun openPageByUrl(
        context: Context,
        url: String,
        params: HashMap<String?, Any?>,
        requestCode: Int
    ): Boolean {
        val path = url.split("\\?".toRegex()).toTypedArray()[0]
        Log.i("openPageByUrl", path)
        return try {
            if (pageName.containsKey(path)) {
                val intent = BoostFlutterActivity.withNewEngine().url(pageName.get(path)!!)
                    .params(params)
                    .backgroundMode(BoostFlutterActivity.BackgroundMode.opaque).build(context)
                if (context is Activity) {
                    context.startActivityForResult(intent, requestCode)
                } else {
                    context.startActivity(intent)
                }
                return true
            } else if (url.startsWith(NATIVE_PAGE_URL)) {
                for ((key, value) in params) {
                    println("方式一：  获取传参Key = $key  ----  Value = $value")
                }
                context.startActivity(Intent(context, NativePageActivity::class.java))
                return true
            }
            false
        } catch (t: Throwable) {
            false
        }
    }
}

到此，android中集成flutter代码的混合开发就可以做基本跳转及交互了。
没怎么写博客，写的不好多多理解，有问题可以留言沟通。

Jianchuan Su
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android和Flutter混合开发
海阔天空
08-25 1127
Android和Flutter混合开发
不得不看的Flutter与Android混合开发
最新发布
erhtre的博客
04-18 983
跳槽季整理面试题已经成了我多年的习惯！在这里我和身边一些朋友特意整理了一份快速进阶为Android高级工程师的系统且全面的学习资料。涵盖了Android初级——Android高级架构师进阶必备的一些学习技能。附上：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题（含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。
flutter与android混合开发，阿里P8大佬整理
m0_61369817的博客
03-03 749
我的10年开发生涯中，有9年都是做Android相关开发，以我个人的经历来看，Android开发市场分为以下几个阶段，也许不是特别准确，但我觉得值得参考。这个阶段大概在2009到2013年，Android刚开始出现在大家视野中，当时的Java开发有点像现在的Android开发，不是很热门，竞争压力大，因此很多Java开发转了Android开发，我就是其中一员。
Flutter混合开发(一)：Android项目集成Flutter模块详细指南
m0_60634927的博客
03-22 970
title: ‘Flutter_Android混合开发’,),@override@override),///路由转发default:),),“未匹配到路由111”,),我们现在将加载Flutter时的initialRoute参数替换为 “route1”，那页面将加载route1Widget，替换为 “route2”，将加载route2Widget。否则将展示notFoundWidget。
Flutter与Android混编
XBlithe的博客
12-22 2748
各端分离方案是iOS、Android和Flutter分别作为三个独立项目存在，将Flutter工程的编译产物作为iOS工程和Android工程的依赖模块，原有工程的管理模式不变，对原生工程没有侵入性，无需额外配置工作。 这种方案需要单独创建Flutter项目，然后通过iOS（CocoaPods）和安卓的依赖管理工具将Flutter项目build出来的framework、资源包等放入Native工程以供使用。 这种方式可以将iOS、Android和Flutter项目放在一个目录下面作为一个项目来管理，也可以不
Flutter混合开发配置 亲测1
08-03
在本文中，我们将深入探讨如何进行Flutter混合开发配置，以及涉及的关键知识点。Flutter是一种由Google推出的开源UI工具包，用于构建高性能、高保真、跨平台的移动应用。结合C#，可以创建出功能丰富的混合应用程序。...
cordova-plugin-flutter:该插件可以让cordova应用与flutter在同一个cordova项目里进行混合开发
05-25
cordova应用与flutter混合开发 让你的cordova应用能与flutter进行混合开发 开发环境 版本 cordova ≥ 10.0.0 cordova-android ≥ 9.0.0 cordova-ios ≥ 5.0.0 flutter ≥ 1.17.0 示例代码：...
Flutter学习Roadmap.pptx
06-15
开发者可以选择Android Studio或VS Code作为集成开发环境，并安装Flutter和Dart插件。 2. **创建第一个Flutter程序**：在IDE中新建Flutter项目，然后通过`flutter run`命令运行程序，即可看到简单的Hello World应用...
FlutterInAndroid.zip
04-10
Android原生工程集成Flutter混合开发： 第一步 创建Flutter工程 第二步 编译Flutter工程 第三步 在Android工程中加入Flutter Module的依赖 第四步 在Android工程中创建Flutter的View 第五步 在Flutter工程中...
FlutterBoostDemo.zip
09-29
FlutterBoost集成代码，包含详细集成步骤，集成方法等。
【最强】Android 项目集成 Flutter 实战分享！不看看？
2401_84132685的博客
04-05 1011
题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多程序员朋友无法获得正确的资料得到学习提升，故此将并将重要的Android进阶资料包括自定义view、性能优化、MVC与MVP与MVVM三大框架的区别、NDK技术、阿里面试题精编汇总、常见源码分析等学习资料。【Android思维脑图（技能树）】
Flutter混合开发
大灰狼的小绵羊哥哥的博客
05-31 763
混合开发Flutter集成步骤 创建Flutter module 添加Flutter module依赖 在Java/Object-c中调用Flutter module 编写Dart代码 运行项目 热重启/重新加载 调试Dart代码 发布应用 创建Flutter module 项目目录xxx/flutter/Navive项目: cd xxx/flutter/ flutter create -t module flutter_module 上面的代码会切换到Android/iOS.
Android 混合Flutter之源码集成方式
深红骑士的博客
08-25 2641
一、前言 Flutter自从1.0版本发布，现在越来越受欢迎，很大大厂如美团，阿里，腾讯，字节跳动都在研究使用。今天实践一下Android原生如何嵌套Flutter，具体原理就是Flutter作为Android Module出现在项目中，这样就可以在已有的项目中使用，Android项目也是一个工程，Flutter项目也是一个工程，这样就互不相关，也很好进行管理。废话不多说，开始实践。 二、目录结构...
Flutter —— 混合开发
LinShunIos的博客
11-29 776
Flutter —— 混合开发1. 混合开发2. 混合开发操作第三方库 imagePicker 1. 混合开发 混合开发分两种情况 Flutter 项目调用原生功能 原生的项目嵌入Flutter（比较重，不建议） 2. 混合开发操作 回到之前的仿微信的我的界面来做一个点击头像通过相册更换图片的功能。 在之前的现实头像的地方添加一个GestureDetector，并且添加onTap方法。 Flutter里面和原生通讯用的是Flutter专门提供的MethodChannel。 这里声明一个_method
Flutter开发踩坑记录一：Flutter混合开发入门指南
阿根的专栏
08-24 1734
本文介绍Flutter项目如何集成到原生项目中的步骤，以及注意事项
微店的Flutter混合开发组件化与工程化架构
m0_60229361的博客
04-02 1099
之后构建Flutter工程则用flutterw命令：而不用本地全局配置的flutter命令，避免每个开发同学版本不一致问题，且这种方式对于新加入Flutter开发的同学来说，完全不需要自己手动下载Flutter SDK，只需执行一下flutterw任何命令，如，即可自动触发对应Flutter SDK的下载与安装，实现优雅的自动化管理，这种方式对打包平台来说也为支持Flutter工程的打包提供基础。
android flutter混合开发demo
05-16
Android Flutter混合开发demo是一种组合式的开发方式，结合了Android和Flutter两种技术。相比只使用一种技术的开发模式，混合开发能够使得开发人员在建立应用程序时具有更多的灵活性，这也是近年来越来越受到欢迎的一种开发方式。 Android是一种开源的操作系统，为移动设备提供足够的灵活性和创新性。Flutter是由Google开发的一种移动应用程序开发框架，其特点是高性能、灵活且易于学习。 将两者相结合，可以利用Android的丰富资源和Flutter的高质量开发，产生高质量的应用程序。 Android Flutter混合开发demo需要适当的知识和技能才能建立出高质量的应用程序。在这种开发过程中，开发人员需要熟悉Java或Kotlin（Android的编程语言）和Dart（Flutter的编程语言）。在Android Flutter混合开发demo中, Android和Flutter都可以通过Android Studio集成开发环境进行开发，从而提高了效率和便利性。 总之，Android Flutter混合开发demo是一种强大的开发方式，可供开发人员选择创建高质量的应用。通过混合开发，企业可以将其业务逻辑与现有移动应用程序的UI无缝集成。它也可以增强应用程序的稳定性和性能，使得Android Flutter混合开发demo成为许多移动应用程序开发人员的首选。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值