Flutter性能监控插件perf_view的使用

perf_view 是一个用于 Flutter 应用性能监控的插件。它可以帮助开发者实时监控应用的 FPS（帧率）、内存使用情况以及网络请求状态。通过 perf_view 插件，开发者可以更方便地分析和优化应用性能。

安装

在你的 Flutter 项目中添加 perf_view 依赖：

dependencies:
  perf_view: ^0.0.1

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

flutter pub get

使用

以下是一个完整的示例，展示如何在 Flutter 应用中使用 perf_view 插件。

示例代码

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:perf_view/perf_view.dart';

// 定义一个模型类来解析 JSON 数据
Future<Album> fetchAlbum(int idAlbum) async {
  final response = await http
      .get(Uri.parse('https://jsonplaceholder.typicode.com/albums/$idAlbum'));

  if (response.statusCode == 200) {
    // 如果服务器返回 200 OK 响应，则解析 JSON
    return Album.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
  } else {
    // 如果服务器未返回 200 OK 响应，则抛出异常
    throw Exception('Failed to load album');
  }
}

class Album {
  final int userId;
  final int id;
  final String title;

  const Album({
    required this.userId,
    required this.id,
    required this.title,
  });

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      userId: json['userId'] as int,
      id: json['id'] as int,
      title: json['title'] as String,
    );
  }
}

void main() {
  runApp(
    const PerformanceAnalyzerWidget(
      // 可选配置项，可以根据需求启用或禁用某些功能
      // disable: true,
      // backgroundNetwork: Color(0xff0000ff),
      // alignmentFPS: Alignment.bottomRight,
      // alignmentMemory: Alignment.topLeft,
      // alignmentNetwork: Alignment.center,
      // activateMemory: false,
      // activateNetwork: false,
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Performance Analyzer Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const MyHomePage(title: 'Performance Analyzer Demo'),
        routes: {
          '/app2': (context) => AppTwo(),
        });
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  final List<int> theList = [];
  Album _album = const Album(
    userId: -1,
    id: -1,
    title: "",
  );

  void _makeRequest() async {
    final album = await fetchAlbum(_counter + 1);
    setState(() {
      _album = album;
    });
  }

  void _incrementCounter() {
    _counter++;
    theList.add(_counter);
    setState(() {});
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    theList.add(_counter);
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times: ${theList.last}',
              ),
              Text(
                "\n\nAlbum title: \n ${_album.title}\n Album id: ${_album.id != -1 ? _album.id : ' '}\n",
                textAlign: TextAlign.center,
              ),
              ElevatedButton(
                onPressed: () => Navigator.pushNamed(context, '/app2'),
                child: const Text("Other app"),
              ),
              ElevatedButton(
                onPressed: _makeRequest,
                child: const Text("Make a http request"),
              ),
            ]),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class AppTwo extends StatelessWidget {
  final List<String> items = List<String>.generate(1000000, (i) => 'Item $i');

  AppTwo({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Performance Analyzer Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: const Text('Performance Analyzer Demo'),
          ),
          body: ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(items[index]),
              );
            },
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () => Navigator.pop(context),
            tooltip: 'Back',
            child: const Icon(Icons.arrow_back),
          )),
    );
  }
}