advanced_list_view #

One widget. Every layout. All features.

A universal, adaptive, feature-packed replacement for ListView.builder and GridView.builder with automatic layout switching, skeleton loading, drag & drop, A-Z jump bar, selection modes, animations, and responsive design — all in one widget.

Phone	Tablet	Desktop
List	2-col Grid	3+ Grid

Features #

✨ Adaptive Layout - Automatically switches between list and grid based on screen size
⏳ Skeleton Loading - Beautiful shimmer effects while data loads
🎯 Selection Modes - Single or multi-select with visual feedback
🔄 Drag & Drop - Reorder items with smooth animations
🔤 A-Z Index Bar - Quick navigation through large lists
📱 Responsive Design - Works seamlessly from phone to desktop
✨ Animations - Smooth transitions for all interactions
👆 Swipe Actions - Leading and trailing swipe actions
🔄 Pull to Refresh - Built-in refresh indicator
📊 Sorting - Built-in sorting with custom comparators
🎨 Empty/Error States - Customizable empty and error widgets

Installation #

dependencies:
  advanced_list_view: ^1.0.0

flutter pub add advanced_list_view

Quick Start #

import 'package:advanced_list_view/advanced_list_view.dart';

AdvancedListView<Contact>(
  items: contacts,
  layoutMode: LayoutMode.auto,
  itemBuilder: (context, contact, index, constraints) {
    return ContactCard(contact: contact);
  },
)

Usage Examples #

Basic List #

AdvancedListView<String>(
  items: ['Item 1', 'Item 2', 'Item 3'],
  itemBuilder: (context, item, index, constraints) {
    return ListTile(title: Text(item));
  },
)

Adaptive Layout (Auto) #

AdvancedListView<Contact>(
  items: contacts,
  layoutMode: LayoutMode.auto,
  minItemWidth: 300,
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 400,
    childAspectRatio: 3,
  ),
  itemBuilder: (context, contact, index, constraints) {
    final isGrid = constraints.maxWidth > 600;
    return Card(
      child: Padding(
        padding: EdgeInsets.all(isGrid ? 16 : 12),
        child: Row(
          children: [
            CircleAvatar(
              radius: isGrid ? 30 : 24,
              backgroundImage: NetworkImage(contact.avatar),
            ),
            SizedBox(width: isGrid ? 16 : 12),
            Text(contact.name),
          ],
        ),
      ),
    );
  },
)

Skeleton Loading #

AdvancedListView<Contact>(
  items: contacts,
  isLoading: true,
  skeletonCount: 10,
  skeletonBuilder: (context) => SkeletonItem(height: 100),
  itemBuilder: (context, contact, index, constraints) {
    return ContactCard(contact: contact);
  },
)

Multi-Select #

AdvancedListView<Contact>(
  items: contacts,
  multiSelectEnabled: true,
  onSelectionChanged: (selected) {
    print('Selected: ${selected.length} items');
  },
  itemBuilder: (context, contact, index, constraints) {
    return ContactCard(contact: contact);
  },
)

Drag & Drop #

AdvancedListView<Contact>(
  items: contacts,
  allowReorder: true,
  onReorder: (oldIndex, newIndex) {
    // Handle reorder
    final item = contacts.removeAt(oldIndex);
    contacts.insert(newIndex, item);
  },
  itemBuilder: (context, contact, index, constraints) {
    return ContactCard(contact: contact);
  },
)

A-Z Index Bar #

AdvancedListView<Contact>(
  items: contacts,
  showIndexBar: true,
  onIndexTap: (letter) {
    // Jump to section starting with letter
    print('Jumped to: $letter');
  },
  itemBuilder: (context, contact, index, constraints) {
    return ContactCard(contact: contact);
  },
)

Swipe Actions #

AdvancedListView<Contact>(
  items: contacts,
  // Leading actions (swipe right)
  leadingActions: (context, contact, index) => [
    Icon(Icons.star, color: Colors.white),
  ],
  // Trailing actions (swipe left)
  trailingActions: (context, contact, index) => [
    Icon(Icons.delete, color: Colors.white),
  ],
  // Handle swipe events
  onLeadingSwipe: (contact, index) {
    print('Starred: ${contact.name}');
  },
  onTrailingSwipe: (contact, index) {
    // Remove from list
    contacts.removeAt(index);
  },
  itemBuilder: (context, contact, index, constraints) {
    return ContactCard(contact: contact);
  },
)

Pull to Refresh #

AdvancedListView<Contact>(
  items: contacts,
  onRefresh: () async {
    // Refresh data
    await fetchContacts();
  },
  itemBuilder: (context, contact, index, constraints) {
    return ContactCard(contact: contact);
  },
)

API Reference #