Flutter 11 Android原生项目集成Flutter Module

本文主要讲解如何在已有的Android原生老项目中集成Flutter模块。

实现流程:

1、在Android原生项目根目录下,创建Flutter Module;

2、修改Android原生项目settings.gradle,绑定 Flutter Module;

3、修改Android原生项目app目录下的build.gradle,添加flutter依赖;

4、使用Flutter Module里面的页面,显示在Android原生页面中。

一、创建Flutter Module

推荐在Android原生项目根目录下,创建Flutter Module,当然在其他目录下创建Flutter Module也是可以的,这里在Android原生项目根目录下创建Flutter Module主要是为了方便管理;

二、绑定 Flutter Module

打开Android原生项目根目录下的settings.gradle文件,修改下面内容,绑定 Flutter Module。

pluginManagement {
    repositories {
        gradlePluginPortal()
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.PREFER_SETTINGS)
    repositories {
        maven { url 'https://maven.aliyun.com/repository/public' }
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
        maven { url 'https://maven.aliyun.com/repository/central' }
        maven { url 'https://jitpack.io' }
        google()
        mavenCentral()
        maven {
            allowInsecureProtocol = true
            url 'http://download.flutter.io'
        }
    }

}

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

注意:new File(settingsDir,'flutter_lib/.android/include_flutter.groovy'),中settingsDir获取到的是Android原生项目根目录,如果你创建的Flutter Module不是在原生项目根目录下,需要修改settingsDir的值。

三、添加flutter依赖

打开Android原生项目app目录下的build.gradle 文件,修改下面内容,添加flutter依赖。

implementation project(':flutter')

修改完后,执行 Sync Now,同步一下项目,待flutter相关插件下载完成,出现下面图标,即成功依赖创建的Flutter Module。

四、 使用Flutter Module页面

以FlutterFragment方式,将Flutter Module页面插入原生页面中。

1、创建Flutter页面

在fluter_lib/lib目录下,创建两个空页面HomelandPage和VideoPage。

homeland_page.dart

Dart 复制代码
/*年轻人,只管向前看,不要管自暴自弃者的话*/

import 'package:flutter/cupertino.dart';

///create by itz on 2024-10-18 16:56
///desc :
class HomelandPage extends StatefulWidget {
  const HomelandPage({super.key});

  @override
  State<HomelandPage> createState() => _HomelandPageState();
}

class _HomelandPageState extends State<HomelandPage> {
  @override
  Widget build(BuildContext context) {
    return const Text("HomelandPage");
  }
}

video_page.dart

Dart 复制代码
/*年轻人,只管向前看,不要管自暴自弃者的话*/

import 'package:flutter/cupertino.dart';

///create by itz on 2024-10-18 17:27
///desc :
class VideoPage extends StatefulWidget {
  const VideoPage({super.key});

  @override
  State<VideoPage> createState() => _VideoPageState();
}

class _VideoPageState extends State<VideoPage> {
  @override
  Widget build(BuildContext context) {
    return const Text("VideoPage");
  }
}

2、修改Flutter MyApp

在创建Flutter Module时,会自动生成main.dart 文件作为Flutter的入口文件。修改main.dart 文件里面的MyApp,适配当Android原生页面传入不同的路由地址时,启动对应的页面。

Dart 复制代码
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_lib/page/homeland_page.dart';
import 'package:flutter_lib/page/video_page.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: _pageRoute(window.defaultRouteName),
    );
  }

  _pageRoute(String defaultRouteName) {
    switch (defaultRouteName) {
      case "main/homeland":
        return const HomelandPage();
      case "main/video":
        return const VideoPage();
      default:
        return const HomelandPage();
    }
  }
}

3、原生页面绑定Flutter页面

在Android原生页面中,通过FlutterFragment函数,以Fragment的方式获取到Flutter页面。

Kotlin 复制代码
val homelandFragment = FlutterFragment.withNewEngine().initialRoute("main/homeland")
                    .build<FlutterFragment>()

val videoFragment = FlutterFragment.withNewEngine().initialRoute("main/video")
                    .build<FlutterFragment>()

注意:原生创建FlutterFragment时传入的路由名称,要跟MyApp里面编写的路由名称保持一致。

最终实现效果如下:

相关推荐
lqj_本人5 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人8 小时前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
起司锅仔12 小时前
Flutter启动流程(2)
flutter
hello world smile16 小时前
最全的Flutter中pubspec.yaml及其yaml 语法的使用说明
android·前端·javascript·flutter·dart·yaml·pubspec.yaml
lqj_本人16 小时前
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
flutter·harmonyos
iFlyCai16 小时前
极简实现酷炫动效:Flutter隐式动画指南第二篇之一些酷炫的隐式动画效果
flutter
lqj_本人16 小时前
Flutter&鸿蒙next 中使用 MobX 进行状态管理
flutter·华为·harmonyos
lqj_本人16 小时前
Flutter&鸿蒙next 中的 setState 使用场景与最佳实践
flutter·华为·harmonyos
hello world smile17 小时前
Flutter常用命令整理
android·flutter·移动开发·android studio·安卓
lqj_本人20 小时前
Flutter&鸿蒙next 中的 Expanded 和 Flexible 使用技巧详解
flutter·harmonyos