feat: add infinite query builder with example
fix(query): updateQueryFn refetch when stale and update state of builders when widget is mounted
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:example/router.dart';
|
||||
import 'package:fl_query/fl_query.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
@@ -18,54 +17,10 @@ class MainApp extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final value = Random().nextInt(200000);
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
floatingActionButton: QueryListenable<String, dynamic, String>(
|
||||
const ValueKey('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, String>(
|
||||
const ValueKey('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) {
|
||||
print('onData: $value');
|
||||
},
|
||||
onError: (error) {
|
||||
print('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),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
return MaterialApp.router(
|
||||
title: 'FL Query Example',
|
||||
showPerformanceOverlay: true,
|
||||
routerConfig: router,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
class Product {
|
||||
int id;
|
||||
String title;
|
||||
String description;
|
||||
double price;
|
||||
double discountPercentage;
|
||||
double rating;
|
||||
double stock;
|
||||
String brand;
|
||||
String category;
|
||||
String thumbnail;
|
||||
List<String> images;
|
||||
|
||||
Product({
|
||||
required this.id,
|
||||
required this.title,
|
||||
required this.description,
|
||||
required this.price,
|
||||
required this.discountPercentage,
|
||||
required this.rating,
|
||||
required this.stock,
|
||||
required this.brand,
|
||||
required this.category,
|
||||
required this.thumbnail,
|
||||
required this.images,
|
||||
});
|
||||
|
||||
Product.fromJson(Map<String, dynamic> json)
|
||||
: id = json['id'],
|
||||
title = json['title'],
|
||||
description = json['description'],
|
||||
price = json['price'].toDouble(),
|
||||
discountPercentage = json['discountPercentage'].toDouble(),
|
||||
rating = json['rating'].toDouble(),
|
||||
stock = json['stock'].toDouble(),
|
||||
brand = json['brand'],
|
||||
category = json['category'],
|
||||
thumbnail = json['thumbnail'],
|
||||
images = json['images'].cast<String>();
|
||||
|
||||
Map<String, dynamic> toJson() {
|
||||
final Map<String, dynamic> data = <String, dynamic>{
|
||||
'id': id,
|
||||
'title': title,
|
||||
'description': description,
|
||||
'price': price,
|
||||
'discountPercentage': discountPercentage,
|
||||
'rating': rating,
|
||||
'stock': stock,
|
||||
'brand': brand,
|
||||
'category': category,
|
||||
'thumbnail': thumbnail,
|
||||
'images': images,
|
||||
};
|
||||
return data;
|
||||
}
|
||||
}
|
||||
|
||||
class PagedProducts {
|
||||
List<Product> products;
|
||||
int total;
|
||||
int skip;
|
||||
int limit;
|
||||
|
||||
PagedProducts({
|
||||
this.products = const [],
|
||||
required this.total,
|
||||
required this.skip,
|
||||
required this.limit,
|
||||
});
|
||||
|
||||
PagedProducts.fromJson(Map<String, dynamic> json)
|
||||
: products = json['products']
|
||||
?.map<Product>((v) => Product.fromJson(
|
||||
Map.castFrom<dynamic, dynamic, String, dynamic>(v),
|
||||
))
|
||||
.toList() ??
|
||||
[],
|
||||
total = json['total'],
|
||||
skip = json['skip'],
|
||||
limit = json['limit'];
|
||||
|
||||
Map<String, dynamic> toJson() {
|
||||
final Map<String, dynamic> data = <String, dynamic>{
|
||||
'products': products.map((v) => v.toJson()).toList(),
|
||||
'total': total,
|
||||
'skip': skip,
|
||||
'limit': limit,
|
||||
};
|
||||
return data;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
class HomePage extends StatelessWidget {
|
||||
const HomePage({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('FL Query Example'),
|
||||
),
|
||||
body: ListView(
|
||||
children: [
|
||||
ListTile(
|
||||
title: const Text('Query'),
|
||||
onTap: () => GoRouter.of(context).push('/query'),
|
||||
),
|
||||
ListTile(
|
||||
title: const Text('Infinite Query'),
|
||||
onTap: () => GoRouter.of(context).push('/infinite-query'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
import 'dart:convert';
|
||||
|
||||
import 'package:example/models/product.dart';
|
||||
import 'package:fl_query/fl_query.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:http/http.dart';
|
||||
|
||||
class InfiniteQueryPageWidget extends StatefulWidget {
|
||||
const InfiniteQueryPageWidget({super.key});
|
||||
|
||||
@override
|
||||
State<InfiniteQueryPageWidget> createState() =>
|
||||
_InfiniteQueryPageWidgetState();
|
||||
}
|
||||
|
||||
class _InfiniteQueryPageWidgetState extends State<InfiniteQueryPageWidget> {
|
||||
final controller = ScrollController();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
controller.addListener(() async {
|
||||
if (controller.position.pixels == controller.position.maxScrollExtent) {
|
||||
final query = QueryClient.of(context)
|
||||
.getInfiniteQuery(const ValueKey("products"));
|
||||
await query?.fetchNext();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Infinite Query'),
|
||||
),
|
||||
body: InfiniteQueryBuilder<PagedProducts, ClientException, String, int>(
|
||||
const ValueKey("products"),
|
||||
(page) async {
|
||||
final res = await get(Uri.parse(
|
||||
"https://dummyjson.com/products?limit=10&skip=${page * 10}",
|
||||
));
|
||||
|
||||
if (res.statusCode == 200) {
|
||||
return PagedProducts.fromJson(jsonDecode(res.body));
|
||||
} else {
|
||||
throw ClientException(res.statusCode.toString(), res.request?.url);
|
||||
}
|
||||
},
|
||||
nextPage: (lastPage, pages) {
|
||||
if (pages.isNotEmpty &&
|
||||
pages.last.products.length < pages[lastPage].limit) {
|
||||
/// returning [null] will set [hasNextPage] to [false]
|
||||
return null;
|
||||
}
|
||||
return lastPage + 1;
|
||||
},
|
||||
initialPage: 0,
|
||||
jsonConfig: JsonConfig(
|
||||
fromJson: (json) => PagedProducts.fromJson(json),
|
||||
toJson: (data) => data.toJson(),
|
||||
),
|
||||
builder: (context, query) {
|
||||
final products = query.pages.map((e) => e.products).expand((e) => e);
|
||||
if (!query.hasPages) {
|
||||
return const Center(
|
||||
child: CircularProgressIndicator(),
|
||||
);
|
||||
}
|
||||
return ListView(
|
||||
controller: controller,
|
||||
children: [
|
||||
for (final product in products)
|
||||
ListTile(
|
||||
title: Text(product.title),
|
||||
subtitle: Text(product.description),
|
||||
leading: Image.network(product.thumbnail),
|
||||
),
|
||||
if (query.hasNextPage)
|
||||
const Center(
|
||||
child: CircularProgressIndicator(),
|
||||
),
|
||||
if (query.hasErrors)
|
||||
...query.errors.map((e) => Text(e.message)).toList(),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
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, String>(
|
||||
const ValueKey('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, String>(
|
||||
const ValueKey('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"),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import "package:example/pages/home.dart";
|
||||
import "package:example/pages/infinite_query.dart";
|
||||
import "package:example/pages/query.dart";
|
||||
import "package:go_router/go_router.dart";
|
||||
|
||||
final router = GoRouter(
|
||||
initialLocation: '/',
|
||||
routes: [
|
||||
GoRoute(
|
||||
path: '/',
|
||||
builder: (context, state) => const HomePage(),
|
||||
),
|
||||
GoRoute(
|
||||
path: '/query',
|
||||
builder: (context, state) => const QueryPage(),
|
||||
),
|
||||
GoRoute(
|
||||
path: '/infinite-query',
|
||||
builder: (context, state) => const InfiniteQueryPageWidget(),
|
||||
),
|
||||
],
|
||||
);
|
||||
@@ -167,6 +167,14 @@ packages:
|
||||
description: flutter
|
||||
source: sdk
|
||||
version: "0.0.0"
|
||||
go_router:
|
||||
dependency: "direct main"
|
||||
description:
|
||||
name: go_router
|
||||
sha256: "7a79232827c851f6b9f08c3c7254a1eaff7bc6aa147e103e51f951c5c10b0ccc"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "6.0.9"
|
||||
hive:
|
||||
dependency: transitive
|
||||
description:
|
||||
@@ -183,6 +191,22 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "1.1.0"
|
||||
http:
|
||||
dependency: "direct main"
|
||||
description:
|
||||
name: http
|
||||
sha256: "6aa2946395183537c8b880962d935877325d6a09a2867c3970c05c0fed6ac482"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "0.13.5"
|
||||
http_parser:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: http_parser
|
||||
sha256: "2aa08ce0341cc9b354a498388e30986515406668dbcc4f7c950c3e715496693b"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "4.0.2"
|
||||
js:
|
||||
dependency: transitive
|
||||
description:
|
||||
@@ -199,6 +223,14 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "2.0.1"
|
||||
logging:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: logging
|
||||
sha256: "04094f2eb032cbb06c6f6e8d3607edcfcb0455e2bb6cbc010cb01171dcb64e6d"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "1.1.1"
|
||||
matcher:
|
||||
dependency: transitive
|
||||
description:
|
||||
@@ -445,5 +477,5 @@ packages:
|
||||
source: hosted
|
||||
version: "6.2.2"
|
||||
sdks:
|
||||
dart: ">=2.19.0 <4.0.0"
|
||||
flutter: ">=3.0.0"
|
||||
dart: ">=2.19.0 <3.0.0"
|
||||
flutter: ">=3.3.0"
|
||||
|
||||
@@ -10,6 +10,8 @@ dependencies:
|
||||
flutter:
|
||||
sdk: flutter
|
||||
fl_query: ^0.3.1
|
||||
go_router: ^6.0.9
|
||||
http: ^0.13.5
|
||||
|
||||
dev_dependencies:
|
||||
flutter_test:
|
||||
|
||||
Reference in New Issue
Block a user