app_dropdown_picker 0.1.1

A feature-rich dropdown picker with local search, remote API support, pagination, and customizable UI.

App Dropdown Picker

A feature-rich Flutter dropdown picker with local search, remote API support, pagination, and customizable UI.

Features

• ✅ Local items list
• ✅ Remote API data loading with search & pagination
• ✅ Searchable with debounce
• ✅ Smart overlay positioning (opens upward if space is limited below)
• ✅ Scroll-to-selected-item on open
• ✅ Fully customizable colors and labels
• ✅ Generic type support <T> for any data model

Usage

Basic (local items)

AppDropdownPicker<String>(
  title: 'Pilih Kota',
  fieldHint: 'Pilih kota',
  items: [
    AppPickerItem(value: '1', label: 'Jakarta'),
    AppPickerItem(value: '2', label: 'Bandung'),
    AppPickerItem(value: '3', label: 'Surabaya'),
  ],
  selectedValue: selectedCity,
  onItemSelected: (item) {
    // item?.value, item?.label, item?.data
  },
)

With Remote API

AppDropdownPicker<MyModel>(
  title: 'Pilih User',
  fieldHint: 'Cari user...',
  enableSearch: true,
  searchHint: 'Cari nama...',
  dataUrl: '/api/users',
  baseUrl: 'https://example.com', // optional, if dataUrl is relative
  dio: myDioInstance, // optional, defaults to Dio()
  itemFromJson: MyModel.fromJson,
  itemValue: (m) => m.id.toString(),
  itemLabel: (m) => m.name,
  onItemSelected: (item) {
    // item?.data is MyModel
  },
)

With Pagination

AppDropdownPicker<MyModel>(
  ...
  enableRemotePagination: true,
  remotePageSize: 10,
  dataSelector: (data) => data['items'] as List,
)

Customization

AppDropdownPicker<String>(
  ...
  // Labels
  clearLabel: 'Hapus',
  retryLabel: 'Muat ulang',
  noDataLabel: 'Data kosong',
  allLoadedLabel: 'Semua data termuat',
  // Colors
  primaryColor: Colors.blue,
  backgroundColor: Colors.white,
  borderColor: Colors.grey.shade300,
  errorColor: Colors.red,
)

API

AppDropdownPicker Parameters

Parameter	Type	Default	Description
title	String	required	Dropdown title
items	List<AppPickerItem<T>>	[]	Local items list
selectedValue	String?	null	Currently selected value
onItemSelected	ValueChanged<AppPickerItem<T>?>	required	Selection callback
enableSearch	bool	false	Show search field
dataUrl	String?	null	Remote API endpoint
baseUrl	String?	null	Base URL for relative dataUrl
dio	Dio?	null	Dio instance for API calls
enableRemotePagination	bool	false	Enable pagination
remotePageSize	int	5	Items per page
clearLabel	String	'Clear'	Clear button text
retryLabel	String	'Coba lagi'	Retry button text
noDataLabel	String	'Tidak ada data'	Empty state text
allLoadedLabel	String	'Semua data sudah dimuat'	Pagination end text

Color Parameters

All colors default to Theme.of(context).colorScheme values, so the dropdown adapts to your app's theme automatically.

Parameter	Default	Description
backgroundColor	Colors.white	Dropdown panel background
borderColor	cs.outline	Inactive border color
activeBorderColor	cs.primary	Active/focused border color
labelColor	cs.onSurface	Text color
hintColor	cs.onSurfaceVariant	Placeholder/hint text color
selectedColor	cs.primary	Selected item text color
selectedBgColor	cs.primaryContainer	Selected item background
checkColor	cs.primary	Checkmark icon color
headerColor	cs.primary	Header title color
clearButtonColor	cs.onSurfaceVariant	Clear button text color
errorColor	cs.error	Error message color
disabledColor	cs.outlineVariant	Disabled item background
searchBgColor	cs.surfaceContainerHighest	Search field background
searchIconColor	cs.onSurfaceVariant	Search icon color
primaryColor	cs.primary	Primary accent (arrow icon, refresh)
shadowColor	Colors.black(15%)	Dropdown panel shadow
dividerColor	Theme.dividerColor	Divider lines between sections

See the full parameter list in the API docs.