Flutter性能监控插件performance的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter性能监控插件performance的使用

插件介绍

performance 是一个为Flutter应用程序提供的性能覆盖层包，它在Web上也能正常工作。通过该插件，开发者可以在应用中集成性能监控工具，以便更好地理解应用的性能瓶颈并进行优化。

sample

GitHub stars | Pub version | Demo | Twitter Follow

开始使用

安装

要使用此包，请按照安装指南操作。

使用方法

将性能覆盖层添加到你的应用中非常简单，只需将你的应用包裹在 CustomPerformanceOverlay 小部件中：

return CustomPerformanceOverlay(
  child: child,
);

你也可以根据需要禁用它，使用 enabled 参数：

return CustomPerformanceOverlay(
  enabled: false,
  child: child,
);

此外，你可以使用以下参数来自定义覆盖层：

  • alignment 和 scale：用于对齐和调整覆盖层大小。
  • sampleSize, targetFrameTime, 和 barRangeMax：用于控制性能数据显示方式。
  • backgroundColor, textColor, textBackgroundColor, uiColor, rasterColor, 和 highLatencyColor：用于自定义主题颜色。

有关这些成员的更多信息，请参阅 CustomPerformanceOverlay 类文档。

要了解如何读取图表及限制，请参阅 GitHub上的主README。

示例代码

下面是一个完整的示例demo，展示了如何在实际项目中使用 performance 插件。

import 'package:flutter/material.dart';
import 'package:funvas/funvas.dart';
import 'package:performance/performance.dart';
// 注意：'package:performance_example/widgets/funvas.dart' 和 'package:performance_example/widgets/link.dart'
// 可能是特定于示例项目的导入路径，在您自己的项目中可能不需要或需要替换为适当的路径。
// import 'package:performance_example/widgets/funvas.dart';
// import 'package:performance_example/widgets/link.dart';
import 'package:url_strategy/url_strategy.dart';

