fluid_dropdown_input 1.1.6
fluid_dropdown_input: ^1.1.6 copied to clipboard
Dropdown for Flutter with search, dynamic positioning and customizable UI. Robust on small phones (search opens in a scrollable bottom sheet).
Fluid Dropdown Input #
An advanced dropdown input widget for Flutter, designed to be robust, customizable, and easy to use. It includes key features like built-in search and dynamic positioning to fit anywhere in your UI.
Demo #
[Fluid Dropdown Input demo]
Repository: https://github.com/fmonclus/fluid_dropdown_input
Features #
- Built-in Search: Allows users to easily filter long lists.
- Dynamic Positioning: The popup automatically opens up or down to avoid rendering off-screen.
- Precise Sizing: The popup size is calculated accurately for a perfect fit without empty gaps.
- Highly Customizable: Control the height, number of visible items, styling, and more.
- Robust State Management: Efficiently handles its lifecycle and state updates.
- Custom Scrollbar: Includes a minimalist scrollbar for a better user experience.
Installation #
Add this dependency to your pubspec.yaml
file:
dependencies:
fluid_dropdown_input: ^1.0.0
Then, run flutter pub get
.
Basic Usage #
Here is a simple example of how to use the widget.
import 'package:flutter/material.dart';
import 'package:fluid_dropdown_input/fluid_dropdown_input.dart';
class MyScreen extends StatefulWidget {
const MyScreen({super.key});
@override
State<MyScreen> createState() => _MyScreenState();
}
class _MyScreenState extends State<MyScreen> {
final List<DropdownItem> _items = const [
DropdownItem(id: 1, label: 'Apple'),
DropdownItem(id: 2, label: 'Banana'),
DropdownItem(id: 3, label: 'Orange'),
DropdownItem(id: 4, label: 'Strawberry'),
];
int? _selectedId;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Dropdown Example')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: FluidDropdownInput(
items: _items,
valueId: _selectedId,
onChanged: (item) {
setState(() {
_selectedId = item?.id;
});
print('Selected item: ${item?.label}');
},
placeholder: 'Select a fruit...',
searchEnabled: true,
),
),
);
}
}
Properties #
Property | Type | Description |
---|---|---|
items |
List<DropdownItem> |
(Required) The list of items to display. |
onChanged |
ValueChanged<DropdownItem?> |
(Required) Callback executed when an item is selected or cleared. |
valueId |
int? |
The id of the currently selected item. |
placeholder |
String |
The text to display when nothing is selected. |
searchEnabled |
bool |
Enables the search field inside the popup. |
autoSelectOnUnique |
bool |
Automatically selects an item if the search results in a single match. |
overlayMaxHeight |
double |
The maximum height in pixels for the overlay popup. |
itemHeight |
double |
The height of each item in the list. |
maxVisibleItems |
int? |
The maximum number of visible rows in the list. |
decoration |
InputDecoration? |
Allows for custom styling of the input field. |
contentPadding |
EdgeInsets? |
The inner padding of the text field. |
Internationalization (i18n) #
Set languageCode
to 'es'
, 'en'
, or 'pt'
to localize the built-in texts (placeholder, search hint, clear tooltip).
FluidDropdownInput(
items: const [
DropdownItem(id: 1, label: 'Rojo'),
DropdownItem(id: 2, label: 'Verde'),
],
onChanged: print,
searchEnabled: true,
languageCode: 'es', // or 'en' / 'pt'
);