Bootstrap

flutter boost接入

关于作者: 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 {
   
  
  _MyAppState createState() => _MyAppState();
}

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

  Map<String, 
;