utopia_hooks_query 0.7.0+2

Fetch, cache, and sync server data with automatic state management and background updates, inspired by TanStack Query.

example/lib/main.dart

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

import 'demos/basic_query_demo.dart';
import 'demos/dependent_query_demo.dart';
import 'demos/global_fetching_demo.dart';
import 'demos/infinite_scroll_demo.dart';
import 'demos/mutation_demo.dart';
import 'demos/optimistic_demo.dart';
import 'demos/pagination_demo.dart';
import 'demos/polling_demo.dart';

void main() {
  runApp(
    QueryClientProvider(
      create: (context) => QueryClient(),
      child: MaterialApp(
        title: 'utopia_hooks_query examples',
        theme: ThemeData(colorSchemeSeed: Colors.indigo, useMaterial3: true),
        home: const HomeScreen(),
      ),
    ),
  );
}

/// A demo entry: label, one-line description, and the screen it opens.
typedef Demo = ({String title, String subtitle, WidgetBuilder builder});

final _demos = <Demo>[
  (
    title: 'Basic query',
    subtitle: 'useQuery — fetch, cache, loading/error states, refetch',
    builder: (_) => const BasicQueryDemo(),
  ),
  (
    title: 'Pagination',
    subtitle: 'page-at-a-time, keep previous page while loading next',
    builder: (_) => const PaginationDemo(),
  ),
  (
    title: 'Infinite scroll',
    subtitle: 'useInfiniteQuery — accumulate pages, load more on scroll',
    builder: (_) => const InfiniteScrollDemo(),
  ),
  (
    title: 'Mutation + invalidation',
    subtitle: 'useMutation — create, then invalidate the list',
    builder: (_) => const MutationDemo(),
  ),
  (
    title: 'Optimistic updates',
    subtitle: 'update cache before the server, roll back on error',
    builder: (_) => const OptimisticDemo(),
  ),
  (
    title: 'Polling',
    subtitle: 'refetchInterval — auto-refetch on a timer',
    builder: (_) => const PollingDemo(),
  ),
  (
    title: 'Dependent queries',
    subtitle: 'enabled — run one query only after another resolves',
    builder: (_) => const DependentQueryDemo(),
  ),
  (
    title: 'Global fetching indicator',
    subtitle: 'useIsFetching — one spinner for any in-flight query',
    builder: (_) => const GlobalFetchingDemo(),
  ),
];

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('utopia_hooks_query')),
      body: ListView.separated(
        itemCount: _demos.length,
        separatorBuilder: (_, __) => const Divider(height: 1),
        itemBuilder: (context, index) {
          final demo = _demos[index];
          return ListTile(
            leading: CircleAvatar(child: Text('${index + 1}')),
            title: Text(demo.title),
            subtitle: Text(demo.subtitle),
            trailing: const Icon(Icons.chevron_right),
            onTap: () => Navigator.of(context).push(
              MaterialPageRoute(builder: demo.builder),
            ),
          );
        },
      ),
    );
  }
}