Firestore Lazy Loading Totalxsoftware

Developed by Totalx Software

---

A Flutter package to simplify lazy loading of Firestore data with pagination, utilizing a ScrollController to trigger data fetches as users scroll.

Features

• Pagination support for Firestore queries.
• Automatic data loading when nearing the end of the list.
• Handles loading states and no-more-data conditions.
• Simple API for integration.

Installation

Add the following dependency to your pubspec.yaml file:

dependencies:
  firestore_lazy_loading_totalxsoftware: 1.0.0

Then, run:

flutter pub get

Usage

Example Code

Here is an example implementation of lazy loading Firestore data using the firestore_lazy_loading_totalxsoftware package:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firestore_lazy_loading_totalxsoftware/firestore_lazy_loading_totalxsoftware.dart';
import 'package:firestore_lazy_loading_totalxsoftware_example/firebase_options.dart';
import 'package:flutter/material.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(const MyApp());
}

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

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

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

  @override
  State<LazyLoadingPage> createState() => _LazyLoadingPageState();
}

class _LazyLoadingPageState extends State<LazyLoadingPage> {
  // FirestoreLazyLoadingTotalxsoftware instance
  FirestoreLazyLoadingTotalxsoftware lazyLoading = FirestoreLazyLoadingTotalxsoftware();
  // List to hold fetched data
  List<NotificationModel> notificationList = [];
  bool isNoMoreData = false;
  bool isLoading = false;

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

  void initData() {
    lazyLoading.fetchInitData(
      context,
      query: FirebaseFirestore.instance
          .collection('notification')
          .orderBy('createdAt'),
      limit: 10,
      noMoreData: (value) {
        isNoMoreData = value;
        setState(() {});
      },
      onLoading: (value) {
        isLoading = value;
        setState(() {});
      },
      onData: (data) {
        for (var element in data) {
          notificationList.add(NotificationModel.fromMap(element.data()));
        }
        setState(() {});
      },
    );
  }

  @override
  void dispose() {
    // Dispose the scroll controller when done
    lazyLoading.clear();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Lazy Loading Example'),
      ),
      body: CustomScrollView(
        controller: lazyLoading.scrollController,
        slivers: [
          if (isLoading)
            const SliverFillRemaining(
              hasScrollBody: false,
              child: Center(
                child: CircularProgressIndicator(),
              ),
            )
          else
            SliverList.builder(
              itemCount: notificationList.length,
              itemBuilder: (context, index) {
                final item = notificationList[index];
                return ListTile(
                  title: Text(item.title),
                  subtitle: Text(item.description),
                );
              },
            ),
          SliverToBoxAdapter(
            child: lazyLoading.bottomLoadingIndicator(
              child: const Padding(
                padding: EdgeInsets.all(8.0),
                child: Center(
                  child: CircularProgressIndicator(),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Key Points

1. Initialize FirestoreLazyLoadingTotalxsoftware and provide a Firestore query.
2. Use fetchInitData for initial data fetch and lazy loading setup.
3. Pass callbacks for loading state, data updates, and no-more-data conditions.
4. Use bottomLoadingIndicator to display a loading spinner at the bottom of the list.

Explore more about TotalX at www.totalx.in - Your trusted software development company!

YouTube

Twitter

Instagram

LinkedIn

🌐 Connect with Totalx Software

Join the vibrant Flutter Firebase Kerala community for updates, discussions, and support:

Flutter Firebase Kerala Totax