Flutter性能监控插件sreporter的使用

Flutter性能监控插件sreporter的使用

SReporter 是一个用于从您的应用程序向Telegram聊天(私聊、群聊或频道)发送报告、崩溃日志和消息的 Dart 包。或者,您可以将其发送到特定的 Discord 频道。

构建状态与评分

使用方法

要使用此插件,请在 pubspec.yaml 文件中添加 SReporter 作为依赖项。

dependencies:
  sreporter: ^1.0.0

示例代码

导入库

import 'package:sreporter/sreporter.dart';

发送Telegram报告

预览

tele preview

如何使用

Telegram 报告支持在其标题和内容中使用 Markdown 元素。

// 可选语言
TeleCode('// Code...', lang: 'java').toString();
// 下划线
TeleUnderline(' text ').toString();
// 隐藏文本
TeleSpoiler(' text ').toString();
// 删除线
TeleStrikeThrough(' text ').toString();
// 斜体
TeleItalics(' text ').toString();
// 粗体
TeleBold(' text ').toString();

整个代码:

SReporter.teleReporter(
  botToken: '195211143...', // 在 Telegram 中从 @botFather 获取
  targetChat: '14888...', // 聊天ID 或者提及用户名 '@smith8h'
  reportHeader: 'Report sent from ${Italic('Demo App')}.',
  reportSubHeader: '${Spoiler(Underline('Flutter-Demo').toString())}', // 可选
  reportMessage: '${Code('Custom.message', lang: 'dart')}',
  reportFooter: 'Footer (More Info)...', // 可选
  onSuccess: () {
    // 成功发送报告时调用
  },
  onFailure: (msg) {
    // 发送报告失败时调用
  },
).report();

发送Discord报告

预览

disc preview

如何使用

Discord 报告支持在其标题和内容中使用 Markdown 元素。

// 多行代码
DiscCode('// Code...', multiline: true).toString(); // 默认为单行
// 下划线
DiscUnderline(' text ').toString();
// 隐藏文本
DiscSpoiler(' text ').toString();
// 删除线
DiscStrikeThrough(' text ').toString();
// 斜体
DiscItalics(' text ').toString();
// 粗体
DiscBold(' text ').toString();
// 标题
DiscHeader(' text ', type: 1).toString(); // 类型代表标题级别 h1, h2, h3...
// 链接
DiscLink('text', 'url').toString();
// 列表项
DiscListItem('text', indent: true).toString(); // 缩进以使列表项属于次级列表。
// 引用
DiscBlockQuote('text', wholeMsg: true).toString(); // 设置引用为单行或整条消息。

整个代码:

SReporter.discReporter(
  webhook: 'https://discord.com/api/webhooks/11...',
  contentMessage: 'Content Message with ${DiscBold('spoiler text')}...',
  onSucess: () {
    // 成功发送报告时调用
  },
  onFailure: (failMsg) {
    // 发送报告失败时调用
  },
).report();

完整示例代码

以下是完整的示例代码,展示了如何在 Flutter 应用程序中使用 SReporter 插件来发送 Telegram 和 Discord 报告。

// ignore_for_file: unused_local_variable

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:sreporter/sreporter.dart';
import 'package:sreporter/utils/utils.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    sendReport();
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }

  void sendReport() {
    SReporter.teleReporter(
      botToken: '195211143...', // 在 Telegram 中从 @botFather 获取
      targetChat: '14888...', // 聊天ID 或者提及用户名 '@smith8h'
      reportHeader: 'Report sent from ${TeleItalics('Demo App')}.',
      reportSubHeader: '${TeleSpoiler('${TeleUnderline('Flutter-Demo')}')}', // 可选
      reportMessage: '${TeleCode('Custom.message')}',
      reportFooter: 'Footer...', // 可选
      onSuccess: () {
        if (kDebugMode) {
          print('tele ==== done!!!!');
        }
      },
      onFailure: (msg) {
        if (kDebugMode) {
          print('tele ==== $msg');
        }
      },
    ).report();

    SReporter.discReporter(
      webhook: 'https://discord.com/api/webhooks/1171...', // Discord webhook URL
      contentMessage: 'Content Message with ${DiscBold('spoiler text')}...',
      onSucess: () {
        if (kDebugMode) {
          print('disc ==== done!!!!');
        }
      },
      onFailure: (failMsg) {
        if (kDebugMode) {
          print('disc ==== $failMsg');
        }
      },
    ).report();
  }
}

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用sreporter插件进行性能监控的代码案例。sreporter是一个用于收集和报告Flutter应用性能数据的插件。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加sreporter依赖:

dependencies:
  flutter:
    sdk: flutter
  sreporter: ^latest_version  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 初始化插件

在你的应用的主入口文件(通常是main.dart)中,初始化sreporter插件。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 初始化sreporter
  SReporter.init(
    appName: "MyApp",
    appVersion: "1.0.0",
    reportUrl: "https://your-report-server-url.com/report",  // 替换为你的报告服务器URL
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Performance Monitoring'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You can add performance monitoring here!',
            ),
          ],
        ),
      ),
    );
  }
}

3. 监控性能

你可以使用SReporter提供的各种方法来监控不同的性能指标。例如,监控页面加载时间:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 记录页面开始加载时间
    final startTime = DateTime.now().millisecondsSinceEpoch;

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Performance Monitoring'),
      ),
      body: Builder(
        builder: (context) {
          // 在页面构建完成后记录结束时间
          WidgetsBinding.instance?.addPostFrameCallback((_) {
            final endTime = DateTime.now().millisecondsSinceEpoch;
            final duration = endTime - startTime;

            // 报告页面加载时间
            SReporter.reportPageLoadTime(
              pageName: "MyHomePage",
              duration: duration,
            );
          });

          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Page loaded in ${duration}ms',  // 这里仅用于演示,实际中不会这样直接显示
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

4. 自定义报告

你可以根据需要自定义报告内容。例如,报告自定义事件:

void _customEvent() {
  // 自定义事件的数据
  final Map<String, dynamic> eventData = {
    "event_name": "custom_event",
    "user_id": "12345",
    "extra_info": "some extra information",
  };

  // 报告自定义事件
  SReporter.reportCustomEvent(eventData);
}

你可以将上述方法添加到你的按钮点击事件中,以便在特定情况下触发自定义事件报告。

5. 发送报告

sreporter插件会自动在适当的时候将收集到的数据发送到指定的reportUrl。你也可以手动触发发送报告:

void _sendReportsManually() {
  // 手动发送所有未发送的报告
  SReporter.sendAllReports();
}

这通常用于应用即将关闭或用户完成某个重要操作之前。

总结

上述代码展示了如何在Flutter项目中使用sreporter插件进行性能监控。你可以根据需要扩展和自定义这些代码,以满足你的特定需求。记得在实际使用中替换为你的报告服务器URL和相应的配置。

回到顶部