dropdown_sheet 0.0.2

A customizable dropdown sheet widget for Flutter with search functionality and multiple selection support.

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

[assets/example/selection_image_1.png] [assets/example/single_selection.gif]

Multiple Selection

[assets/example/multiple_image_1.png] [assets/example/multiple_selection.gif]

Customizable

[assets/example/customizable_image_1.png] [assets/example/customizable.gif]

Selection with Search Bar

[assets/example/selection_image_2_with_search_bar.png]

Single Selection with Loading

[assets/example/single_selection_with_loading.gif]

Other Selection Screen

[assets/example/selection_image_3.png]

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

• DropdownButton
• BottomSheet
• showModalBottomSheet
• ValueNotifier

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

Temel Kullanım

import 'package:dropdown_sheet/dropdown_sheet.dart';

final ValueNotifier<SheetModel?> selectedCountry = ValueNotifier(null);
final List<SheetModel> countries = [
  SheetModel(id: '1', name: 'Türkiye'),
  SheetModel(id: '2', name: 'Almanya'),
  SheetModel(id: '3', name: 'Fransa'),
];

DropdownSheet<SheetModel>(
  title: 'Ülke Seçiniz',
  values: countries,
  notifier: selectedCountry,
  onChanged: () {
    print('Seçilen ülke: \\${selectedCountry.value?.name}');
  },
)

Çoklu Seçim ve Arama

final ValueNotifier<List<SheetModel>> selectedLanguages = ValueNotifier([]);
final List<SheetModel> languages = [
  SheetModel(id: '1', name: 'Türkçe'),
  SheetModel(id: '2', name: 'İngilizce'),
  SheetModel(id: '3', name: 'Almanca'),
];

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

Yükleniyor Durumu

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

DropdownSheet<SheetModel>(
  title: 'Şehirler',
  values: cities,
  notifier: selectedCity,
  loadingNotifier: isLoading,
  onChanged: () {
    print('Seçilen şehir: \\${selectedCity.value?.name}');
  },
)

Dinamik Veri

DropdownSheet<SheetModel>(
  title: 'İlçeler',
  dynamicValues: () => fetchDistricts(),
  notifier: selectedDistrict,
  onChanged: () {
    print('Seçilen ilçe: \\${selectedDistrict.value?.name}');
  },
)

Parametreler

Parametre	Tip	Açıklama
title	String	Dropdown başlığı
values	List<dynamic>?	Seçenekler listesi
dynamicValues	List<dynamic>? Function()?	Dinamik veri fonksiyonu
notifier	ValueNotifier	Seçili değeri tutar
onChanged	Function?	Seçim değişince çağrılır
isMultiSelect	bool	Çoklu seçim
showSearch	bool	Arama kutusu
isLoading	bool	Yükleniyor durumu
loadingNotifier	ValueNotifier<bool>?	Yükleniyor notifier
...	...	Daha fazla parametre için kodu inceleyin

SheetModel

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

Gelişmiş Kullanım

showModalBottomSheet(
  context: context,
  builder: (context) => SelectionBottomSheet(
    title: 'Bir ülke seçin',
    values: countries,
    showSearch: true,
    onChanged: (selected) {
      print('Seçilen: \\${selected.name}');
      Navigator.pop(context);
    },
  ),
);