drag_selectable_listview 2.0.1

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

example/main.dart

import 'package:drag_selectable_listview/drag_selectable_listview.dart';
import 'package:drag_selectable_listview/drag_selectable_provider.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Demo', home: DemoPage());
  }
}

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);
      }
    }

    // Show toast to display selected elements
    String message;
    if (set.isEmpty) {
      message = "No items selected";
    } else {
      message = "Selected items: ${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("toast selected"),
          ),
          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);
              },
            ),
          ),
        ],
      ),
    );
  }
}