Flutter性能优化插件buzz_booster的使用

Flutter性能优化插件buzz_booster的使用

安装与使用

前提条件

  • 安装 Flutter SDK：
    https://flutter-ko.dev/get-started/install

设置环境

运行以下命令检查环境配置是否正确：

flutter doctor

运行应用

使用以下命令运行应用：

flutter run

部署

更新版本

  1. 更新 CHANGELOG.md。
  2. 在 pubspec.yaml 中更新版本号。
  3. 使用以下命令发布：
flutter pub publish --dry-run # 检查是否有错误
flutter pub publish

开始使用

示例代码

示例文件结构

example/lib/main.dart

示例代码

import 'package:buzz_booster_example/AppKeySearchPage.dart';
import 'package:buzz_booster_example/FCMService.dart';
import 'package:buzz_booster_example/MarketingConsentPage.dart';
import 'package:buzz_booster_example/Repository.dart';
import 'package:buzz_booster_example/ServerMutator.dart';
import 'package:buzz_booster_example/WebViewPage.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';
import 'package:buzz_booster/buzz_booster.dart';
import 'package:flutter_phoenix/flutter_phoenix.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:flutter/services.dart';
import 'package:sentry_flutter/sentry_flutter.dart';

final fcmService = FCMService();
final buzzBooster = BuzzBooster();
final repository = Repository();
final serverMutator = ServerMutator();

