Flutter开发工具插件in_app_devtools的使用

Flutter开发工具插件in_app_devtools的使用

功能

  • Dio网络记录。

使用

import 'dart:async';
import 'dart:math';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:in_app_devtools/in_app_devtools.dart';

final Dio dio = Dio();

void main() {
  // 初始化日志特性
  final logFeature = LogFeature();
  
  // 初始化IADState，并添加特性
  final iadState = IADState(initialFeatures: [
    logFeature,
    DioFeature(dio: dio),
  ]);

  // 运行带有zone的主函数
  runZoned(() {
    runApp(IADProvider(state: iadState, child: MainApp(iadState: iadState)));
  }, zoneSpecification: ZoneSpecification(
    print: (self, parent, zone, line) {
      logFeature.log(line); // 记录日志
      parent.print(zone, line); // 打印日志
    },
  ));
}

class MainApp extends StatelessWidget {
  final IADState iadState;
  const MainApp({super.key, required this.iadState});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) => routerWrapper(context, child, iadState), // 使用路由包装器
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              // 切换IAD状态按钮
              ElevatedButton(
                onPressed: () {
                  context.iadState.isEnabled = !context.iadState.isEnabled;
                },
                child: Text('打开IAD'),
              ),
              // 发送请求按钮
              ElevatedButton(
                onPressed: () {
                  // 发送GET请求
                  dio.get('https://pokeapi.co/api/v2/ability').then((value) {
                    print("?? $value");
                  });

                  // 发送POST请求
                  dio.post('https://pokeapi.co/api/v2/ability', data: {'test': 'map'}).then((value) {});

                  // 发送包含FormData的POST请求
                  dio.post('https://pokeapi.co/api/v2/ability', data: FormData.fromMap({'form': 'data'})).then((value) {});
                },
                child: Text('发送请求'),
              ),
              // 输出日志按钮
              ElevatedButton(
                onPressed: () {
                  print('日志!!!\n日志!!!!!! ${Random().nextInt(100)}');
                },
                child: Text('日志'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter开发工具插件in_app_devtools的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter开发工具插件in_app_devtools的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


in_app_devtools 是一个用于 Flutter 应用的开发工具插件，它允许开发者在应用中直接集成和使用 DevTools 功能。通过 in_app_devtools，开发者可以在应用运行时进行调试、性能分析、网络请求监控等操作，而无需离开应用或使用额外的工具。

以下是 in_app_devtools 的基本使用步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  in_app_devtools: ^0.1.0  # 请使用最新版本

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

2. 初始化 DevTools

在你的 Flutter 应用的主入口文件中（通常是 main.dart），初始化 in_app_devtools：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化 DevTools
  await InAppDevTools().initialize();

  runApp(MyApp());
}

3. 使用 DevTools

初始化完成后，你可以在应用中使用 InAppDevTools 提供的功能。例如，启动 DevTools 界面：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('In-App DevTools Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 打开 DevTools 界面
              InAppDevTools().show();
            },
            child: Text('Open DevTools'),
          ),
        ),
      ),
    );
  }
}

4. 功能和特性

in_app_devtools 提供了多种功能，包括但不限于：

  • 调试工具：查看日志、调试信息等。
  • 性能分析：监控应用的性能，包括帧率、内存使用等。
  • 网络请求监控：查看应用发出的网络请求及其响应。
  • 数据库查看：查看和管理应用的本地数据库。

5. 自定义配置

你可以根据需要自定义 in_app_devtools 的配置。例如，设置 DevTools 的启动模式、主题等：

await InAppDevTools().initialize(
  enableDebugging: true,
  enablePerformance: true,
  enableNetwork: true,
  theme: ThemeData.dark(),
);
回到顶部