当前位置：首页 > article >正文

flutter boost接入

article 2025/2/27 16:45:02

关于作者： CSDN内容合伙人、技术专家，从零开始做日活千万级APP，带领团队单日营收超千万。
专注于分享各领域原创系列文章，擅长java后端、移动开发、商业化变现、人工智能等，希望大家多多支持。

一、导读

我们继续总结学习flutter boost基础知识，温故知新。

二、概览

FlutterBoost 是阿里系闲鱼技术团队开源的 Flutter 插件，它可以轻松为现有原生应用程序提供 Flutter 混合集成方案。
其理念是将 Flutter 像 WebView 那样来使用。FlutterBoost 帮开发者处理 Native 与 Flutter 页面的映射和跳转，
开发者只需关心页面的名字和参数即可 ( 通常可以是 URL ) 。可以让一个成熟的原生 APP 项目，在不用推翻重做的前提下，
方便快捷的开始 Flutter 混合开发，几乎不影响原有的 Native 项目。同时 FlutterBoost 也是在 Flutter
官方提供的混合开发解决方案上探索出来的最优解，并已在闲鱼 APP 线上环境中运用，承受着亿级用户量的检测，稳定性值得肯定。

三、接入

flutter_boost开源地址

3.1 源码集成方式

1、新建一个文件夹FlutterBoostExample，这个文件夹下面放置另外三个文件夹。另外三个分别是您的Android工程，iOS工程，以及需要接入的flutter module
2、新建flutter module

在Android Studio 中打开你的Android 项目。
前往File > New > New Project...，此时New Project 弹窗会显示。
选择Flutter。
填写你的Flutter SDK path 并点击Next 继续。
完成你的Flutter 模块配置。

或者使用命令行创建：

flutter create -t module flutter_boost_module

然后在参考官方文档，https://github.com/alibaba/flutter_boost/blob/main/docs/install.md 进行集成。
首先，需要添加FlutterBoost依赖到yaml文件

flutter_boost:
  git:
    url: 'https://github.com/alibaba/flutter_boost.git'
    ref: '4.6.5'

之后在flutter工程下运行flutter pub get dart端就集成完毕了，然后可以在dart端放上一些代码,以下代码基于example3.0
//这里要特别注意，如果你的工程里已经有一个继承自WidgetsFlutterBinding的自定义Binding，则只需要将其with上BoostFlutterBinding
//如果你的工程没有自定义的Binding，则可以参考这个CustomFlutterBinding的做法 //BoostFlutterBinding用于接管Flutter App的生命周期，必须得接入的

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';

void main() {
   
  ///这里的CustomFlutterBinding调用务必不可缺少，用于控制Boost状态的resume和pause
  CustomFlutterBinding();
  runApp(MyApp());
}


///创建一个自定义的Binding，继承和with的关系如下，里面什么都不用写
class CustomFlutterBinding extends WidgetsFlutterBinding with BoostFlutterBinding {
   }

class MyApp extends StatefulWidget {
   
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
   
  /// 由于很多同学说没有跳转动画，这里是因为之前exmaple里面用的是 [PageRouteBuilder]，
  /// 其实这里是可以自定义的，和Boost没太多关系，比如我想用类似iOS平台的动画，
  /// 那么只需要像下面这样写成 [CupertinoPageRoute] 即可
  /// (这里全写成[MaterialPageRoute]也行，这里只不过用[CupertinoPageRoute]举例子)
  ///
  /// 注意，如果需要push的时候，两个页面都需要动的话，
  /// （就是像iOS native那样，在push的时候，前面一个页面也会向左推一段距离）
  /// 那么前后两个页面都必须是遵循CupertinoRouteTransitionMixin的路由
  /// 简单来说，就两个页面都是CupertinoPageRoute就好
  /// 如果用MaterialPageRoute的话同理

  Map<String,