void main() async {
  await SentryFlutter.init(
    (options) {
      options.dsn =
          'https://2e629f8df4aa43a52f9246603388f62f@o4459.ingest.sentry.io/4505746007719936';
      // 设置采样率为1.0以捕获100％的事务进行性能监控。建议在生产环境中调整此值。
      options.tracesSampleRate = 1.0;
    },
    appRunner: () => runApp(
      Phoenix(
        child: const MaterialApp(home: MyApp()),
      ),
    ),
  );
  await fcmService.initFirebase();
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Environment _environment = Environment.Production;
  BuzzBoosterTheme? _theme = BuzzBoosterTheme.system;
  final appKeyTextController = TextEditingController();
  final userIdTextController = TextEditingController();
  final pageIdTextController = TextEditingController();
  String sdkVersion = "";
  bool _isOptInMarketing = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    doAsyncStuff();
    buzzBooster.optInMarketingCampaignMoveButtonClickedCallback = () async {
      await Navigator.push(context,
          MaterialPageRoute(builder: (context) => MarketingConsentPage()));
    };

    buzzBooster.userEventChannel =
        (String userEventName, Map<String, dynamic>? userEventValues) async {
      print("userEventDidOccur: $userEventName $userEventValues");
    };
  }

  Future<void> doAsyncStuff() async {
    sdkVersion = await repository.getSdkVersion();
    _environment = await repository.getServerEnvironment();
    _isOptInMarketing = await repository.getIsOptInMarketing();
    _theme = await repository.getTheme();
    await buzzBooster.setTheme(_theme!);
    print(_environment);
    await serverMutator.changeEnvironment(_environment);
    appKeyTextController.text = await repository.getAppKey();
    userIdTextController.text = await repository.getUserId();
    setState(() {});
    final isBuzzBoosterInitialized = await buzzBooster.isInitialized();
    if (!isBuzzBoosterInitialized) {
      print("buzzBooster is not initialized");
      await buzzBooster.init(
        androidAppKey: await repository.getAndroidAppKey(),
        iosAppKey: await repository.getiOSAppKey(),
      );
    } else {
      var logMessage = "buzzBooster is already initialized SKIP init";
      print(logMessage);
      showToast(logMessage);
    }

    final String? token = await fcmService.getToken();
    if (token != null) {
      await buzzBooster.setPushToken(token);
    }

    await fcmService.requestPermission();

    FirebaseMessaging.onMessage.listen((RemoteMessage message) async {
      final data = message.data;
      if (await buzzBooster.isBuzzBoosterNotification(data)) {
        await buzzBooster.handleNotification(data);
      }
    });

    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) async {
      final data = message.data;
      if (await buzzBooster.isBuzzBoosterNotification(data)) {
        await buzzBooster.handleOnMessageOpenedApp(data);
      }
    });

    RemoteMessage? message =
        await FirebaseMessaging.instance.getInitialMessage();
    if (message != null) {
      if (await buzzBooster.isBuzzBoosterNotification(message.data)) {
        await buzzBooster.handleInitialMessage(message.data);
      }
    }
    return Future.value();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              children: [
                Text("SDK版本: $sdkVersion"),
                appInfoWidget(),
                loginWidget(),
                themeWidget(),
                OutlinedButton(
                    onPressed: () async {
                      await MethodChannel('com.buzzvil.dev/booster')
                          .invokeMethod('showDebugger', {});
                    },
                    child: const Text("网络")),
                SizedBox(
                  height: 10,
                ),
                eventWidget(),
                pageWidget(),
                showSpecificCampaignWidget(),
              ],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            await buzzBooster.showHome();
          },
          backgroundColor: Colors.deepPurple,
          child: const Icon(Icons.gif_box),
        ),
      ),
    );
  }

  Widget appInfoWidget() {
    return Column(children: [
      const Text("这是BuzzBooster Flutter应用"),
      Row(
        children: [
          Expanded(
            child: TextField(
              controller: appKeyTextController,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: '应用密钥',
              ),
            ),
          ),
          IconButton(
              onPressed: () async {
                final result = await Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => AppKeySearchPage()));
                if (result != null) {
                  appKeyTextController.text = result;
                }
              },
              icon: Icon(Icons.search))
        ],
      ),
      TextField(
        controller: userIdTextController,
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
          labelText: '用户ID',
        ),
      ),
      serverMutatorWidget(),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("是否同意营销"),
          Switch(
            value: _isOptInMarketing,
            onChanged: (value) {
              setState(() {
                _isOptInMarketing = value;
              });
            },
          ),
        ],
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          OutlinedButton(
            onPressed: () async {
              String appKey = appKeyTextController.text;
              String userId = userIdTextController.text;
              await repository.clearCursor(appKey);
              await repository.saveAppKey(appKey, userId);
              await repository.saveServerEnvironment(_environment);
              await repository.saveIsOptInMarketing(_isOptInMarketing);
              if (_theme != null) {
                await repository.saveTheme(_theme!);
              }
              await buzzBooster.setUser(null);
              Phoenix.rebirth(context);
            },
            child: const Text("重启"),
          ),
          OutlinedButton(
            onPressed: () async {
              bool result = await buzzBooster.isInitialized();
              var logMessage = "buzzBooster.isInitialized $result";
              showToast(logMessage);
              print(logMessage);
            },
            child: const Text("是否已初始化"),
          ),
        ],
      ),
    ]);
  }

  StatefulWidget serverMutatorWidget() {
    return DropdownButton<Environment>(
        value: _environment,
        items: Environment.values
            .map((e) => DropdownMenuItem(value: e, child: Text(e.name)))
            .toList(),
        onChanged: (value) {
          setState(() {
            _environment = value!;
          });
        });
  }

  Widget loginWidget() {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            OutlinedButton(
              onPressed: () async {
                String userId = userIdTextController.text;
                if (userId.isNotEmpty) {
                  showToast("登录");
                  User user = UserBuilder(userId)
                      .setOptInMarketing(_isOptInMarketing)
                      .addProperty("key1", "value")
                      .addProperty("key2", true)
                      .addProperty("key3", 2)
                      .build();
                  await buzzBooster.setUser(user);
                  await buzzBooster.showInAppMessage();
                }
              },
              child: const Text("登录"),
            ),
            OutlinedButton(
              onPressed: () async {
                showToast("登出");
                userIdTextController.clear();
                await buzzBooster.setUser(null);
              },
              child: const Text("登出"),
            ),
          ],
        ),
      ],
    );
  }

  Widget eventWidget() {
    final eventNameTextController = TextEditingController();
    final eventValuesKeyTextController1 = TextEditingController();
    final eventValuesValueTextController1 = TextEditingController();
    final eventValuesKeyTextController2 = TextEditingController();
    final eventValuesValueTextController2 = TextEditingController();
    final eventValuesKeyTextController3 = TextEditingController();
    final eventValuesValueTextController3 = TextEditingController();
    return Column(children: [
      const Text("发送事件"),
      TextField(
        controller: eventNameTextController,
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
          labelText: '事件名称',
        ),
      ),
      eventValueWidget(
          eventValuesKeyTextController1, eventValuesValueTextController1),
      eventValueWidget(
          eventValuesKeyTextController2, eventValuesValueTextController2),
      eventValueWidget(
          eventValuesKeyTextController3, eventValuesValueTextController3),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          OutlinedButton(
            onPressed: () async {
              String eventName = eventNameTextController.text;
              if (eventName.isNotEmpty) {
                Map<String, String> eventValues = {};
                if (eventValuesKeyTextController1.text.isNotEmpty) {
                  eventValues[eventValuesKeyTextController1.text] =
                      eventValuesValueTextController1.text;
                }
                if (eventValuesKeyTextController2.text.isNotEmpty) {
                  eventValues[eventValuesKeyTextController2.text] =
                      eventValuesValueTextController2.text;
                }
                if (eventValuesKeyTextController3.text.isNotEmpty) {
                  eventValues[eventValuesKeyTextController3.text] =
                      eventValuesValueTextController3.text;
                }
                await buzzBooster.sendEvent(eventName, eventValues);
                showToast("发送事件: ${eventName}");
              } else {
                showToast("事件名称不能为空");
              }
            },
            child: const Text("发送事件"),
          ),
          OutlinedButton(
            onPressed: () async {
              eventNameTextController.clear();
              eventValuesKeyTextController1.clear();
              eventValuesValueTextController1.clear();
              eventValuesKeyTextController2.clear();
              eventValuesValueTextController2.clear();
              eventValuesKeyTextController3.clear();
              eventValuesValueTextController3.clear();
            },
            child: const Text("清除事件"),
          ),
        ],
      ),
    ]);
  }

  Widget eventValueWidget(
      TextEditingController eventKeyTEC, TextEditingController eventValueTEC) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Expanded(
          flex: 1,
          child: TextField(
            controller: eventKeyTEC,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: '事件键',
            ),
          ),
        ),
        Expanded(
          flex: 1,
          child: TextField(
            controller: eventValueTEC,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: '事件值',
            ),
          ),
        )
      ],
    );
  }

  Widget showSpecificCampaignWidget() {
    return SingleChildScrollView(
      child: Row(
        children: [
          OutlinedButton(
            onPressed: () async {
              await buzzBooster.showCampaignWithType(CampaignType.attendance);
            },
            child: const Text("出勤"),
          ),
          OutlinedButton(
            onPressed: () async {
              await buzzBooster.showCampaignWithType(CampaignType.referral);
            },
            child: const Text("推荐"),
          ),
          OutlinedButton(
            onPressed: () async {
              await buzzBooster.showCampaignWithType(CampaignType.optInMarketing);
            },
            child: const Text("营销"),
          ),
          OutlinedButton(
            onPressed: () async {
              await buzzBooster.showCampaignWithType(CampaignType.scratchLottery);
            },
            child: const Text("刮奖"),
          ),
          OutlinedButton(
            onPressed: () async {
              await buzzBooster.showCampaignWithType(CampaignType.roulette);
            },
            child: const Text("转盘"),
          ),
          OutlinedButton(
            onPressed: () async {
              await Navigator.push(context,
                  MaterialPageRoute(builder: (context) => WebViewPage()));
            },
            child: const Text("网页"),
          ),
        ],
      ),
      scrollDirection: Axis.horizontal,
    );
  }

  Widget pageWidget() {
    return Row(
      children: [
        Expanded(
          child: TextField(
            controller: pageIdTextController,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: '输入页面ID',
            ),
          ),
        ),
        OutlinedButton(
          onPressed: () async {
            buzzBooster.showPage(pageIdTextController.text);
          },
          child: const Text("跳转"),
        )
      ],
    );
  }

  StatefulWidget themeWidget() {
    Widget buildRadioTile(BuzzBoosterTheme theme, String title,
        Function(void Function()) setState) {
      return Expanded(
        child: ListTile(
          title: Text(title),
          contentPadding: EdgeInsets.all(0),
          leading: Radio(
            value: theme,
            groupValue: _theme,
            onChanged: (BuzzBoosterTheme? value) async {
              print("改变主题: $value");
              if (value != null) {
                await buzzBooster.setTheme(value);
              }
              setState(() {
                _theme = value;
              });
            },
          ),
        ),
      );
    }

    return StatefulBuilder(builder: (context, _setState) {
      return Row(
        children: [
          buildRadioTile(BuzzBoosterTheme.light, '浅色', _setState),
          buildRadioTile(BuzzBoosterTheme.dark, '深色', _setState),
          buildRadioTile(BuzzBoosterTheme.system, '系统', _setState),
        ],
      );
    });
  }

  void showToast(String message) {
    Fluttertoast.showToast(
        msg: message,
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.black45,
        textColor: Colors.white,
        fontSize: 16.0);
  }
}

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

