Drag Selectable ListView

A Flutter ListView that supports drag-to-select multiple items with customizable selection UI and smooth interaction.

Features

✨ Drag Selection: Select multiple items by dragging across them
🎨 Customizable UI: Custom checkbox builders and item layouts
🎯 Flexible Selection: Support for both tap and drag selection modes
⚡ Performance Optimized: Efficient state management with Provider pattern
🎛️ Configurable: Optional haptic feedback

Demo

Demo GIF

Getting Started

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  drag_selectable_listview: ^2.0.0

Then run:

flutter pub get

Complete Example

Here's a complete working example showing how to use DragSelectableListView:

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

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  int itemCount = 100;
  late DragSelectableProvider provider;

  @override
  void initState() {
    super.initState();
    List<bool> initialSelection = List.generate(itemCount, (_) => false);
    provider = DragSelectableProvider(initialSelection);
  }

  void _showToast() {
    Set<int> set = {};
    for (int i = 0; i < provider.selected.length; i++) {
      if (provider.selected[i]) {
        set.add(i);
      }
    }

    // 显示Toast展示选中的元素
    String message;
    if (set.isEmpty) {
      message = "没有选中任何元素";
    } else {
      message = "选中的元素: ${set.toList().join(', ')}";
    }

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(message),
        duration: Duration(seconds: 2),
        behavior: SnackBarBehavior.floating,
      ),
    );
  }

  @override
  void dispose() {
    provider.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Demo")),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {
              _showToast();
            },
            child: Text("collect"),
          ),
          Expanded(
            child: DragSelectableListView(
              provider: provider,
              itemCount: itemCount,
              itemHeight: 40,
              checkboxWidth: 40,
              touchSlop: 8.0,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    print(index);
                  },
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Expanded(
                        flex: 1,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [Text("Item $index")],
                        ),
                      ),
                      Divider(height: 1),
                    ],
                  ),
                );
              },
              checkboxBuilder:
                      ({
                required bool value,
                required ValueChanged<bool?> onChanged,
              }) => Transform.scale(
                scale: 1.2,
                child: Checkbox(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0), // 数值越大越圆
                  ),
                  value: value,
                  onChanged: onChanged,
                ),
              ),
              onSelectionChanged: (List<bool> list) {
                // print(list);
              },
            ),
          ),
        ],
      ),
    );
  }
}

API Reference