searchable_dropdown_plus 0.0.1
searchable_dropdown_plus: ^0.0.1 copied to clipboard
A customizable searchable dropdown widget for Flutter with prefix/suffix icons and label.
searchable_dropdown_plus #
A customizable, responsive searchable dropdown widget for Flutter. Supports prefix/suffix icons, labels, styling, and easy item selection with a searchable interface.
β¨ Features #
- Searchable dropdown menu
- Supports prefix and suffix icons
- Easily customizable with label, hint, styles
- Responsive design using
responsive_sizer - Lightweight and easy to integrate
π¦ Installation #
Add this to your pubspec.yaml:
dependencies:
searchable_dropdown_plus:
Or directly add the package using:
flutter pub add searchable_dropdown_plus
Then run:
flutter pub get
π§ Usage
import 'package:flutter/material.dart';
import 'package:responsive_sizer/responsive_sizer.dart';
import 'package:searchable_dropdown_plus/searchable_dropdown_plus.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ResponsiveSizer(
builder: (context, orientation, screenType) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Searchable Dropdown")),
body: Padding(
padding: EdgeInsets.all(5.w),
child: CustomSearchableDropdown(
label: "Select Item",
items: ["One", "Two", "Three"],
selectedItem: "One",
onChanged: (value) {
print("Selected: $value");
},
hint: "Choose an item...",
prefixIcon: Icon(Icons.list),
suffixIcon: Icon(Icons.arrow_drop_down),
inputTextStyle: TextStyle(fontSize: 17.sp),
),
),
),
);
},
);
}
}
π§© Constructor Parameters
| Property | Type | Description |
|---|---|---|
label |
String? |
Label shown above the field (optional) |
items |
List<String> |
List of options |
selectedItem |
String? |
Currently selected item |
onChanged |
Function(String?) |
Callback when selection changes |
hint |
String? |
Hint text inside the input |
prefixIcon |
Widget? |
Optional icon before the input |
suffixIcon |
Widget? |
Optional icon after the input |
inputTextStyle |
TextStyle? |
Style of the input text |
π± Responsive Design
This widget uses responsive_sizer to ensure proper scaling across device sizes.
Make sure to wrap your MaterialApp with ResponsiveSizer as shown in the example.
π‘ License MIT License. Feel free to use, modify, and distribute this package.
π¨βπ» Contributions Contributions are welcome. Feel free to open issues or submit PRs!
π§βπ» Author #
Made with β€οΈ by [mashood]
GitHub: [https://github.com/mashoodpangat/]