Flutter界面翻转动画插件flipper_util的使用

Flutter界面翻转动画插件flipper_util的使用

flipper_util 是一个用于在 Flutter 应用中集成 Flipper 的插件。Flipper 是一个开源的移动应用调试工具，支持多种平台，如 Android 和 iOS。

开始使用

首先，你需要将 flipper_util 添加到你的项目依赖中。你可以在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flipper_util: ^x.y.z  # 替换为最新版本号

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

使用dio拦截器

flipper_util 提供了 FlipperKitDioInterceptor，它可以帮助你在发送 HTTP 请求时报告相关信息给 Flipper 客户端。

Dio dio = Dio();

// 添加 FlipperKitDioInterceptor 作为最后一个拦截器
dio.interceptors.add(FlipperKitDioInterceptor(topRouter: () {
  // 返回顶部路由名称，它将在请求头中显示
  return "page/topTest";
}));

这样配置后，顶部路由（top router）会在请求头中显示为 “flutter-top-router”，请求的 Cookie 将在响应头中显示为 “cookies_from_request”。

示例代码

下面是一个完整的示例代码，展示了如何在 Flutter 应用中使用 flipper_util 插件。

import 'dart:async';

import 'package:dio/dio.dart';
import 'package:flipper_util/flipper_util.dart';
import 'package:flipper_util/flipperkit_dio_interceptor.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

  // 初始化 Dio 并添加 FlipperKitDioInterceptor
  MyApp.dio.interceptors.add(FlipperKitDioInterceptor(topRouter: () {
    return "page/topTest";
  }));
}

class MyApp extends StatefulWidget {
  static Dio dio = Dio();

  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  final _flipperUtilPlugin = FlipperUtil();

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

  // 异步初始化平台状态
  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion = 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Column(
            children: [
              ElevatedButton(
                  onPressed: () {
                    getHtml();
                  },
                  child: Text('发送 GET 请求 -> HTML')),
              ElevatedButton(
                  onPressed: () {
                    getImage();
                  },
                  child: Text('发送 GET 请求 -> 图片')),
              ElevatedButton(
                  onPressed: () {
                    postJson();
                  },
                  child: Text('发送 POST 请求 -> JSON')),
              ElevatedButton(
                  onPressed: () {
                    uploadImage();
                  },
                  child: Text('发送 PUT 请求 -> 上传图片')),
            ],
          ),
        ),
      ),
    );
  }

  Future<void> getHtml() async {
    Map<String, dynamic> headers = {};
    headers["p1"] = 90;
    headers["p2"] = 91;
    Response response = await MyApp.dio.get(
        "https://book.flutterchina.club/chapter11/dio.html#_11-3-1-_11-3-1引入dio",
        options: Options(headers: headers));
    // print(response.data.toString());
  }

  Future<void> getImage() async {
    Map<String, dynamic> headers = {};
    headers["p67"] = 90;
    headers["p56"] = 91;
    Response response = await MyApp.dio.get(
        "http://n.sinaimg.cn/front/121/w1441h1080/20180415/BRHA-fzcyxmv0612172.jpg",
        options: Options(headers: headers));
    // print(response.data.toString());
  }

  Future<void> postJson() async {
    Map<String, dynamic> headers = {};
    headers["p1"] = 90;
    headers["p2"] = 91;
    Response response = await MyApp.dio.post(
        "https://book.flutterchina.club/chapter11/dio.html#_11-3-1-_11-3-1引入dio",
        data: {"key": "value"},
        options: Options(headers: headers));
    // print(response.data.toString());
  }

  Future<void> uploadImage() async {
    Map<String, dynamic> headers = {};
    headers["p1"] = 90;
    headers["p2"] = 91;
    Response response = await MyApp.dio.put(
        "https://book.flutterchina.club/chapter11/dio.html#_11-3-1-_11-3-1引入dio",
        data: FormData.fromMap({"file": await MultipartFile.fromFile("path/to/image")}),
        options: Options(headers: headers));
    // print(response.data.toString());
  }
}

注意事项

如果你使用了 dio_http_formatter，你需要覆盖其方法以确保正确处理某些情况：

class MyHttpFormatter extends HttpFormatter {

  [@override](/user/override)
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
    options.extra.putIfAbsent("start_time", () => DateTime.now().millisecondsSinceEpoch);
    handler.next(options);
  }

  [@override](/user/override)
  void onResponse(Response response, ResponseInterceptorHandler handler) async {
    if (response.data != null && (response.data == "" || response.data == " ")) {
      response.data = '{"fakeResponseToAvoidDioCrash":1}';
    }
    super.onResponse(response, handler);
  }
}

class MyChuckerInterceprot extends ChuckerDioInterceptor {

  [@override](/user/override)
  Future<void> onResponse(Response response, ResponseInterceptorHandler handler) async {
    try {
      await super.onResponse(response, handler);
    } catch (e) {
      debugPrint(e.toString());
      handler.next(response);
    }
  }
}