现有Android项目集成Flutter模块

最新推荐文章于 2025-01-10 07:55:14 发布

原创最新推荐文章于 2025-01-10 07:55:14 发布 · 置顶 · 630 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android和flutter混合 #flutter混合 #android集成flutter

android 同时被 2 个专栏收录

11 篇文章

订阅专栏

Flutter

1 篇文章

订阅专栏

本文详细介绍如何在Android项目中整合Flutter模块，包括创建工程、配置Gradle、引入Flutter模块、处理AndroidX兼容性、定义路由及页面加载流程，帮助开发者实现跨平台应用开发。

1、创建Flutter Mix的Android工程：

注意：如果是使用androidx库，那么默认建立的Flutter模块项目要进行依赖的替换，后面会详细讲解。

2、建立要项目后在app工程的build.gradle中android{}节点下加入：

    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }

3、打开Terminal输入创建flutter模块命令：

flutter create -t module --org com.demo my_flutter

4、打开项目settings.gradle文件，将Flutter模块的android调用引入进工程：

setBinding(new Binding([gradle: this]))                                 // new
evaluate(new File(                                                      // new
        settingsDir.getPath(),                                               // new
        'my_flutter/.android/include_flutter.groovy'                          // new
))

5、在app工程的build.gradle中添加Flutter模块的依赖：

    implementation project(':flutter')

6、如果是使用androidx的依赖库，那么还需要在Flutter模块的pubspec.yaml中找到androidX设置为true并rebuild项目:

7、修改my_flutter下lib中main代码，定义android调用flutter的路由：

import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(_widgetForRoute(window.defaultRouteName));// defaultRouteName为android调用flutter的传参

Widget _widgetForRoute(String route) {
  switch (route) {
    case 'flutter/main': //根据android传参返回对应的flutter页面
      return MyApp();
    default:
      return Center(
        child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
      );
  }
}

8、在android中调用Flutter页面：

// 以Fragment的形式加载Flutter页面        
findViewById(R.id.bt_load).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                FragmentTransaction tx = getSupportFragmentManager().beginTransaction();
                tx.replace(R.id.fl_content, Flutter.createFragment("flutter/main")); // 传入路由参数
                tx.commit();
            }
        });

9、运行：