custom_searchable_dropdown 2.0.1
custom_searchable_dropdown: ^2.0.1 copied to clipboard

A FLutter Package by devNation shaizeeabbas.sa@gmail.com.

custom_searchable_dropdown #

Widget allows user to search from a dynamic list of data you can customise the dropdown according to your need,it can also be customised as multiple select or single select. The on change event reurn the complete list from index which option is selected.

Platforms #

This widget has been successfully tested on iOS, Android and Chrome.

Examples #

The Example will help you to know how it works.

See code below.

Example nameImage
Menu ModeMenu Mode
All DropDownAll DropDown
MultiSelect DropDownMultiSelect DropDown

Code #

Plugin usage

Add to your pubspec.yaml in the dependencies section:

  custom_searchable_dropdown:

Get packages with command:

flutter packages get

Import:

import 'package:custom_searchable_dropdown/custom_searchable_dropdown.dart';
    CustomSearchableDropDown(
                      primaryColor: Colors.red,
                      menuMode: true,
                      labelStyle: TextStyle(
                        color: Colors.red,
                        fontWeight: FontWeight.bold
                      ),
                      items: listToSearch,
                      label: 'Select Name',
                      prefixIcon:  Padding(
                        padding: const EdgeInsets.all(0.0),
                        child: Icon(Icons.search),
                      ),
                      dropDownMenuItems: listToSearch?.map((item) {
                        return item['name'];
                      })?.toList() ??
                          [],
                      onChanged: (value){
                        if(value!=null)
                        {
                          selected = value['class'].toString();
                        }
                        else{
                          selected=null;
                        }
                      },
                    ),

Single Select

     CustomSearchableDropDown(
                     items: listToSearch,
                     label: 'Select Name',
                     decoration: BoxDecoration(
                         border: Border.all(
                             color: Colors.blue
                         )
                     ),
                     prefixIcon:  Padding(
                       padding: const EdgeInsets.all(0.0),
                       child: Icon(Icons.search),
                     ),
                     dropDownMenuItems: listToSearch?.map((item) {
                       return item['name'];
                     })?.toList() ??
                         [],
                     onChanged: (value){
                       if(value!=null)
                       {
                         selected = value['class'].toString();
                       }
                       else{
                         selected=null;
                       }
                     },
                   ),

Multi Select

      CustomSearchableDropDown(
                      items: listToSearch,
                      label: 'Select Name',
                      multiSelectTag: 'Names',
                      decoration: BoxDecoration(
                          border: Border.all(
                              color: Colors.blue
                          )
                      ),
                      multiSelect: true,
                      prefixIcon:  Padding(
                        padding: const EdgeInsets.all(0.0),
                        child: Icon(Icons.search),
                      ),
                      dropDownMenuItems: listToSearch?.map((item) {
                        return item['name'];
                      })?.toList() ??
                          [],
                      onChanged: (value){
                        if(value!=null)
                        {
                          selectedList = jsonDecode(value);
                        }
                        else{
                          selectedList.clear();
                        }
                      },
                    ),

Multi Select as Widget

      CustomSearchableDropDown(
                      items: listToSearch,
                      label: 'Select Name',
                      multiSelectTag: 'Names',
                      multiSelectValuesAsWidget: true,
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.blue
                        )
                      ),
                      multiSelect: true,
                      prefixIcon:  Padding(
                        padding: const EdgeInsets.all(0.0),
                        child: Icon(Icons.search),
                      ),
                      dropDownMenuItems: listToSearch?.map((item) {
                        return item['name'];
                      })?.toList() ??
                          [],
                      onChanged: (value){
                        if(value!=null)
                        {
                          selectedList = jsonDecode(value);
                        }
                        else{
                          selectedList.clear();
                        }
                      },
                    ),
14
likes
80
pub points
75%
popularity

Publisher

Unknown

A FLutter Package by devNation shaizeeabbas.sa@gmail.com.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on custom_searchable_dropdown