Flutter alice_dio 是一个用于 Flutter 应用程序的 HTTP 请求拦截器插件

Flutter alice_dio 是一个用于 Flutter 应用程序的 HTTP 请求拦截器插件

介绍

Alice Dio 是一个用于 Flutter 应用程序的 HTTP 请求拦截器，它可以帮助你调试和监控应用程序中的网络请求。通过 Alice Dio，你可以查看所有发出的 HTTP 请求和响应，包括请求头、请求体、响应头、响应体以及请求的时间戳等信息。这对于开发和调试网络相关的功能非常有帮助。

完整示例 Demo

以下是一个完整的示例代码，展示了如何在 Flutter 项目中集成和使用 Alice Dio 插件。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 alice 和 dio 的依赖：

dependencies:
  flutter:
    sdk: flutter
  dio: ^5.0.0 # 请根据实际情况选择版本
  alice: ^2.0.0 # 请根据实际情况选择版本

2. 初始化 Alice 和 Dio

在 main.dart 文件中初始化 Alice 和 Dio，并将 Alice 拦截器添加到 Dio 实例中：

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

void main() {
  // 创建 Alice 实例
  final alice = Alice(showNotification: true); // 可选：显示通知栏

  // 创建 Dio 实例
  final dio = Dio();

  // 将 Alice 拦截器添加到 Dio
  dio.interceptors.add(alice.getDioInterceptor());

  runApp(MyApp(dio: dio, alice: alice));
}

class MyApp extends StatelessWidget {
  final Dio dio;
  final Alice alice;

  const MyApp({Key? key, required this.dio, required this.alice}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Alice Dio Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(dio: dio, alice: alice),
    );
  }
}

3. 使用 Dio 发起网络请求

在 MyHomePage 中，我们可以使用 Dio 发起一个简单的 GET 请求，并通过 Alice 监控这个请求：

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

class MyHomePage extends StatefulWidget {
  final Dio dio;
  final Alice alice;

  const MyHomePage({Key? key, required this.dio, required this.alice}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  String _response = '';

  Future<void> _makeRequest() async {
    try {
      // 发起 GET 请求
      final response = await widget.dio.get('https://jsonplaceholder.typicode.com/posts/1');

      // 更新 UI 显示响应结果
      setState(() {
        _response = response.data.toString();
      });
    } catch (e) {
      // 处理错误
      setState(() {
        _response = 'Error: $e';
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Alice Dio Demo'),
        actions: [
          // 添加 Alice 的 Floating Action Button
          IconButton(
            icon: Icon(Icons.bug_report),
            onPressed: () {
              // 打开 Alice 的调试界面
              widget.alice.showInspector();
            },
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _makeRequest,
              child: Text('Make Request'),
            ),
            SizedBox(height: 20),
            Text(
              'Response:',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 10),
            Text(
              _response,
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}