void main() {
  setPathUrlStrategy();
  runApp(const ExampleApp());
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'performance overlay demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(
          brightness: Brightness.dark,
          primarySwatch: Colors.amber,
          accentColor: Colors.amberAccent,
        ),
      ),
      home: const _HomePage(),
    );
  }
}

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

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<_HomePage> {
  late final _funvas = ExampleFunvas(); // 假设这是你自己的动画类

  var _funvasSize = 3 / 4;
  var _overlaySize = 1.0;
  var _funvasPlaying = false;
  var _overlayEnabled = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPerformanceOverlay(
        enabled: _overlayEnabled,
        scale: _overlaySize,
        child: Row(
          children: [
            Expanded(
              flex: 3,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Expanded(
                    child: FractionallySizedBox(
                      heightFactor: _funvasSize,
                      child: Column(
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          Expanded(
                            child: AspectRatio(
                              aspectRatio: 1,
                              child: FunvasContainer(
                                paused: !_funvasPlaying,
                                funvas: _funvas,
                              ),
                            ),
                          ),
                          // 如果你需要链接或其他交互组件，可以在这里添加
                          // const Link(
                          //   url: 'https://funvas.creativemaybeno.dev/#/32',
                          //   body: Text('funvas animation'),
                          // ),
                        ],
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 16),
                    child: FractionallySizedBox(
                      widthFactor: 5 / 8,
                      child: Slider(
                        min: 5 / 9,
                        max: 8 / 9,
                        value: _funvasSize,
                        onChanged: (value) {
                          setState(() {
                            _funvasSize = value;
                          });
                        },
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              flex: 2,
              child: Stack(
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      const Spacer(),
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          const Text('播放动画'),
                          Switch(
                            activeColor: Theme.of(context).colorScheme.secondary,
                            value: _funvasPlaying,
                            onChanged: (value) {
                              setState(() {
                                _funvasPlaying = value;
                              });
                            },
                          ),
                        ],
                      ),
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          const Text('启用覆盖层'),
                          Switch(
                            activeColor: Theme.of(context).colorScheme.secondary,
                            value: _overlayEnabled,
                            onChanged: (value) {
                              setState(() {
                                _overlayEnabled = value;
                              });
                            },
                          ),
                        ],
                      ),
                      const Spacer(),
                      const Text(
                        '与演示互动以观察性能 :)',
                        textAlign: TextAlign.center,
                      ),
                      const Spacer(),
                      Padding(
                        padding: const EdgeInsets.only(bottom: 16),
                        child: FractionallySizedBox(
                          widthFactor: 5 / 8,
                          child: Slider(
                            min: 1 / 2,
                            max: 3,
                            value: _overlaySize,
                            onChanged: (value) {
                              setState(() {
                                _overlaySize = value;
                              });
                            },
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

请注意，上述代码中的某些导入路径（如 package:performance_example/widgets/funvas.dart 和 package:performance_example/widgets/link.dart）可能是特定于示例项目的，并且在您的项目中可能不需要或需要替换为适当的路径。另外，ExampleFunvas 是假设的一个动画类，您应该将其替换为您自己的动画逻辑或移除这部分内容。

这个例子展示了如何创建一个带有性能监控覆盖层的应用程序，以及如何让用户交互式地控制动画播放、覆盖层显示状态和大小等。希望这可以帮助您开始使用 performance 插件来增强您的Flutter应用。


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

Harmonyos Next教程
1 回复

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


在Flutter开发中，性能监控对于确保应用的流畅性和用户体验至关重要。performance插件是Flutter提供的一个强大工具，可以帮助开发者实时监控应用的性能数据。以下是如何在Flutter项目中使用performance插件的代码案例。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加performance插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  performance: ^0.7.0  # 请检查最新版本号

2. 导入插件

在你的Dart文件中导入performance插件：

import 'package:performance/performance.dart';

3. 初始化PerformanceOverlay

在Flutter应用中，你可以通过PerformanceOverlay来显示性能数据。以下是如何在应用的顶层（例如MaterialApp的builder属性中）添加性能监控覆盖层的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PerformanceOverlay.wrap(
      enabled: true, // 设置为true以启用性能监控
      showOnScreen: true, // 设置为true以在屏幕上显示性能数据
      builder: (context) => MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Performance Monitoring'),
      ),
      body: Center(
        child: Text('Check the overlay for performance data!'),
      ),
    );
  }
}

4. 使用PerformanceController进行更详细的监控

如果你需要更细粒度的控制或想要在其他地方访问性能数据，可以使用PerformanceController。以下是如何使用PerformanceController的示例：

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

void main() {
  final performanceController = PerformanceController();

  runApp(MyApp(performanceController: performanceController));
}

class MyApp extends StatelessWidget {
  final PerformanceController performanceController;

  MyApp({required this.performanceController});

  @override
  Widget build(BuildContext context) {
    return PerformanceOverlay.wrap(
      enabled: true,
      showOnScreen: true,
      controller: performanceController, // 使用自定义的PerformanceController
      builder: (context) => MaterialApp(
        home: MyHomePage(performanceController: performanceController),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final PerformanceController performanceController;

  MyHomePage({required this.performanceController});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Performance Monitoring'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Check the overlay for performance data!'),
            ElevatedButton(
              onPressed: () {
                // 模拟一个性能监控场景，例如点击按钮后记录一段时间的性能数据
                performanceController.start();
                Future.delayed(Duration(seconds: 5), () {
                  performanceController.stop();
                  // 你可以在这里处理收集到的性能数据
                  // 例如：performanceController.dumpToFile(...);
                });
              },
              child: Text('Start Performance Monitoring'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个PerformanceController实例，并在应用启动时将其传递给PerformanceOverlay.wrap。然后，我们在一个按钮的点击事件中启动和停止性能监控，以便收集一段时间内的性能数据。

总结

通过上述步骤，你可以在Flutter应用中集成并使用performance插件来监控应用的性能。这不仅可以帮助你识别和解决性能瓶颈，还可以提高应用的用户体验。记得定期查看性能数据，并根据需要进行优化。

回到顶部