Selectable List

A widget displaying a list of selectable items

When one of the items is selected, the other elements of the list are animated out, leaving the selected value. When tapping on the value again, the other values are animated back into the list.

Example app


  • Use this package when you want to allow the user to choose one element in a list, and only show this element when selected.

  • Based on the Flutter AnimatedList widget


Import the package

import 'package:selectable_list/selectable_list.dart';

Use the widget

class _ScrollableListExampleState extends State<_ScrollableListExample> { final persons = [ Person("Ella", 3), Person("James", 25), Person("Gertrude", 99) ]; String? selectedName; @override Widget build(BuildContext context) { return SelectableList<Person, String?>( items: persons, itemBuilder: (context, person, selected, onTap) => ListTile( title: Text(, subtitle: Text('${person.age.toString()} years old'), selected: selected, onTap: onTap), valueSelector: (person) =>, selectedValue: selectedName, onItemSelected: (person) => setState(() => selectedName =, onItemDeselected: (person) => setState(() => selectedName = null), ), } }

Examples of use


Useful to make forms cleaner and more compact on mobile

Example in a form


View Github