Flutter 学习之旅 之 flutter 作为 module ，在 Android 的界面中嵌入Flutter界面功能的简单整理

发布于：2025-05-01 ⋅ 阅读:(25) ⋅ 点赞:(0)

Flutter 学习之旅 之 flutter 作为 module ，在 Android 的界面中嵌入Flutter界面功能的简单整理

目录

Flutter 学习之旅 之 flutter 作为 module ，在 Android 的界面中嵌入Flutter界面功能的简单整理

一、简单介绍

二、在同一个布局中同时显示 Android 和 Flutter 界面 的实现原理

1. Flutter 的嵌入机制

2. FlutterEngine 的作用

3. FlutterView 的工作原理

4. FlutterFragment 的工作原理

三、简单效果预览

四、案例简单实现步骤

五、关键代码

一、简单介绍

Flutter 是一款开源的 UI 软件开发工具包，由 Google 开发和维护。它允许开发者使用一套代码同时构建跨平台的应用程序，包括移动设备（iOS 和 Android）、Web 和桌面平台（Windows、macOS 和 Linux）。

Flutter 使用 Dart 编程语言，它可以将代码编译为 ARM 或 Intel 机器代码以及 JavaScript，从而实现快速的性能。Flutter 提供了一个丰富的预置小部件库，开发者可以根据自己的需求灵活地控制每个像素，从而创建自定义的、适应性强的设计，这些设计在任何屏幕上都能呈现出色的外观和感觉。

二、在同一个布局中同时显示 Android 和 Flutter 界面 的实现原理

在同一个布局中同时显示 Android 和 Flutter 界面的实现原理主要基于 Flutter 提供的嵌入机制，允许 Flutter 内容以视图的形式嵌入到原生 Android 布局中。以下是其实现原理的详细解释：

1. Flutter 的嵌入机制

Flutter 提供了两种主要方式将 Flutter 内容嵌入到原生 Android 应用中：

  • FlutterView：这是一个原生的 Android 视图，用于显示 Flutter 内容。

  • FlutterFragment：这是一个 Android Fragment，用于将 Flutter 内容嵌入到 Android 的 Fragment 管理系统中。

这两种方式的核心是通过 FlutterEngine 来运行 Flutter 的 Dart 代码，并将渲染结果绘制到一个原生的 Android 视图中。

2. FlutterEngine 的作用

FlutterEngine 是 Flutter 提供的一个核心组件，用于初始化和运行 Flutter 的 Dart 代码。它负责以下任务：

  • 加载 Dart 代码：从 APK 或其他资源中加载 Dart 文件，并执行 Dart 入口点（通常是 main() 函数）。

  • 管理渲染线程：负责将 Flutter 的渲染内容绘制到原生视图中。

  • 处理平台通道通信：通过 MethodChannel 和 EventChannel 实现 Flutter 和原生代码之间的通信。

  • 管理生命周期：与 Android 的生命周期（如 onPause、onResume）同步，确保 Flutter 内容在合适的时机进行渲染和暂停。

3. FlutterView 的工作原理

FlutterView 是一个原生的 Android 视图，用于显示 Flutter 内容。它的实现原理如下：

  • 创建 FlutterEngine：在 Android 代码中创建一个 FlutterEngine 实例，并将其与 FlutterView 关联。

  • 绑定 Dart 代码：通过 FlutterEngine 加载 Dart 代码，并指定 Dart 的入口点（通常是 main() 函数）。

  • 渲染 Flutter 内容：FlutterView 会接收来自 Flutter 引擎的渲染指令，并将其绘制到视图中。Flutter 引擎会将渲染内容转换为 OpenGL 或 Skia 的绘图命令，并通过 FlutterView 的 Surface 或 TextureView 进行渲染。

4. FlutterFragment 的工作原理

FlutterFragment 是一个 Android Fragment，用于将 Flutter 内容嵌入到 Android 的 Fragment 管理系统中。它的实现原理如下：

  • 创建 FlutterEngine：与 FlutterView 类似，FlutterFragment 也需要一个 FlutterEngine 实例来运行 Dart 代码。

  • 生命周期管理：FlutterFragment 会根据 Android 的 Fragment 生命周期（如 onCreate、onResume）管理 Flutter 引擎的生命周期，确保 Flutter 内容在合适的时机进行初始化和销毁。

  • 视图嵌入：FlutterFragment 内部会创建一个 FlutterView，并将 Flutter 内容渲染到该视图中。通过 Fragment 的 onCreateView 方法，将 FlutterView 返回给 Android 系统，从而实现 Flutter 内容的嵌入。

三、简单效果预览

四、案例简单实现步骤

1、在 Android Studio 中创建一个 Flutter 工程

2、选择创建 一个 Flutter Module

3、编写一个简单的 Flutter 界面

4、先再创建一个 Android 工程

