专栏首页阿策小和尚【Flutter 专题】48 图解 Android 原生集成 Flutter Module

【Flutter 专题】48 图解 Android 原生集成 Flutter Module

和尚接触了 Flutter 一段时间,但与原生交互方面还未曾接触,今天根据 官方文档 学习一下 Android 原生如何集成最基本的 Flutter Module

集成方式

1. 新建 Android Project

和尚为了测试方便,新建一个 Android Project,本地路径为 ../ACE_Android/ACE_Demo01

2. 新建 Flutter Module

2.1 命令行方式

和尚首先采用如下命令行新建一个 Flutter Module,此时本地路径为 ../ACE_AndroidACE_Demo01 同级;

flutter create -t module my_flutter
2.2 AndroidStudio 工具方式

和尚也用 AndroidStudio 尝试,同样简单便利;File -> New -> New Flutter Project -> Flutter Module

3. Android Project 中添加依赖

3.1 手动引入
  1. setting.gradle 中加入 Flutter 的引入;
include ':app'
//加入下面配置
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'my_flutter/.android/include_flutter.groovy'
))
  1. app/build.project 中添加 Flutter 依赖;
implementation project(':flutter')
3.2 AndroidStudio 工具引入

可采用 Flie -> Sync Project with Grdle Files 时,可通过 Import Flutter Module 方式引入;此时若报 The Gradle files could not be updated automatically 则需要手动 3.1 操作;

4. 原生与 Flutter 交互

Android 引用 Flutter 通常是两种,一种是新建一个 View 用来展示 Flutter 页面,另一种是 Fragment;其本质还是将 Flutter View 作为 Android View 的子 View 展示;

和尚新建一个无标题栏的 FlutterActivity 和一个 FlutterFragment,在 MainActivity 添加一个按钮跳转到 FlutterActivity 展示 FlutterFragment

public class FlutterActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flutter);

        getSupportFragmentManager().beginTransaction()
            .replace(R.id.container, new FlutterFragment())
            .commit();
    }
}

public class FlutterFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
        @Nullable Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_main, container, false);
        getActivity().getSupportFragmentManager()
            .beginTransaction()
            .add(R.id.container, Flutter.createFragment("/"))
            .addToBackStack("flFlutter.createFragmentutter")
            .commit();

        return rootView;
    }
}

通过 Flutter.createFragment("/") 设置跳转路由;

5. 签名打包

和尚直接运行 debuge 模式一切正常,只是在跳转 Flutter 时不如直接跳转原生流畅,后期优化;而打包成 release 包与 Android 原生相同,无需特别处理 Flutter Module

注意事项

1. minSdkVersion >= 16

和尚在集成过程中,使用 Flutter 时会提示 SDK 最低版本在 16 以上,需注意;

2. Flutter Module 路径

和尚在学习过程中,无论是命令行创建还是 AndroidStudio 工具创建 Flutter Module 路径并非一定要与 Android Project 同级,关键是 setting.gradle 路径配置;

new File 文件第一个参数 settingsDir.parentFileAndroid Project 所在文件路径,第二个参数为 Flutter Module.groovy 路径;我们可以使用只有一个参数的完整路径;

// 两个参数
evaluate(new File(
        settingsDir.parentFile,
        'my_flutter/.android/include_flutter.groovy'
))

// 一个参数
evaluate(new File(
    '/Users/user/Documents/workspace/ACE_Flutter/flutter_module01/flutter_module01/.android/include_flutter.groovy'
))

3. 新的 evalute 会覆盖上一个

和尚测试是,在 setting.gradle 中引入多个 evalue,以为可以同时引入多个 Flutter Module,而实际是后面的引入会覆盖先前的引入,以最后一个 evalue module 为准;


和尚对 AndroidFlutter 交互接触较少,需进一步学习;如有错误请多多指导!

本文分享自微信公众号 - 阿策小和尚(gh_8297e718c166),作者:阿策小和尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Flutter 专题】 03 图解第一个程序 Hello World!

    无论是学习哪门语言,第一个程序都是 Hello world! 和尚我最近在学习 Flutter 因此整理一下在第一个测试 Demo 中遇到的一些问题...

    阿策
  • 【Flutter 专题】85 Flutter Attach 调试 Flutter Code

    在实际开发过程中,为了满足项目业务方面以及兼容历史代码等方面,经常会采取 Flutter 功能模块以 aar 或 Module 等引入方式;而 Flutter ...

    阿策
  • 【Flutter 专题】01 图解 Windows 环境下安装配置环境

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 同时可以与现有的代码一起工作。Flutter ...

    阿策
  • 浅谈跨平台框架 Flutter 的搭建与运行

    Flutter是Google推出的跨平台的解决方案,用以帮助开发者在 Android 和 iOS 两个平台开发高质量原生应用的全新移动 UI 框架。 之前我们为...

    个推
  • 编写你的第一个 Flutter App

    Flutter 是 Google 用以帮助开发者在 iOS 和 Andorid 两个平台开发高质量 UI 的移动 SDK,免费且开源。为了体验 Flutter ...

    icepy
  • 吐血教程:搭建Flutter开发环境

    Flutter开发环境的搭建比较烦琐,任何一个步骤失败都会导致最终环境搭建不能完成。Flutter支持三种环境:Windows、MacOS和Linux。这里我们...

    前端迷
  • Flutter 初尝:从 Java 无缝过渡

    准备阶段 下载 Flutter SDK 如果不能科学上网,可以声明 PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL 两个环境...

    吴小龙同學
  • Flutter实战:手把手教你写Flutter Plugin

    如果你对移动端有所关注,那么你一定会听说过Flutter。得益于Google,Flutter一经推出便得受到了广泛关注。很多开发者跃跃欲试,国内部分大厂,诸如美...

    JarvanMo
  • Flutter完整开发实战详解(二十、 Android PlatformView 和键盘问题)

    作为系列文章的第二十篇,本篇将结合官方的技术文档科普 Android 上 PlatformView 的实现逻辑,并且解释为什么在 Android 上 Platf...

    恋猫
  • Flutter100行轻松实现自定义P站和油管的Logo及自由切换Logo功能

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://www.jianshu.com/p/004b7a56bb51

    AWeiLoveAndroid

扫码关注云+社区

领取腾讯云代金券