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/

Libraries

searchable_dropdown_plus