Flutter Firestore数据懒加载插件firestore_lazy_loading_totalxsoftware的使用

Flutter Firestore数据懒加载插件firestore_lazy_loading_totalxsoftware的使用

简介

firestore_lazy_loading_totalxsoftware 是一个Flutter插件，用于简化Firestore数据的分页懒加载。它利用 ScrollController 在用户滚动时触发数据加载，支持分页查询、自动加载更多数据、处理加载状态和无更多数据条件。

功能特性

• 分页支持：支持Firestore查询的分页。
• 自动加载：当用户接近列表底部时自动加载更多数据。
• 状态处理：处理加载状态和无更多数据的情况。
• 简单API：提供简单的API进行集成。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  firestore_lazy_loading_totalxsoftware: 1.0.0

然后运行以下命令安装依赖：

flutter pub get

使用示例

以下是一个完整的示例代码，展示了如何使用 firestore_lazy_loading_totalxsoftware 插件实现Firestore数据的懒加载。

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: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](/user/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](/user/override)
  State<LazyLoadingPage> createState() => _LazyLoadingPageState();
}

class _LazyLoadingPageState extends State<LazyLoadingPage> {
  // FirestoreLazyLoadingTotalxsoftware实例
  FirestoreLazyLoadingTotalxsoftware lazyLoading = FirestoreLazyLoadingTotalxsoftware();
  // 用于存储获取到的数据
  List<NotificationModel> notificationList = [];
  bool isNoMoreData = false;
  bool isLoading = false;

  [@override](/user/override)
  void initState() {
    initData();
    super.initState();
  }

  void initData() {
    lazyLoading.fetchInitData(
      context,
      query: FirebaseFirestore.instance
          .collection('notification')
          .orderBy('createdAt'), // 按创建时间排序
      limit: 10, // 每次加载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](/user/override)
  void dispose() {
    // 释放资源
    lazyLoading.clear();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Lazy Loading Example'),
      ),
      body: CustomScrollView(
        controller: lazyLoading.scrollController, // 使用插件提供的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(), // 底部加载指示器
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class NotificationModel {
  String? id;
  final String title;
  String? imageUrl;
  final String description;
  final Timestamp createdAt;
  final String subscription;
  final String? fcmToken;
  final String? userId;

  NotificationModel({
    this.id,
    required this.title,
    this.imageUrl,
    required this.description,
    required this.createdAt,
    required this.subscription,
    this.fcmToken,
    this.userId,
  });

  Map<String, dynamic> toMap() {
    return <String, dynamic>{
      'id': id,
      'title': title,
      'imageUrl': imageUrl,
      'description': description,
      'createdAt': createdAt,
      'subscription': subscription,
      'fcmToken': fcmToken,
      'userId': userId,
    };
  }

  factory NotificationModel.fromMap(Map<String, dynamic> map) {
    return NotificationModel(
      id: map['id'] != null ? map['id'] as String : null,
      title: map['title'] as String,
      imageUrl: map['imageUrl'] != null ? map['imageUrl'] as String : null,
      description: map['description'] as String,
      createdAt: map['createdAt'] as Timestamp,
      subscription: map['subscription'] as String,
      fcmToken: map['fcmToken'] != null ? map['fcmToken'] as String : null,
      userId: map['userId'] != null ? map['userId'] as String : null,
    );
  }

  NotificationModel copyWith({
    String? id,
    String? title,
    String? imageUrl,
    String? description,
    Timestamp? createdAt,
    String? subscription,
    String? fcmToken,
    String? userId,
  }) {
    return NotificationModel(
      id: id ?? this.id,
      title: title ?? this.title,
      imageUrl: imageUrl ?? this.imageUrl,
      description: description ?? this.description,
      createdAt: createdAt ?? this.createdAt,
      subscription: subscription ?? this.subscription,
      fcmToken: fcmToken ?? this.fcmToken,
      userId: userId ?? this.userId,
    );
  }
}