flex_infinity_view 0.1.0

Flexible infinite scrolling for Flutter lists, grids, and staggered layouts with loading, empty, and error states.

flex_infinity_view

Flexible infinite scrolling for Flutter lists, grids, and simple staggered layouts with loading, empty, and error states built in.

Features

• Standalone and sliver-based infinite scrolling widgets
• Support for ListView, GridView, and a two-column staggered layout
• Automatic first-page loading and next-page loading on scroll
• Explicit hasMore support so pagination can stop cleanly
• Default initial loading with CircularProgressIndicator
• Custom initial loading with loadingWidget
• Custom widgets for loading, empty, error, and load-more states
• External ScrollController support

Getting started

Add the package to your pubspec.yaml:

dependencies:
  flex_infinity_view: ^0.1.0

Usage

import 'package:flex_infinity_view/flex_infinity_view.dart';
import 'package:flutter/material.dart';

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

  @override
  State<ProductList> createState() => _ProductListState();
}

class _ProductListState extends State<ProductList> {
  final List<String> _items = [];

  bool _isLoading = false;
  bool _hasError = false;
  bool _hasMore = true;

  Future<void> _loadMore(int page, int limit) async {
    if (_isLoading) return;

    setState(() {
      _isLoading = true;
      _hasError = false;
    });

    try {
      await Future<void>.delayed(const Duration(milliseconds: 600));

      final nextItems = List.generate(
        limit,
        (index) => 'Item ${(page - 1) * limit + index + 1}',
      );

      setState(() {
        _items.addAll(nextItems);
        _hasMore = page < 4;
      });
    } catch (_) {
      setState(() => _hasError = true);
    } finally {
      setState(() => _isLoading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return FlexInfinityView<String>(
      items: _items,
      limit: 8,
      isLoading: _isLoading,
      hasError: _hasError,
      hasMore: _hasMore,
      loadingWidget: const Center(child: CircularProgressIndicator()),
      onLoadMore: _loadMore,
      itemBuilder: (context, item, index) {
        return ListTile(title: Text(item));
      },
    );
  }
}

Layouts

Use layoutType to switch between supported presentations:

FlexInfinityView<MyItem>(
  layoutType: InfiniteLayoutType.grid,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 0.78,
  ),
  items: items,
  limit: 12,
  isLoading: isLoading,
  hasMore: hasMore,
  onLoadMore: fetchItems,
  itemBuilder: (context, item, index) => ProductCard(item: item),
)

Available values:

• InfiniteLayoutType.list
• InfiniteLayoutType.grid
• InfiniteLayoutType.staggered

Sliver usage

Use FlexInfinitySliverView when you need to place the package inside an existing CustomScrollView.

CustomScrollView(
  slivers: [
    const SliverAppBar(
      pinned: true,
      title: Text('Products'),
    ),
    FlexInfinitySliverView<Product>(
      items: items,
      limit: 12,
      isLoading: isLoading,
      hasError: hasError,
      hasMore: hasMore,
      layoutType: InfiniteLayoutType.grid,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 0.78,
      ),
      onLoadMore: fetchProducts,
      itemBuilder: (context, item, index) => ProductCard(item: item),
    ),
  ],
)

State handling

The widget supports:

• Initial loading with loadingWidget
• Empty state with emptyWidget
• Error state with errorWidget
• Load-more state with loadMoreWidget
• Pagination stop with hasMore

Example

The example/ app demonstrates:

• FlexInfinityView as a standalone scrollable
• FlexInfinitySliverView inside CustomScrollView
• List, grid, and staggered layouts
• Default loading and custom loading states
• Empty responses
• Initial request errors
• Next-page request errors with retry

Run it with:

flutter run -d chrome example/lib/main.dart

Additional information

Before publishing, run:

flutter analyze
flutter test
flutter pub publish --dry-run

Package page guidance used for this setup:

• Dart package page recommendations: https://dart.dev/tools/pub/writing-package-pages
• Publishing guidance: https://dart.dev/tools/pub/publishing