Flutter 学习之旅 之 flutter 作为 module ,在 Android 的工程中继承FlutterActivity直接启动Flutter界面功能的简单整理

Flutter 学习之旅 之 flutter 作为 module ,在 Android 的工程中继承FlutterActivity直接启动Flutter界面功能的简单整理

目录

Flutter 学习之旅 之 flutter 作为 module ,在 Android 的工程中继承FlutterActivity直接启动Flutter界面功能的简单整理

一、简单介绍

二、Android 工程中使用 MainActivity extends FlutterActivity 来实现 Android 中直接 启动 Flutter 的实现原理

三、简单效果预览

四、案例简单实现步骤

五、关键代码


一、简单介绍

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

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

二、Android 工程中使用 MainActivity extends FlutterActivity 来实现 Android 中直接 启动 Flutter 的实现原理

在 Android 工程中,通过让 MainActivity 继承自 FlutterActivity 来直接启动 Flutter 界面,这种实现方式的核心原理是利用 Flutter 提供的嵌入机制(Flutter Embedding),将 Flutter 引擎和 Flutter 界面集成到 Android 应用中。以下是详细的实现原理:

1. Flutter 引擎初始化

Flutter 引擎是 Flutter 应用的核心,负责运行 Dart 代码、管理渲染和交互逻辑。当 MainActivity 继承自 FlutterActivity 时,Flutter 框架会自动初始化 Flutter 引擎。

  • FlutterEngineFlutterActivity 内部会创建一个 FlutterEngine 实例。FlutterEngine 是 Flutter 的核心运行时环境,它负责加载和执行 Dart 代码。

  • Dart 入口点:Flutter 引擎会加载 Flutter 模块中的 Dart 入口点(通常是 main.dart 文件中的 main() 函数)。Dart 代码的执行由 Flutter 引擎的 Dart 执行器(DartExecutor)负责。

2. FlutterActivity 的作用

FlutterActivity 是 Flutter 提供的一个封装类,它继承自 Android 的 AppCompatActivity,并实现了以下功能:

  • 初始化 Flutter 引擎FlutterActivity 会自动初始化 FlutterEngine,并将其绑定到当前 Activity。

  • 加载 Flutter 界面FlutterActivity 会创建一个 FlutterView,并将其作为当前 Activity 的根视图。FlutterView 是 Flutter 界面的 Android 表示,负责渲染 Flutter 的 UI。

  • 管理生命周期FlutterActivity 会处理 Android 的生命周期事件(如 onCreateonResumeonPause 等),并将这些事件传递给 Flutter 引擎,确保 Flutter 界面能够正确响应。

3. Flutter 界面的加载

FlutterActivity 被启动时,Flutter 引擎会加载 Dart 入口点,并开始执行 Dart 代码。Dart 代码会构建 Flutter 界面,并通过 Flutter 引擎将其渲染到 FlutterView 中。

  • Dart 入口点:Flutter 的 Dart 入口点通常在 main.dart 文件中定义

  • FlutterViewFlutterView 是一个 Android 的 View,它负责将 Flutter 的渲染内容显示到屏幕上。Flutter 引擎会将渲染的帧传递给 FlutterView,并由 FlutterView 进行显示。

三、简单效果预览

四、案例简单实现步骤

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、在 MainActivity 中 引入 Flutter 相关,并实现继承启动 Flutter 界面的代码

9、在 AndroidManifest.xml 中,添加需要的一些配置

10、打包运行,简单效果如下

五、关键代码

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;

// 导入 FlutterActivity 类,这是 Flutter 提供的一个封装类,用于嵌入 Flutter 界面
import io.flutter.embedding.android.FlutterActivity;

// 定义 MainActivity 类,并继承自 FlutterActivity
// 继承 FlutterActivity 表示 MainActivity 将直接加载 Flutter 界面
public class MainActivity extends FlutterActivity {
    // MainActivity 类中不需要额外的代码实现
    // FlutterActivity 已经封装了以下功能:
    // 1. 初始化 Flutter 引擎(FlutterEngine)。
    // 2. 创建 FlutterView 并将其设置为当前 Activity 的根视图。
    // 3. 管理 Android 生命周期事件(如 onCreate、onResume、onPause 等),
    //    并将这些事件传递给 Flutter 引擎,确保 Flutter 界面能够正确响应。
}

3、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>

4、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'

5、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 版本依赖
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

仙魁XAN

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值