Flutter性能优化插件flutter_boost的使用

简介

flutter_boost 是一个下一代 Flutter 和原生混合解决方案。它是一个 Flutter 插件，可以让你以最小的努力将 Flutter 集成到现有的原生应用程序中。flutter_boost 的哲学是让使用 Flutter 就像使用 WebView 一样简单。在现有应用程序中同时管理原生页面和 Flutter 页面并不是一件容易的事情，flutter_boost 会帮你处理页面解析。

特性

轻量级集成：快速将 Flutter 集成到现有原生项目中。
灵活的页面管理：支持动态注册 Flutter 页面，并能与原生页面无缝切换。
高效的页面复用：减少内存占用和性能开销。
丰富的回调机制：支持页面生命周期回调和事件通知。

使用步骤

1. 添加依赖

在你的 Flutter 项目中打开 pubspec.yaml 文件，并添加以下依赖：

dependencies:
  flutter_boost:
    git:
      url: 'https://github.com/alibaba/flutter_boost.git'
      ref: '1.12.13+2'  # 根据需要选择版本

然后执行以下命令安装依赖：

flutter pub get

2. 初始化插件

在 main.dart 文件中初始化 flutter_boost 插件。以下是完整的代码示例：

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

// 定义页面构建器
void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();

    // 注册页面构造函数
    FlutterBoost.singleton.registerPageBuilders(<String, PageBuilder>{
      'first': (String pageName, Map<String, dynamic> params, String _) =>
          FirstRouteWidget(),
      'second': (String pageName, Map<String, dynamic> params, String _) =>
          SecondRouteWidget(),
    });

    // 添加导航观察者
    FlutterBoost.singleton.addBoostNavigatorObserver(TestBoostNavigatorObserver());
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Boost Example',
      builder: FlutterBoost.init(), // 初始化插件
      home: Container(color: Colors.white),
    );
  }
}

// 自定义导航观察者
class TestBoostNavigatorObserver extends NavigatorObserver {
  [@override](/user/override)
  void didPush(Route<dynamic> route, Route<dynamic> previousRoute) {
    print('flutterboost#didPush');
  }

  [@override](/user/override)
  void didPop(Route<dynamic> route, Route<dynamic> previousRoute) {
    print('flutterboost#didPop');
  }

  [@override](/user/override)
  void didRemove(Route<dynamic> route, Route<dynamic> previousRoute) {
    print('flutterboost#didRemove');
  }

  [@override](/user/override)
  void didReplace({Route<dynamic> newRoute, Route<dynamic> oldRoute}) {
    print('flutterboost#didReplace');
  }
}

3. 创建 Flutter 页面

在上面的代码中，我们注册了两个页面 first 和 second。接下来创建对应的页面组件。

`FirstRouteWidget`

class FirstRouteWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 跳转到第二个页面
            FlutterBoost.singleton.open('second');
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

`SecondRouteWidget`

class SecondRouteWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 返回上一页
            Navigator.of(context).pop();
          },
          child: Text('Back to First Page'),
        ),
      ),
    );
  }
}

更多关于Flutter性能优化插件flutter_boost的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 1楼

更多关于Flutter性能优化插件flutter_boost的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

flutter_boost 是阿里巴巴开源的一个 Flutter 混合开发框架，主要用于解决 Flutter 与原生应用混合开发中的页面管理和通信问题。它能够帮助开发者更高效地管理 Flutter 页面与原生页面之间的切换，并优化性能。以下是 flutter_boost 的基本使用方法和一些性能优化建议。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 flutter_boost 依赖：

dependencies:
  flutter_boost: ^3.0.0

然后运行 flutter pub get 来获取依赖。

2. 初始化 FlutterBoost

在 Flutter 项目的 main.dart 文件中，初始化 FlutterBoost：

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

void main() {
  runApp(MyApp());
}

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

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    
    FlutterBoost.singleton.registerPageBuilders({
      'firstPage': (pageName, params, _) => FirstPage(),
      'secondPage': (pageName, params, _) => SecondPage(),
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Boost Example',
      builder: FlutterBoost.init(),
      home: Container(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            FlutterBoost.singleton.open('secondPage');
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('This is the second page'),
      ),
    );
  }
}

3. 原生端集成

flutter_boost 需要在原生端进行相应的集成。以下是 Android 和 iOS 的集成步骤：

Android 集成

在 MainActivity 中初始化 FlutterBoost：

import com.idlefish.flutterboost.FlutterBoost;
import com.idlefish.flutterboost.FlutterBoostDelegate;
import com.idlefish.flutterboost.containers.FlutterBoostActivity;

public class MainActivity extends FlutterActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        FlutterBoost.instance().setup(this, new FlutterBoostDelegate() {
            @Override
            public void pushNativeRoute(FlutterBoostOptions options) {
                // 处理原生页面跳转
            }

            @Override
            public void pushFlutterRoute(FlutterBoostOptions options) {
                Intent intent = new FlutterBoostActivity.CachedEngineIntentBuilder(FlutterBoostActivity.class)
                        .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.opaque)
                        .destroyEngineWithActivity(false)
                        .uniqueId(options.uniqueId())
                        .url(options.pageName())
                        .urlParams(options.arguments())
                        .build(MainActivity.this);
                startActivity(intent);
            }
        }, engine -> {});
    }
}

iOS 集成

在 AppDelegate 中初始化 FlutterBoost：

#import <FlutterBoost.h>

[@interface](/user/interface) AppDelegate ()

[@end](/user/end)

[@implementation](/user/implementation) AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [FlutterBoostPlugin.sharedInstance startFlutterWithPlatform:self onStart:^(FlutterEngine *engine) {
    }];
    return YES;
}

[@end](/user/end)