从 Flutter 应用启动 Jetpack Compose Activity

原生 Android Activity 允许你启动完全由 Android 平台运行且在其上运行的全屏 UI。你只需在这些视图中编写 Kotlin 代码（尽管它们可能与 Dart 代码收发消息），并可使用原生 Android 功能的全部能力。

添加此功能需要对你的 Flutter 应用及其内部生成的 Android 应用进行多处修改。在 Flutter 侧，你需要创建新的平台 method channel 并调用其 invokeMethod 方法。在 Android 侧，你需要注册匹配的原生 MethodChannel 以接收来自 Dart 的信号，然后启动新的 Activity。请记住，所有 Flutter 应用（在 Android 上运行时）都存在于被 Flutter 应用完全占用的 Android Activity 中。因此，如代码示例所示，原生 MethodChannel 回调的任务是启动第二个 Activity。

并非所有 Android Activity 都使用 Jetpack Compose，但本教程假定你想使用 Compose。

在 Dart 侧，创建 method channel，并在特定用户交互（如点击按钮）时调用它。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
​
// SECTION 1: START COPYING HERE
const platformMethodChannel = MethodChannel(
  // Note: You can change this string value, but it must match
  // the `CHANNEL` attribute in the next step.
  'com.example.flutter_android_activity',
);
// SECTION 1: END COPYING HERE
​
void main() {
  runApp(const MainApp());
}
​
class MainApp extends StatelessWidget {
  const MainApp({super.key});
​
  // SECTION 2: START COPYING HERE
  void _launchAndroidActivity() {
    platformMethodChannel.invokeMethod(
      // Note: You can change this value, but it must match
      // the `call.method` value in the next section.
      'launchActivity',
​
      // Note: You can pass any primitive data types you like.
      // To pass complex types, use package:pigeon to generate
      // matching Dart and Kotlin classes that share serialization logic.
      {'message': 'Hello from Flutter'},
    );
  }
  // SECTION 2: END COPYING HERE
​
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: const Center(child: Text('Hello World!')),
        floatingActionButton: FloatingActionButton(
          // SECTION 3: Call `_launchAndroidActivity` somewhere.
          onPressed: _launchAndroidActivity,
​
          // SECTION 3: End
          tooltip: 'Launch Android activity',
          child: const Icon(Icons.launch),
        ),
      ),
    );
  }
}

Dart 与 Kotlin 代码中有 3 个重要值必须一致：

1. channel 名称（本示例中为 "com.example.flutter_android_activity"）。

2. 方法名称（本示例中为 "launchActivity"）。

3. Dart 传递的数据结构与 Kotlin 期望接收的数据结构。本例中，数据为仅含 "message" 键的 map。

你必须修改生成 Android 应用中的 4 个文件，以便启动新的 Compose Activity。

第一个需要修改的文件是 android/app/build.gradle。

1. Add the following to the existing android block:

2. 在现有 android 块中添加以下内容：

   • Kotlin
   • Groovy

   android/app/build.gradle.kts

   kotlin

   android {
     // Begin adding here
     buildFeatures {
       compose = true
     }
     composeOptions {
       // https://developer.android.com/jetpack/androidx/releases/compose-kotlin
       kotlinCompilerExtensionVersion = "1.4.8"
     }
     // End adding here
   }
   

   content_copy

   android/app/build.gradle

   groovy

   android {
     // Begin adding here
     buildFeatures {
       compose true
     }
     composeOptions {
       // https://developer.android.com/jetpack/androidx/releases/compose-kotlin
       kotlinCompilerExtensionVersion = "1.4.8"
     }
     // End adding here
   }
   

   content_copy

   访问代码片段中的 developer.android.com 链接，并按需调整 kotlinCompilerExtensionVersion。仅当你在 flutter run 期间收到错误且错误提示你机器上已安装的版本时，才需要这样做。

3. Next, add the following block at the bottom of the file, at the root level:

4. 接下来，在文件底部根级别添加以下块：

   • Kotlin
   • Groovy

   android/app/build.gradle.kts

   kotlin

   dependencies {
       implementation("androidx.core:core-ktx:1.10.1")
       implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.1")
       implementation("androidx.activity:activity-compose")
       implementation(platform("androidx.compose:compose-bom:2024.06.00"))
       implementation("androidx.compose.ui:ui")
       implementation("androidx.compose.ui:ui-graphics")
       implementation("androidx.compose.ui:ui-tooling-preview")
       implementation("androidx.compose.material:material")
       implementation("androidx.compose.material3:material3")
       testImplementation("junit:junit:4.13.2")
       androidTestImplementation("androidx.test.ext:junit:1.1.5")
       androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
       androidTestImplementation(platform("androidx.compose:compose-bom:2024.06.00"))
       androidTestImplementation("androidx.compose.ui:ui-test-junit4")
       androidTestImplementation("androidx.compose.ui:ui-test-junit4")
       debugImplementation("androidx.compose.ui:ui-tooling")
       debugImplementation("androidx.compose.ui:ui-test-manifest")
   }
   

   content_copy

   android/app/build.gradle

   groovy

   dependencies {
       implementation "androidx.core:core-ktx:1.10.1"
       implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.6.1"
       implementation "androidx.activity:activity-compose"
       implementation platform("androidx.compose:compose-bom:2024.06.00")
       implementation "androidx.compose.ui:ui"
       implementation "androidx.compose.ui:ui-graphics"
       implementation "androidx.compose.ui:ui-tooling-preview"
       implementation "androidx.compose.material:material"
       implementation "androidx.compose.material3:material3"
       testImplementation "junit:junit:4.13.2"
       androidTestImplementation "androidx.test.ext:junit:1.1.5"
       androidTestImplementation "androidx.test.espresso:espresso-core:3.5.1"
       androidTestImplementation platform("androidx.compose:compose-bom:2023.08.00")
       androidTestImplementation "androidx.compose.ui:ui-test-junit4"
       debugImplementation "androidx.compose.ui:ui-tooling"
       debugImplementation "androidx.compose.ui:ui-test-manifest"
   }
   

   content_copy

   第二个需要修改的文件是 android/build.gradle。