1 回复

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


buzz_booster 是一个用于 Flutter 应用的性能优化插件，旨在通过减少不必要的重建和优化渲染过程来提升应用的性能。以下是如何使用 buzz_booster 插件的步骤：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 buzz_booster 依赖：

dependencies:
  flutter:
    sdk: flutter
  buzz_booster: ^1.0.0  # 请使用最新的版本号

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

2. 导入插件

在你的 Dart 文件中导入 buzz_booster：

import 'package:buzz_booster/buzz_booster.dart';

3. 使用 BuzzBooster Widget

buzz_booster 提供了一个 BuzzBooster Widget，它可以包裹在你的 Widget 树中，以优化性能。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Buzz Booster Example'),
      ),
      body: BuzzBooster(
        child: ListView.builder(
          itemCount: 100,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Item $index'),
            );
          },
        ),
      ),
    );
  }
}

在这个例子中，BuzzBooster 包裹了一个 ListView.builder，它会优化 ListView 的渲染性能，减少不必要的重建。

4. 使用 BuzzBooster 的优化功能

buzz_booster 提供了多种优化功能，你可以根据需要进行配置。例如：

  • shouldRebuild：控制子 Widget 是否需要重建。
  • optimizeRebuild：优化 Widget 的重建过程。
BuzzBooster(
  shouldRebuild: (oldWidget, newWidget) {
    // 自定义逻辑来决定是否需要重建
    return oldWidget != newWidget;
  },
  optimizeRebuild: true,
  child: MyComplexWidget(),
)
回到顶部