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:
Kingkor Roy Tirtho
2023-02-21 12:03:45 +06:00
parent 975f9eafe1
commit efa2c81505
21 changed files with 778 additions and 143 deletions
+5 -50
View File
@@ -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"),
);
},
),
);
}
}
+22
View File
@@ -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(),
),
],
);
+34 -2
View File
@@ -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"
+2
View File
@@ -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: