Flutter android原生项目引入flutter module

Flutter android原生项目引入flutter module,第1张

概述前言:各位同学的大家好,有段时间没有给大家更新文章了,最近在学习flutter和安卓混合开发的知识点。所以就像总结一下,然后后分享给大家。这一期文章的讲的知识一定要有用到Androidstudio所以用vscode开发同学要稍微改下IDE(但是这不是重点)那么废话不多说我们正式开始。准备工作 前言:

各位同学的大家好,有段时间没有给大家更新文章了,最近在学习Flutter和安卓混合开发的知识点。所以就像总结一下,然后后分享给大家。 这一期文章的讲的知识一定要有用到AndroID studio 所以用vscode开发同学要稍微改下IDE (但是这不是重点)
那么废话不多说我们正式开始。

准备工作

需要安装Flutter的开发环境:大家可以去看看之前的教程:
1 win系统Flutter开发环境安装教程: @L_419_0@
2 mac系统Flutter开发环境安装教程:https://www.jianshu.com/p/bad2c35b41e3
效果图:


具体实现一 创建Flutter_module 工程1用AndroID studio 创建或者命令都可以


2 命令创建
Flutter create -t module Flutter_module

这里要注意安卓原生项目需要跟Flutter_module在同一个目录层级

第二步创建安卓原生工程



这个就比较简单了 我就不多说了按照截图一路下一步即可

三在AndroID 项目中进入Flutter_module1 在原生AndroID项目里面的 app目录下面的 build.gradle里面添加如下代码
compileOptions {        sourceCompatibility JavaVersion.VERSION_1_8        targetCompatibility JavaVersion.VERSION_1_8    }


我们知道这是使用Java 8所需要的配置,在这里的作用是为了解决版本兼容问题,如果不配置的话运行项目可能会报错:Invoke-customs are only supported starting with AndroID O (--min-API 26)。

2然后在项目根目录下的setting.gradle文件中配置:
// 加入下面配置setBinding(new Binding([gradle: this]))evaluate(new file(        settingsDir.parentfile,        'Flutter_module/.androID/include_Flutter.groovy'))

Flutter_module 这个记得修改成自己的Flutter module 的名称 之后sync 一下·项目 即可导入成功

这里要注意我们在sync 的时候我们要同时打开Flutter module 项目和原生安卓项目否则会失败


sync之后我们发现原生工程工程的目录结构里面多出一Flutter名字的library module 的库工程 我们需要在app目录下的build.gradle 里面添加该module的依赖

  implementation project(':Flutter')


这样我们就讲Flutter_module工程引入到我们的AndroID项目项目里面来 当然Flutter_module其实也是可以单独运行的

androID 原生页面打开Flutter页面一添加普通的Flutter屏幕

Flutter提供FlutterActivity了在AndroID应用程序中显示Flutter体验的功能。像任何其他一样Activity, FlutterActivity必须在您的帐户中注册 AndroIDManifest.xml。将以下XML添加到 标签AndroIDManifestxml下的文件中application:

 <activityandroID:name="io.Flutter.embedding.androID.FlutterActivity" androID:theme="@style/theme.Nativedemo"androID:configChanges="orIEntation|keyboardHIDden|keyboard|screenSize|locale|layoutDirection|FontScale|screenLayout|density|uiMode" androID:harDWareAccelerated="true"  androID:windowsoftinputMode="adjustResize"    />
二 启动activity1使用FlutterActivity.createDefaultIntent
 startActivity(FlutterActivity.createDefaultIntent(MainActivity.this));

这个示例假设您的Dart入口点称为main(),初始Flutter路线为“ /”。无法使用更改Dart入口点Intent,但可以使用更改初始路线Intent。这个方法打开的是Flutter默认入口不能自定义你想要打开的Flutter的页面

2 使用 FlutterActivity.withNewEngine().initialRoute 这种方式
startActivity(FlutterActivity.withNewEngine().initialRoute("route_page").build(MainActivity.this));

这个就可以通过在 initialRoute 里面传入你Flutter module 项目里面配置的命名路由地址 从而选择打开你想要打开的Flutter页面

3 启动Flutteractivity并且传值



