Quick Start

This is a simple & dummy example that covers the usage of

• Query

import 'package:fl_query_connectivity_plus_adapter/fl_query_connectivity_plus_adapter.dart';
import 'package:fl_query_hooks_example/router.dart';
import 'package:fl_query/fl_query.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await QueryClient.initialize(
    cachePrefix: 'fl_query_hooks_example',
    connectivity: FlQueryConnectivityPlusAdapter(),
  );
  runApp(
    QueryClientProvider(
      child: const MainApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorSchemeSeed: Colors.red[100],
        useMaterial3: true,
      ),
      title: 'FL Query Hooks Example',
      home: const QueryPage(),
    );
  }
}

Vanilla

import 'dart:math';

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

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

  @override
  Widget build(BuildContext context) {
    final value = Random().nextInt(200000);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Query'),
      ),
      floatingActionButton:
          QueryListenable<String, dynamic>('hello', builder: (context, query) {
        if (query == null) {
          return const SizedBox();
        }
        return FloatingActionButton(
          onPressed: () {
            query.refresh();
          },
          child: Text(query.data ?? 'No Data'),
        );
      }),
      body: QueryBuilder<String, dynamic>(
        'hello',
        () {
          return Future.delayed(
            const Duration(seconds: 6),
            () => 'Hello World! $value',
          );
        },
        initial: 'Hello',
        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

import 'dart:math';

import 'package:fl_query/fl_query.dart';
import 'package:fl_query_hooks/fl_query_hooks.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

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

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

    return Scaffold(
      appBar: AppBar(
        title: const Text('Query'),
      ),
      floatingActionButton:
          QueryListenable<String, dynamic>('hello', builder: (context, query) {
        if (query == null) {
          return const SizedBox();
        }
        return FloatingActionButton(
          onPressed: () {
            query.refresh();
          },
          child: Text(query.data ?? 'No Data'),
        );
      }),
      body: query.isLoading
          ? const Center(
              child: CircularProgressIndicator(),
            )
          : query.hasError
          ? Center(
              child: Text(query.error.toString()),
            )
          : Center(
              child: Text(query.data ?? "Unfortunately, there's no data"),
            ),
    );
  }
}

tip

If you want to explore more you can see the Example Application which covers a lot of use-cases

Also you can browse Spotube/libs/services/queries & Spotube/libs/services/mutations directories of Spotube where Fl-Query is used in a real-world production application