关于作者: CSDN内容合伙人、技术专家, 从零开始做日活千万级APP,带领团队单日营收超千万。
专注于分享各领域原创系列文章 ,擅长java后端、移动开发、商业化变现、人工智能等,希望大家多多支持。
一、导读
我们继续总结学习flutter boost基础知识,温故知新。
二、概览
FlutterBoost 是阿里系闲鱼技术团队开源的 Flutter 插件,它可以轻松为现有原生应用程序提供 Flutter 混合集成方案。
其理念是将 Flutter 像 WebView 那样来使用。FlutterBoost 帮开发者处理 Native 与 Flutter 页面的映射和跳转,
开发者只需关心页面的名字和参数即可 ( 通常可以是 URL ) 。可以让一个成熟的原生 APP 项目,在不用推翻重做的前提下,
方便快捷的开始 Flutter 混合开发,几乎不影响原有的 Native 项目。同时 FlutterBoost 也是在 Flutter
官方提供的混合开发解决方案上探索出来的最优解,并已在闲鱼 APP 线上环境中运用,承受着亿级用户量的检测,稳定性值得肯定。
三、接入
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 {
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
/// 由于很多同学说没有跳转动画,这里是因为之前exmaple里面用的是 [PageRouteBuilder],
/// 其实这里是可以自定义的,和Boost没太多关系,比如我想用类似iOS平台的动画,
/// 那么只需要像下面这样写成 [CupertinoPageRoute] 即可
/// (这里全写成[MaterialPageRoute]也行,这里只不过用[CupertinoPageRoute]举例子)
///
/// 注意,如果需要push的时候,两个页面都需要动的话,
/// (就是像iOS native那样,在push的时候,前面一个页面也会向左推一段距离)
/// 那么前后两个页面都必须是遵循CupertinoRouteTransitionMixin的路由
/// 简单来说,就两个页面都是CupertinoPageRoute就好
/// 如果用MaterialPageRoute的话同理
Map<String,