firestore_lazy_loading_web_totalxsoftware 0.0.3

firestore_lazy_loading_web_totalxsoftware: ^0.0.3 copied to clipboard

example/lib/main.dart

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firestore_lazy_loading_web_totalxsoftware/firestore_lazy_loading_web_totalxsoftware.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firestore Lazy Loading Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const LazyLoadingPage(),
    );
  }
}

class LazyLoadingPage extends StatefulWidget {
  const LazyLoadingPage({super.key});

  @override
  _LazyLoadingPageState createState() => _LazyLoadingPageState();
}

class _LazyLoadingPageState extends State<LazyLoadingPage> {
  late FirestoreLazyLoadingWebTx lazyLoading;
  bool isLoading = false;

  List<QueryDocumentSnapshot<Map<String, dynamic>>> docs = [];

  @override
  void initState() {
    super.initState();

    // Set up the Firestore query and lazy loading instance
    final query =
        FirebaseFirestore.instance.collection('items').orderBy('name');
    lazyLoading = FirestoreLazyLoadingWebTx(query: query, limit: 10);

    // Add listeners to update the UI when data changes
    lazyLoading.addDocsListener((docs) {
      setState(() {
        this.docs = docs;
      });
    });

    lazyLoading.addIsLoadingListener((isLoading) {
      setState(() {
        this.isLoading = isLoading;
      });
    });

    // lazyLoading.addHasMoreDataListener((hasMoreData) {
    //   setState(() {});
    // });

    // Fetch initial data
    lazyLoading.fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Lazy Loading with Firestore')),
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: isLoading
                ? const CircularProgressIndicator()
                : const SizedBox.shrink(),
          ),
          // SliverList to display fetched data
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                final item = docs[index].data();
                return ListTile(
                  title: Text(item['name'] ?? 'No name'),
                  subtitle: Text(item['description'] ?? 'No description'),
                );
              },
              childCount: docs.length,
            ),
          ),

          SliverToBoxAdapter(
            child: lazyLoading.loadMoreButton(
              buttonChild: const Text('Load More'),
              loadingIndicator: const CircularProgressIndicator(),
              onPressed: () {
                lazyLoading.fetchData();
              },
            ),
          ),
        ],
      ),
    );
  }
}