5、回到 Flutter 工程，进行 Flutter - Build AAR 编译

6、编译完成后， 会有提示如何在 Android 工程中引用

7、在 Android 工程中，根据提示，在 settings.gradle 和 build.gradle 添加如下的提示内容

8、在 activity_main.xml 中添加一个 按钮，用来调起 Flutter 界面

9、在 MainActivity 中 引入 Flutter 相关，并实现点击 按钮 唤起 Flutter 界面的代码

10、在 AndroidManifest.xml 中，添加 FlutterActivity 相关属性

11、打包运行，简单效果如下

五、关键代码

1、main.dart

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', // 设置应用的标题，显示在系统任务栏或窗口标题中
      theme: ThemeData(
        primarySwatch: Colors.blue, // 设置应用的主题颜色，这里使用蓝色作为主色调
      ),
      home: MyHomePage(), // 设置应用的初始页面为 MyHomePage
    );
  }
}
 
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold( // 使用 Scaffold 提供一个基本的页面布局结构
      appBar: AppBar( // 添加一个应用栏（AppBar）作为页面的顶部导航
        title: Text('Flutter Module in Android'), // 设置应用栏的标题
      ),
      body: Center( // 设置页面的主体内容
        child: Text('Hello from Flutter!'), // 在页面中心显示一条文本消息
      ),
    );
  }
}

2、MainActivity.java

package com.example.test_android_embedding_flutter_0428;

import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentTransaction;

import io.flutter.embedding.android.FlutterFragment;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.embedding.engine.FlutterEngineCache;
import io.flutter.embedding.engine.dart.DartExecutor;

public class MainActivity extends AppCompatActivity {
    private FlutterEngine flutterEngine; // 用于运行 Flutter Dart 代码的核心引擎

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); // 设置当前 Activity 的布局文件

        // 初始化 FlutterEngine
        // 创建一个 FlutterEngine 实例，用于运行 Flutter 的 Dart 代码
        flutterEngine = new FlutterEngine(this);
        // 执行 Dart 入口点，默认是 main() 函数
        flutterEngine.getDartExecutor().executeDartEntrypoint(
                DartExecutor.DartEntrypoint.createDefault()
        );
        // 将 FlutterEngine 实例缓存到 FlutterEngineCache 中
        // 这样可以在需要时快速复用，避免重复初始化
        FlutterEngineCache.getInstance().put("my_flutter_engine", flutterEngine);

        // 获取按钮并设置点击事件
        findViewById(R.id.button).setOnClickListener(v -> {
            // 创建 FlutterFragment 实例
            // FlutterFragment 是一个 Android Fragment，用于嵌入 Flutter 界面
            FlutterFragment flutterFragment = FlutterFragment.createDefault();
            // 开始一个 Fragment 事务
            FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
            // 将 FlutterFragment 替换到布局中的 FrameLayout 容器中
            // R.id.fl_container 是布局文件中定义的 FrameLayout 的 ID
            transaction.replace(R.id.fl_container, flutterFragment);
            // 提交事务，使 Flutter 界面显示出来
            transaction.commit();
        });
    }
}

代码注释说明

  1. FlutterEngine 的初始化

    • new FlutterEngine(this)：创建一个 FlutterEngine 实例，用于运行 Flutter 的 Dart 代码。

    • executeDartEntrypoint：指定 Dart 的入口点，默认是 main() 函数。这是 Flutter 应用的起点。

    • FlutterEngineCache.getInstance().put("my_flutter_engine", flutterEngine)：将初始化好的 FlutterEngine 缓存起来，以便后续复用。这可以避免重复初始化 Flutter 引擎，提高性能。

  2. 按钮点击事件

    • findViewById(R.id.button)：通过 ID 获取布局中的按钮。

    • setOnClickListener：为按钮设置点击事件监听器。

    • FlutterFragment.createDefault()：创建一个默认的 FlutterFragment 实例。FlutterFragment 是一个 Android Fragment，用于嵌入 Flutter 界面。

    • getSupportFragmentManager().beginTransaction()：开始一个 Fragment 事务，用于管理 Fragment 的添加、替换等操作。

    • transaction.replace(R.id.fl_container, flutterFragment)：将 FlutterFragment 替换到布局中的 FrameLayout 容器中。R.id.fl_container 是布局文件中定义的容器 ID。

    • transaction.commit()：提交事务，使 Flutter 界面显示出来。

3、activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 定义一个按钮，点击后会显示 Flutter 界面 -->
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="打开 Flutter 界面" />

    <!-- 定义一个 FrameLayout 作为容器，用于嵌入 Flutter 界面 -->
    <FrameLayout
        android:id="@+id/fl_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

4、AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Test_Android_Embedding_Flutter_0428"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

5、settings.gradle

