Flutter网络请求与缓存插件http_hive_cache的使用

Flutter网络请求与缓存插件http_hive_cache的使用

特性

支持三种模式：无缓存、响应头、客户端指定。

使用

http_hive_cache 插件可以用于在 HTTP GET 请求期间缓存响应。使用方式非常简单，只需调用 HttpHiveCache.get() 方法即可。

final response = await HttpHiveCache.get(
  Uri.parse(url),
);

完整示例

以下是一个完整的示例，展示了如何使用 http_hive_cache 插件进行网络请求并处理响应。

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:http_hive_cache/http_hive_cache.dart';

Future<void> main() async {
  // 初始化 http_hive_cache
  await HttpHiveCache.init();

  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(
        useMaterial3: true,
        brightness: Brightness.light,
        colorSchemeSeed: Colors.blue,
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        colorSchemeSeed: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends HookWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 创建一个文本控制器
    final urlController = useTextEditingController();
    // 用于存储结果
    final result = useState('no response');

    return Scaffold(
      appBar: AppBar(
        title: const Text('HttpHiveCache 示例'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: SizedBox(
          width: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 输入框用于输入 URL
              ConstrainedBox(
                constraints: const BoxConstraints(
                  maxWidth: 600,
                ),
                child: TextField(
                  controller: urlController,
                  keyboardType: TextInputType.url,
                  textInputAction: TextInputAction.done,
                  decoration: const InputDecoration(
                    hintText: 'URL',
                    border: OutlineInputBorder(),
                  ),
                ),
              ),
              const SizedBox(
                height: 16,
              ),
              // 搜索按钮
              TextButton(
                onPressed: () async {
                  final url = urlController.text;
                  // 发起 HTTP GET 请求，并获取响应
                  final response = await HttpHiveCache.get(
                    Uri.parse(url),
                  );

                  // 解析 JSON 响应
                  final body = json.decode(response.body) as Map;
                  result.value = body.toString();
                },
                child: const Text('搜索'),
              ),
              const SizedBox(
                height: 16,
              ),
              // 显示搜索结果
              Text('结果: ${result.value}'),
            ],
          ),
        ),
      ),
    );
  }
}