Dropdown Sheet

A customizable, searchable, and multi-select dropdown sheet widget for Flutter.

Features

  • 🎨 Fully customizable design
  • 🔍 Built-in search box
  • ✅ Single and multiple selection support
  • 📱 Responsive layout
  • ⚡ Loading and empty data states
  • 🔄 Dynamic (async) data support
  • 🏷️ Detailed parameter documentation

Installation

Add to your pubspec.yaml:

dependencies:
  dropdown_sheet: ^0.0.1

Usage

Basic Usage

import 'package:dropdown_sheet/dropdown_sheet.dart';

final ValueNotifier<SheetModel?> selectedCountry = ValueNotifier(null);
final List<SheetModel> countries = [
  SheetModel(id: '1', name: 'Turkey'),
  SheetModel(id: '2', name: 'Germany'),
  SheetModel(id: '3', name: 'France'),
];

DropdownSheet<SheetModel>(
  title: 'Select Country',
  values: countries,
  notifier: selectedCountry,
  onChanged: () {
    print('Selected country: \\${selectedCountry.value?.name}');
  },
)

Media

Single Selection

Multiple Selection

Customizable

Single Selection with Loading

Other Selection Screen

More usage examples below

Multi-Select & Search

final ValueNotifier<List<SheetModel>> selectedLanguages = ValueNotifier([]);
final List<SheetModel> languages = [
  SheetModel(id: '1', name: 'Turkish'),
  SheetModel(id: '2', name: 'English'),
  SheetModel(id: '3', name: 'German'),
];

DropdownSheet<SheetModel>(
  title: 'Languages',
  values: languages,
  notifier: selectedLanguages,
  isMultiSelect: true,
  showSearch: true,
  onChanged: () {
    print('Selected languages: \\${selectedLanguages.value.map((e) => e.name).join(", ")}');
  },
)

Loading State

final ValueNotifier<bool> isLoading = ValueNotifier(false);

DropdownSheet<SheetModel>(
  title: 'Cities',
  values: cities,
  notifier: selectedCity,
  loadingNotifier: isLoading,
  onChanged: () {
    print('Selected city: \\${selectedCity.value?.name}');
  },
)

Dynamic Values

DropdownSheet<SheetModel>(
  title: 'Districts',
  dynamicValues: () => fetchDistricts(),
  notifier: selectedDistrict,
  onChanged: () {
    print('Selected district: \\${selectedDistrict.value?.name}');
  },
)

Parameters

Parameter Type Description
title String Dropdown title
values List<dynamic>? List of options
dynamicValues List<dynamic>? Function()? Dynamic values function
notifier ValueNotifier Holds selected value(s)
onChanged Function? Called on selection change
isMultiSelect bool Multi-select
showSearch bool Show search box
isLoading bool Loading state
loadingNotifier ValueNotifier<bool>? Loading notifier
... ... See code for more

SheetModel

class SheetModel {
  final String id;
  final String name;
  SheetModel({required this.id, required this.name});
}

Advanced Usage

Standalone SelectionBottomSheet

showModalBottomSheet(
  context: context,
  builder: (context) => SelectionBottomSheet(
    title: 'Select a country',
    values: countries,
    showSearch: true,
    onChanged: (selected) {
      print('Selected: \\${selected.name}');
      Navigator.pop(context);
    },
  ),
);

See also

License

MIT

Türkçe

Flutter için özelleştirilebilir, arama destekli ve çoklu seçimli modern bir dropdown sheet bileşeni.

Özellikler

  • Tamamen özelleştirilebilir tasarım
  • Dahili arama kutusu
  • Tekli ve çoklu seçim desteği
  • Responsive yapı
  • Yükleniyor ve boş veri durumları
  • Dinamik veri desteği (async)
  • Parametreler için detaylı dokümantasyon

Kurulum

pubspec.yaml dosyanıza ekleyin:

dependencies:
  dropdown_sheet: ^0.0.1

Libraries