pluginManagement {
    // 配置插件管理相关的设置
    repositories {
        // 定义插件管理的仓库来源
        google {
            // 使用 Google 的 Maven 仓库
            content {
                // 定义需要包含的组（group）正则表达式
                includeGroupByRegex("com\\.android.*")  // 包含以 "com.android" 开头的组
                includeGroupByRegex("com\\.google.*")   // 包含以 "com.google" 开头的组
                includeGroupByRegex("androidx.*")       // 包含以 "androidx" 开头的组
            }
        }
        mavenCentral()  // 使用 Maven Central 仓库
        gradlePluginPortal()  // 使用 Gradle 插件门户
    }
}
 
dependencyResolutionManagement {
    // 配置依赖解析相关的设置
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)  // 设置仓库模式，如果项目中有仓库配置错误则失败
    repositories {
        google()  // 使用 Google 的 Maven 仓库
        mavenCentral()  // 使用 Maven Central 仓库
    }
 
    // 定义 Flutter 模块的存储 URL
    String storageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?: "https://storage.googleapis.com"
    // 如果环境变量 FLUTTER_STORAGE_BASE_URL 未设置，则使用默认的 Flutter 存储 URL
    // 注意：该 URL 是 Flutter 依赖项的默认存储位置，但由于网络原因，可能无法直接访问
    // 如果您遇到问题，请检查链接的合法性或在网络正常的情况下重试
 
    repositories {
        maven {
            // 定义本地 Maven 仓库路径
            url 'D:/UsingForXAN/Projects/AndroidStudioProjects/FlutterProject/test_flutter_module_0418/build/host/outputs/repo'
        }
        maven {
            // 定义远程 Maven 仓库路径
            url "$storageUrl/download.flutter.io"
        }
    }
}
 
// 设置项目的根项目名称
rootProject.name = "Test_Android_Embedding_Flutter_0428"
// 包含子项目 'app'，这是 Android 项目的主模块
include ':app'

6、build.gradle

plugins {
    alias(libs.plugins.android.application)
}
// 定义项目使用的插件
// 这里使用了 alias 来引用预定义的插件，通常是定义在 buildSrc 或其他地方的插件别名
// 这里引用的是 Android 应用插件，用于构建 Android 应用
 
android {
    namespace 'com.example.test_android_embedding_flutter_0428'
    // 设置项目的命名空间，用于区分不同的应用
    compileSdk 35
    // 设置编译 SDK 的版本，这里是 API 级别 35
 
    defaultConfig {
        applicationId "com.example.test_android_embedding_flutter_0428"
        // 设置应用的唯一标识符
        minSdk 28
        // 设置应用支持的最低 SDK 版本
        targetSdk 34
        // 设置应用的目标 SDK 版本
        versionCode 1
        // 设置应用的版本代码，用于内部版本管理
        versionName "1.0"
        // 设置应用的版本名称，显示给用户
 
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        // 设置用于运行 Android 测试的测试运行器
    }
 
    buildTypes {
        release {
            minifyEnabled false
            // 是否启用代码混淆，这里设置为 false 表示不启用
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
            // 指定 ProGuard 配置文件，用于代码混淆规则
        }
        profile {
            initWith debug
            // 将 profile 构建类型初始化为 debug 构建类型的配置
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        // 设置源代码的 Java 版本兼容性
        targetCompatibility JavaVersion.VERSION_1_8
        // 设置目标字节码的 Java 版本兼容性
    }
}
 
dependencies {
    // 定义项目的依赖项
 
    implementation libs.appcompat
    // 添加 AndroidX AppCompat 库的依赖，用于支持旧版本 Android 的兼容性
    implementation libs.material
    // 添加 Material Design 组件库的依赖，用于构建 Material Design 风格的界面
    implementation libs.activity
    // 添加 Activity 组件库的依赖，用于支持新的 Activity API
    implementation libs.constraintlayout
    // 添加 ConstraintLayout 布局库的依赖，用于构建复杂的布局
 
    testImplementation libs.junit
    // 添加 JUnit 测试框架的依赖，用于编写单元测试
    androidTestImplementation libs.ext.junit
    // 添加扩展的 JUnit 测试框架的依赖，用于 Android 测试
    androidTestImplementation libs.espresso.core
    // 添加 Espresso 测试框架的依赖，用于编写 UI 测试
 
    debugImplementation 'com.example.test_flutter_module_0418:flutter_debug:1.0'
    // 在 debug 构建类型中添加 Flutter 模块的 debug 版本依赖
    profileImplementation 'com.example.test_flutter_module_0418:flutter_profile:1.0'
    // 在 profile 构建类型中添加 Flutter 模块的 profile 版本依赖
    releaseImplementation 'com.example.test_flutter_module_0418:flutter_release:1.0'
    // 在 release 构建类型中添加 Flutter 模块的 release 版本依赖
}

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布