Flutter 48: 图解 Android 原生集成 Flutter Module

简介: 0 基础学习 Flutter,第四十八步: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 交互接触较少,需进一步学习;如有错误请多多指导!

来源:阿策小和尚
欢迎闲来吐槽~

目录
相关文章
|
1月前
|
Android开发
Android基于gradle task检查各个module之间资源文件冲突情况
Android基于gradle task检查各个module之间资源文件冲突情况
Android基于gradle task检查各个module之间资源文件冲突情况
|
29天前
|
ARouter Android开发
Android不同module布局文件重名被覆盖
Android不同module布局文件重名被覆盖
|
1月前
|
Android开发
Android gradle task任务检查各个module之间资源文件冲突.md
Android gradle task任务检查各个module之间资源文件冲突.md
Android gradle task任务检查各个module之间资源文件冲突.md
|
15天前
|
安全 测试技术 数据安全/隐私保护
原生鸿蒙应用市场开发者服务的技术解析:从集成到应用发布的完整体验
原生鸿蒙应用市场开发者服务的技术解析:从集成到应用发布的完整体验
|
20天前
|
移动开发 Dart 搜索推荐
打造个性化安卓应用:从零开始的Flutter之旅
【10月更文挑战第20天】本文将引导你开启Flutter开发之旅,通过简单易懂的语言和步骤,让你了解如何从零开始构建一个安卓应用。我们将一起探索Flutter的魅力,实现快速开发,并见证代码示例如何生动地转化为用户界面。无论你是编程新手还是希望扩展技能的开发者,这篇文章都将为你提供价值。
|
1月前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案:Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上,安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择:是专注于单一平台深耕细作,还是寻找一种能够横跨两大系统的开发方案?Flutter,作为一种新兴的跨平台UI工具包,正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟,从Flutter的基础概念到实战应用,深入浅出地介绍这一技术的魅力所在。
74 7
|
2月前
|
开发框架 搜索推荐 开发工具
打造个性化安卓应用:从零开始的Flutter之旅
【8月更文挑战第51天】本文是一篇面向初学者的Flutter入门教程,旨在通过简单易懂的语言和实际代码示例,引导读者步入跨平台移动应用开发的世界。文章首先介绍了Flutter的基本概念和优势,然后逐步展示了如何搭建开发环境、创建第一个Flutter应用,并实现了一个简单的待办事项列表。最后,文章探讨了Flutter在实现高性能和美观界面方面的潜力,鼓励读者发挥创意,探索更多可能。
85 15
|
28天前
|
Dart Android开发
鸿蒙Flutter实战:03-鸿蒙Flutter开发中集成Webview
本文介绍了在OpenHarmony平台上集成WebView的两种方法:一是使用第三方库`flutter_inappwebview`,通过配置pubspec.lock文件实现;二是编写原生ArkTS代码,自定义PlatformView,涉及创建入口能力、注册视图工厂、处理方法调用及页面构建等步骤。
47 0
|
2月前
|
Dart 开发工具 Android开发
在 Android 系统上搭建 Flutter 环境的具体步骤是什么?
在 Android 系统上搭建 Flutter 环境的具体步骤是什么?
|
2月前
|
开发框架 Dart 前端开发
Android 跨平台方案对比之Flutter 和 React Native
本文对比了 Flutter 和 React Native 这两个跨平台移动应用开发框架。Flutter 使用 Dart 语言,提供接近原生的性能和丰富的组件库;React Native 则基于 JavaScript,具备庞大的社区支持和灵活性。两者各有优势,选择时需考虑团队技能和项目需求。
332 8

热门文章

最新文章