我们还是在通过 FlutterActivity.withNewEngine().initialRoute 在initialRoute 里面传传值
  startActivity(FlutterActivity.withNewEngine().initialRoute("{name:'xq9527'}").build(MainActivity.this));

Flutter module 里面如何接收数据

import 'package:Flutter/material.dart';import 'dart:ui';import 'my_home_page.dart';import 'default_page.dart';voID main() => runApp(     MyApp(initParams:window.defaultRoutename));class MyApp extends StatelessWidget {  String initParams = '';  MyApp({this.initParams});  @overrIDe  Widget build(BuildContext context) {    return MaterialApp(      Title: 'Flutter Demo',      theme: themeData(        primarySwatch: colors.blue,      ),        // routes: {        //   "/": (context) => DefaultPage(Title: '路由默认页面'),        //   'route_page':(context) => MyHomePage(Title: '路由页面Page1'),        // },     // home: "/",      home: MyHomePage(Title: this.initParams,),    );  }}

在Flutter module 我们需要在入口main方法中实例化的myapp 入口的时候 传入window.defaultRoutename 我们的默认路由的参数 然后在我们的Flutter中去使用原生传过来的数据

使用FlutterEnginepackage com.example.nativedemo;import androID.app.Application;import io.Flutter.embedding.engine.FlutterEngine;import io.Flutter.embedding.engine.FlutterEngineCache;import io.Flutter.embedding.engine.dart.DartExecutor;/*** * *创建人xuqing * 创建时间:2021/4/20 * 类说明:启动入口 */public class MyApplication extends Application {    public static final String ENGINEID = "my_engine_ID";    @OverrIDe    public voID onCreate() {        super.onCreate();        initFlutterEngine();    }    private voID initFlutterEngine(){        // Instantiate a FlutterEngine.        FlutterEngine FlutterEngine = new FlutterEngine(this);        FlutterEngine.getNavigationChannel().setinitialRoute("route_page");// 配置默认启动路由        // Start executing Dart code to pre-warm the FlutterEngine.        FlutterEngine.getDartExecutor().executeDartEntrypoint(                DartExecutor.DartEntrypoint.createDefault()        );        // Cache the FlutterEngine to be used by FlutterActivity.        FlutterEngineCache                .getInstance()                .put(ENGINEID, FlutterEngine);    }}

使用方式

   FlutterActivity.withCachedEngine(MyApplication.ENGINEI).build(MainActivity.this);
使用FlutterFragment默认启动方式
 FragmentTransaction fragmentTransaction=getSupportFragmentManager().beginTransaction();        FlutterFragment FlutterFragment=null;        //默认启动方式        FlutterFragment = FlutterFragment.createDefault();        fragmentTransaction.add(R.ID.main_framelayout, FlutterFragment);        fragmentTransaction.commit();
指定路由页面
FragmentTransaction fragmentTransaction=getSupportFragmentManager().beginTransaction();        FlutterFragment FlutterFragment== FlutterFragment.withNewEngine()                .initialRoute("route_page")                .build();        fragmentTransaction.add(R.ID.main_framelayout, FlutterFragment);        fragmentTransaction.commit();
使用FlutterEngine
  FragmentTransaction fragmentTransaction=getSupportFragmentManager().beginTransaction();        FlutterFragment FlutterFragment== FlutterFragment.withCachedEngine(MyApplication.ENGINEID)                .renderMode(RenderMode.surface)                .build();        fragmentTransaction.add(R.ID.main_framelayout, FlutterFragment);        fragmentTransaction.commit();

还有可以使用FluttervIEw 我这边就不展开讲了有兴趣的同学可以查看官方文档
Add Flutter to existing apps

最后总结

AndroID 原生引入Flutter module 实现起来相对比较简单 官方文档也比较详细,但是也有坑,我在文章中也提到了 这一期文章主要介绍了AndroID 引入Flutter module 的基础知识点 如果有纰漏请指正谢谢。最后希望我的文章能帮助到各位解决问题 ,以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ,麻烦给关注和star,小弟在这里谢过啦

总结

以上是内存溢出为你收集整理的Flutter android原生项目引入flutter module全部内容,希望文章能够帮你解决Flutter android原生项目引入flutter module所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1011962.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存