Flutter数据库查询插件fl_query的使用

Fl-Query简介

Fl-Query是一个为Flutter设计的异步数据缓存、重新获取和失效库。它允许你在不接触任何全局状态的情况下管理和分发异步数据，让异步服务器状态管理变得轻而易举。

特性

• 异步数据缓存与管理
• 智能且有效的重新获取
• 乐观更新
• 自动缓存的数据失效和不需要的查询/变更垃圾回收
• 通过InfiniteQuery实现无限分页
• 使用Hive进行持久化缓存（可选）
• 简单易懂的代码，遵循DRY原则
• 兼容原生Flutter和flutter_hooks

安装

普通安装：

$ flutter pub add fl_query

对于使用flutter_hooks的用户（欢迎加入酷炫的Flutter社区😎）：

$ flutter pub add flutter_hooks fl_query_hooks

文档

你可以在这里找到fl-query的文档。

基本用法

初始化缓存数据库

在main方法中初始化缓存数据库：

fl-query使用Hive将数据持久化到磁盘

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await QueryClient.initialize(cachePrefix: 'fl_query_example');
  runApp(MyApp());
}

包装MaterialApp

在MyApp Widget的build方法中使用QueryClientProvider包装你的MaterialApp：

Widget build(BuildContext context) {
  return QueryClientProvider(
    child: MaterialApp(
      title: 'Fl-Query Example App',
      theme: ThemeData(
        useMaterial3: true,
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    ),
  );
}

使用Query

FL-Query提供了一个QueryBuilder widget来创建和监听指定的Query，并在有更新时重新运行构建函数。它有两个必需的参数（未命名）：key和builder。

示例代码

这是一个简单的例子，展示了如何使用QueryBuilder：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return QueryBuilder<String, dynamic>(
      'hello',
      () {
        return Future.delayed(
            const Duration(seconds: 6), () => 'Hello World!');
      },
      initial: 'A replacement',
      jsonConfig: JsonConfig(
        fromJson: (json) => json['data'],
        toJson: (data) => {'data': data},
      ),
      onData: (value) {
        debugPrint('onData: $value');
      },
      onError: (error) {
        debugPrint('onError: $error');
      },
      builder: (context, query) {
        if (query.isLoading) {
          return const Center(
            child: CircularProgressIndicator(),
          );
        } else if (query.hasError) {
          return Center(
            child: Text(query.error.toString()),
          );
        }
        return Center(
          child: Text(query.data ?? "Unfortunately, there's no data"),
        );
      },
    );
  }
}

如果你使用的是flutter_hooks，你可以这样写：

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final query = useQuery<String, dynamic>(
      'hello',
      () {
        return Future.delayed(
            const Duration(seconds: 6), () => 'Hello World!');
      },
      initial: 'A replacement',
      jsonConfig: JsonConfig(
        fromJson: (json) => json['data'],
        toJson: (data) => {'data': data},
      ),
      onData: (value) {
        debugPrint('onData: $value');
      },
      onError: (error) {
        debugPrint('onError: $error');
      },
    );

    if (query.isLoading) {
      return const Center(
        child: CircularProgressIndicator(),
      );
    } else if (query.hasError) {
      return Center(
        child: Text(query.error.toString()),
      );
    }
    return Center(
      child: Text(query.data ?? "Unfortunately, there's no data"),
    );
  }
}

更多关于fl-query的信息，请访问官方博客：https://fl-query.krtirtho.dev/blog

总结

Fl-Query的主要目的是以最少的代码量和最高的代码重用性及性能，提供一种最简单的方式来管理复杂的服务器状态部分。这让你可以专注于那些酷炫的UI动画和过渡✨，把繁琐的工作交给fl-query处理。

如果你想了解更多关于fl-query的内容，或者有任何问题，欢迎访问其官方网站或参与GitHub上的讨论。