随着 Flutter 的流行，越来越多的开发者希望在现有的 Android 应用中引入 Flutter 的功能。本文将介绍如何在Android 应用中嵌入 Flutter View，并提供示例代码来帮助开发者快速上手。
1. 环境准备
在开始之前，请确保您已安装以下工具：
- Android Studio
- Flutter SDK
首先，您需要在您的 Android 应用中添加 Flutter 依赖。在 build.gradle 文件中添加 Flutter 相关的依赖：
|
1 2 3 |
dependencies { implementation 'io.flutter:flutter_embedding_debug:1.0.0' // 请根据具体版本调整 } |
2. 创建Flutter Module
接下来，您需要创建一个 Flutter 模块。在命令行中运行以下命令：
|
1 |
flutter create -t module flutter_module |
这将创建一个名为 flutter_module 的 Flutter 模块。
3. 在Android中集成Flutter
3.1 修改Android原生代码
在您的 Android 项目中，首先需要设置 Flutter 引擎。在 Acticity 的 onCreate 方法中，添加如下代码来初始化 Flutter：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import io.flutter.embedding.android.FlutterActivity; import io.flutter.embedding.engine.FlutterEngine; import io.flutter.plugin.common.MethodChannel; public class MainActivity extends AppCompatActivity { private static final String CHANNEL = "com.example.channel"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Initialize Flutter Engine FlutterEngine flutterEngine = new FlutterEngine(this); flutterEngine.getDartExecutor().executeDartEntrypoint( DartExecutor.DartEntrypoint.createDefault() ); // Set up MethodChannel to communicate between Android and Flutter new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL) .setMethodCallHandler((call, result) -> { // Handle method calls from Flutter here }); // Start FlutterActivity FlutterActivity.withCachedEngine("my_engine_id") .startActivity(this); } } |
3.2 在XML布局中添加FlutterView
接下来，您可以在 XML 布局中添加 FlutterView。这里是一个示例布局：
|
1 2 3 4 5 6 7 8 9 |
<RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <io.flutter.embedding.android.FlutterView android:id="@+id/flutter_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout> |
3.3 Flutter View的显示
在设置好布局后，您需要在 Java 代码中加载 FlutterView 并显示它：
|
1 2 |
FlutterView flutterView = findViewById(R.id.flutter_view); flutterView.attachToFlutterEngine(flutterEngine); |
3.4 生命周期绑定
在 Android Acvitity 的生命周期中调用 appIsResumed()、appIsInactive、appIsPaused、appIsDetached以通知 Flutter 界面进入相应状态，否则页面会出现绘制异常。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@Override protected void onResume() { super.onResume(); /*...dosomething*/ getEngine().getLifecycleChannel().appIsResumed(); } @Override protected void onPause() { super.onPause(); /*...dosomething*/ getEngine().getLifecycleChannel().appIsInactive(); } @Override protected void onDestroy() { super.onDestroy(); /*...dosomething*/ getEngine().getLifecycleChannel().appIsDetached(); } |