Files
App/lib/widgets/realm/realm_list.dart

75 lines
2.5 KiB
Dart

import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:island/models/realm.dart';
import 'package:island/pods/network.dart';
import 'package:island/pods/paging.dart';
import 'package:island/widgets/paging/pagination_list.dart';
import 'package:island/widgets/realm/realm_card.dart';
import 'package:styled_widget/styled_widget.dart';
final realmListNotifierProvider = AsyncNotifierProvider.autoDispose
.family<RealmListNotifier, List<SnRealm>, String?>(RealmListNotifier.new);
class RealmListNotifier
extends AutoDisposeFamilyAsyncNotifier<List<SnRealm>, String?>
with FamilyAsyncPaginationController<SnRealm, String?> {
static const int _pageSize = 20;
@override
Future<List<SnRealm>> fetch() async {
final client = ref.read(apiClientProvider);
final queryParams = {
'offset': fetchedCount,
'take': _pageSize,
if (arg != null && arg!.isNotEmpty) 'query': arg,
};
final response = await client.get(
'/sphere/discovery/realms',
queryParameters: queryParams,
);
totalCount = int.parse(response.headers.value('X-Total') ?? '0');
final List<dynamic> data = response.data;
return data.map((json) => SnRealm.fromJson(json)).toList();
}
}
class SliverRealmList extends HookConsumerWidget {
const SliverRealmList({super.key, this.query});
final String? query;
@override
Widget build(BuildContext context, WidgetRef ref) {
final provider = realmListNotifierProvider(query);
return PaginationList(
provider: provider,
notifier: provider.notifier,
isSliver: true,
isRefreshable: false,
itemBuilder: (context, index, realm) {
return Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child:
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 540),
child: RealmCard(realm: realm),
).center(),
),
if (index <
(ref.read(provider).valueOrNull?.length ?? 0) -
1) // Add gap except for last item? Actually PaginationList handles loading indicator which might look like last item.
// Wait, ref.read(provider).valueOrNull?.length might change.
// Simpler to just add bottom padding to all, or Gap.
const Gap(8),
],
);
},
);
}
}