fancy_search_dropdown

Description:

fancy search dropdown

Output #

# Fancy Search Dropdown

The `fancy_search_dropdown` package is a customizable Flutter widget that provides an elegant and efficient way to display a dropdown menu with search functionality. This widget is designed to enhance the user experience by offering dynamic suggestions as the user types, making it easy to search and select options from a predefined list.

## Features

- **Customizable Suggestions**: Provide a list of suggestions to be shown in the dropdown.
- **Configurable Styles**: Customize the appearance of the dropdown with `FancySearchDropdownConfig`.
- **Debug Mode**: Option to enable or disable debug mode.

## Installation

Add the following dependency to your `pubspec.yaml` file:

```yaml
dependencies:
fancy_search_dropdown: ^0.0.1
```
copied to clipboard
Run flutter pub get to install the package.
Usage #
To use FancySearchDropdown, follow these steps:


Import the Package:
import 'package:fancy_search_dropdown/fancy_search_dropdown.dart';
copied to clipboard


Example Usage:
Here’s a basic example of how to use FancySearchDropdown in a Flutter app:
import 'dart:developer';
import 'package:fancy_search_dropdown/fancy_search_dropdown.dart';
import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Fancy Search Dropdown"),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: FancySearchDropdown(
labelText: "Select Hospital Name",
suggestions: const [
"Family Doctor",
"Preferred Doctor",
"Preferred Hospital",
"Care Taker",
"Pharmacy",
"Lab",
],
selectedValue: "Lab",
maxSuggestionHeight: 300,
debugMode: false,
// Uncomment and customize the configuration as needed:
// config: FancySearchDropdownConfig(
// optionBoxElevation: 3,
// inActiveSuffix: Icon(Icons.password),
// activeSuffix: Icon(Icons.email),
// borderRadius: 8,
// optionTextStyle: TextStyle(color: Colors.red),
// labelTextStyle: TextStyle(color: Colors.black),
// activeLeading: Icon(Icons.person),
// tileBuilder:(context,index,suggestion)=>ListTile(leading:Text(suggestion)),
// inputDecoration: InputDecoration(
// focusedBorder: OutlineInputBorder(),
// border: OutlineInputBorder(),
// enabledBorder: OutlineInputBorder(),
// ),
// ),
onSelected: (value) {
log("Selected value: $value");
},
),
),
);
}
}
copied to clipboard


Parameters #

suggestions: A list of suggestions to be displayed in the dropdown.
onSelected: Callback function triggered when a suggestion is selected.
labelText: The label text to be displayed in the TextField.
selectedValue: The initially selected value.
maxSuggestionHeight: Maximum height of the suggestion list.
config: Configuration options for styling the dropdown.
debugMode: Boolean to enable or disable debug mode. Set to false for production.

Configuration #
FancySearchDropdownConfig allows you to customize the appearance of the dropdown. For example:
FancySearchDropdownConfig(
inputDecoration: InputDecoration(
border: OutlineInputBorder(),
suffixIcon: Icon(Icons.arrow_drop_down),
),
labelTextStyle: TextStyle(color: Colors.blue),
activeSuffix: Icon(Icons.arrow_drop_up),
inActiveSuffix: Icon(Icons.arrow_drop_down),
activeLeading: Icon(Icons.search),
inActiveLeading: Icon(Icons.search_off),
)
copied to clipboard
Contributing #
Feel free to open issues or pull requests if you have suggestions or improvements.
License #
This package is licensed under the MIT License. See the LICENSE file for more details.
Author #
Kripa Nand Kumar Sah - [email protected]