5. Add the following buildscript block at the top of the file:

6. 在文件顶部添加以下 buildscript 块：

   • Kotlin
   • Groovy

   android/build.gradle.kts

   kotlin

   buildscript {
       dependencies {
           // Replace with the latest version.
           classpath("com.android.tools.build:gradle:8.1.1")
       }
       repositories {
           google()
           mavenCentral()
       }
   }
   

   content_copy

   android/build.gradle

   groovy

   buildscript {
       dependencies {
           // Replace with the latest version.
           classpath 'com.android.tools.build:gradle:8.1.1'
       }
       repositories {
           google()
           mavenCentral()
       }
   }
   

   content_copy

   第三个需要修改的文件是 android/app/src/main/AndroidManifest.xml。

7. In the root application block, add the following <activity> declaration:

8. 在根 application 块中添加以下 <activity> 声明：

   android/app/src/main/AndroidManifest.xml

   xml

   <manifest xmlns:android="http://schemas.android.com/apk/res/android">
       <application
           android:label="flutter_android_activity"
           android:name="${applicationName}"
           android:icon="@mipmap/ic_launcher">
   ​
          // START COPYING HERE
           <activity android:name=".SecondActivity" android:exported="true" android:theme="@style/LaunchTheme"></activity>
          // END COPYING HERE
   ​
          <activity android:name=".MainActivity" …></activity>
         …
   </manifest>
   

   content_copy

   第四处也是最后一处需要修改的代码是 android/app/src/main/kotlin/com/example/flutter_android_activity/MainActivity.kt。在此编写实现所需 Android 功能的 Kotlin 代码。

9. Add the necessary imports at the top of the file:

10. 在文件顶部添加必要的 import：

    MainActivity.kt

    kotlin

    package com.example.flutter_android_activity
    ​
    import android.content.Intent
    import android.os.Bundle
    import androidx.activity.ComponentActivity
    import androidx.activity.compose.setContent
    import androidx.compose.foundation.layout.Column
    import androidx.compose.foundation.layout.fillMaxSize
    import androidx.compose.material3.Button
    import androidx.compose.material3.MaterialTheme
    import androidx.compose.material3.Surface
    import androidx.compose.material3.Text
    import androidx.compose.ui.Modifier
    import androidx.core.app.ActivityCompat
    import io.flutter.embedding.android.FlutterActivity
    import io.flutter.embedding.engine.FlutterEngine
    import io.flutter.plugin.common.MethodCall
    import io.flutter.plugin.common.MethodChannel
    import io.flutter.plugins.GeneratedPluginRegistrant
    

    content_copy

11. Modify the generated MainActivity class by adding a CHANNEL field and a configureFlutterEngine method:

12. 通过添加 CHANNEL 字段和 configureFlutterEngine 方法修改生成的 MainActivity 类：

    MainActivity.kt

    kotlin

    class MainActivity: FlutterActivity() {
        // This value must match the `MethodChannel` name in your Dart code.
        private val CHANNEL = "com.example.flutter_android_activity"
    ​
        override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
            GeneratedPluginRegistrant.registerWith(flutterEngine)
    ​
            MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler {
                call: MethodCall, result: MethodChannel.Result ->
                    when (call.method) {
                        // Note: This must match the first parameter passed to
                        // `platformMethodChannel.invokeMethod` in your Dart code.
                        "launchActivity" -> {
                            try {
                                // Takes an object, in this case a String.
                                val message = call.arguments
                                val intent = Intent(this@MainActivity, SecondActivity::class.java)
                                intent.putExtra("message", message.toString())
                                startActivity(intent)
                            } catch (e: Exception){}
                                result.success(true)
                            }
                            else -> {}
                    }
            }
        }
    }
    

    content_copy

13. Add a second Activity to the bottom of the file, which you referenced in the previous changes to AndroidManifest.xml:

14. 在文件底部添加第二个 Activity，即你在先前对 AndroidManifest.xml 修改中引用的 Activity：

    MainActivity.kt

    kotlin

    class SecondActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
    ​
            setContent {
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    Column {
                        Text(text = "Second Activity")
                        // Note: This must match the shape of the data passed from your Dart code.
                        Text("" + getIntent()?.getExtras()?.getString("message"))
                        Button(onClick = {  finish() }) {
                            Text("Exit")
                        }
                    }
                }
            }
        }
    }
    

    content_copy

这些步骤演示如何从 Flutter 应用启动原生 Android Activity，有时这是连接特定 Android 功能的简便方式。