Flutter Simple and Robust DropdownSearch with Item Search Feature

Flutter DropdownSearch 
Flutter simple and robust DropdownSearch with item search feature, making it possible to use an offline item list or filtering URL for easy customization.

Key FeaturesExamplesLicense

Dropdown search

Key Features

  • Sync and/or Async items (online, offline, DB, ...)
  • Searchable dropdown
  • Three dropdown mode: Menu/ BottomSheet/ Dialog
  • Single & multi selection
  • Material dropdown
  • Easy customizable UI
  • Handle Light and Dark theme
  • Easy implementation into statelessWidget

packages.yaml

dropdown_search: <lastest version>

Import

import 'package:dropdown_search/dropdown_search.dart';

Simple implementation

DropdownSearch<String>(
    mode: Mode.MENU,
    showSelectedItem: true,
    items: ["Brazil", "Italia (Disabled)", "Tunisia", 'Canada'],
    label: "Menu mode",
    hint: "country in menu mode",
    popupItemDisabled: (String s) => s.startsWith('I'),
    onChanged: print,
    selectedItem: "Brazil"),
    
    
DropdownSearch<String>.multiSelection(
    mode: Mode.MENU,
    showSelectedItem: true,
    items: ["Brazil", "Italia (Disabled)", "Tunisia", 'Canada'],
    label: "Menu mode",
    hint: "country in menu mode",
    popupItemDisabled: (String s) => s.startsWith('I'),
    onChanged: print,
    selectedItems: ["Brazil"]),

customize showed field (itemAsString)

DropdownSearch<UserModel>(
  label: "Name",
  onFind: (String filter) => getData(filter),
  itemAsString: (UserModel u) => u.userAsStringByName(),
  onChanged: (UserModel data) => print(data),
),

DropdownSearch<UserModel>(
  label: "Name",
  onFind: (String filter) => getData(filter),
  itemAsString: (UserModel u) => u.userAsStringById(),
  onChanged: (UserModel data) => print(data),
),

customize Filter Function

DropdownSearch<UserModel>(
  label: "Name",
  filterFn: (user, filter) => user.userFilterByCreationDate(filter),
  onFind: (String filter) => getData(filter),
  itemAsString: (UserModel u) => u.userAsStringByName(),
  onChanged: (UserModel data) => print(data),
),

customize Search Mode

DropdownSearch<UserModel>(
  mode: Mode.BOTTOM_SHEET,
  label: "Name",
  onFind: (String filter) => getData(filter),
  itemAsString: (UserModel u) => u.userAsString(),
  onChanged: (UserModel data) => print(data),
),

Validation

DropdownSearch(
  items: ["Brazil", "France", "Tunisia", "Canada"],
  label: "Country",
  onChanged: print,
  selectedItem: "Tunisia",
  validator: (String item) {
    if (item == null)
      return "Required field";
    else if (item == "Brazil")
      return "Invalid item";
    else
      return null;
  },
);

Endpoint implementation (using Dio package)

DropdownSearch<UserModel>(
  label: "Name",
  onFind: (String filter) async {
    var response = await Dio().get(
        "http://5d85ccfb1e61af001471bf60.mockapi.io/user",
        queryParameters: {"filter": filter},
    );
    var models = UserModel.fromJsonList(response.data);
    return models;
  },
  onChanged: (UserModel data) {
    print(data);
  },
);

Layout customization

You can customize the layout of the DropdownSearch and its items. EXAMPLE

PropertiesDescription
labelDropDownSearch label
showSearchBoxshow/hide the search box
isFilteredOnlinetrue if the filter on items is applied onlie (via API)
showClearButtonshow/hide clear selected item
itemsoffline items list
selectedItemselected item
onFindfunction that returns item from API
onChangedcalled when a new item is selected
dropdownBuilderto customize list of items UI
popupItemBuilderto customize selected item
validatorfunction to apply the validation formula
searchBoxDecorationdecoration for the search box
popupBackgroundColorbackground color for the dialog/menu/bottomSheet
popupTitleCustom widget for the popup title
itemAsStringcustomize the fields the be shown
filterFncustom filter function
enabledenable/disable dropdownSearch
modeMENU / DIALOG/ BOTTOM_SHEET
maxHeightthe max height for dialog/bottomSheet/Menu
dialogMaxWidththe max width for the dialog
showSelectedItemmanage selected item visibility (if true, the selected item will be highlighted)
compareFnFunction(T item, T selectedItem), custom comparing function
dropdownSearchDecorationDropdownSearch input decoration
emptyBuildercustom layout for empty results
loadingBuildercustom layout for loading items
errorBuildercustom layout for error
autoFocusSearchBoxthe search box will be focused if true
popupShapecustom shape for the popup
autoValidateModehandle auto validation mode
onSavedAn optional method to call with the final value when the form is saved via
validatorAn optional method that validates an input. Returns an error string to display if the input is invalid, or null otherwise.
clearButtoncustomize clear button widget
clearButtonSplashRadiuscustomize clear button splash radius
dropDownButtoncustomize dropdown button widget
dropDownButtonSplashRadiuscustomize dropdown button splash radius
dropdownBuilderSupportsNullItemIf true, the dropdownBuilder will continue the uses of material behavior. This will be useful if you want to handle a custom UI only if the item !=null
popupItemDisableddefines if an item of the popup is enabled or not, if the item is disabled, it cannot be clicked
popupBarrierColorset a custom color for the popup barrier
searchBoxControllersearch box controller
clearButtonBuildercustom clear button builder
dropdownButtonBuildercustom dropdown button builder
onBeforeChangecallback executed before applying value change
searchDelaydelay before searching
popupSafeAreaset properties of popup safe area
scrollbarPropsscrollbar properties
popupBarrierDismissiblewhether modal can be dismissed by tapping the modal barrier

Attention

To use a template as an item type, and you don't want to use a custom function itemAsString and compareFn you need to implement toString, equals and hashcode, as shown below:

class UserModel {
  final String id;
  final DateTime createdAt;
  final String name;
  final String avatar;

  UserModel({this.id, this.createdAt, this.name, this.avatar});

  factory UserModel.fromJson(Map<String, dynamic> json) {
    if (json == null) return null;
    return UserModel(
      id: json["id"],
      createdAt:
          json["createdAt"] == null ? null : DateTime.parse(json["createdAt"]),
      name: json["name"],
      avatar: json["avatar"],
    );
  }

  static List<UserModel> fromJsonList(List list) {
    if (list == null) return null;
    return list.map((item) => UserModel.fromJson(item)).toList();
  }

  ///this method will prevent the override of toString
  String userAsString() {
    return '#${this.id} ${this.name}';
  }

  ///this method will prevent the override of toString
  bool userFilterByCreationDate(String filter) {
    return this?.createdAt?.toString()?.contains(filter);
  }

  ///custom comparing function to check if two users are equal
  bool isEqual(UserModel model) {
    return this?.id == model?.id;
  }

  @override
  String toString() => name;
}

View more Examples

Support

If this plugin was useful to you, helped you to deliver your app, saved you a lot of time, or you just want to support the project, I would be very grateful if you buy me a cup of coffee.

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add dropdown_search

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  dropdown_search: ^1.0.0

Alternatively, your editor might support or flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:dropdown_search/dropdown_search.dart'; 

example/lib/main.dart

import 'package:dio/dio.dart';
import 'package:dropdown_search/dropdown_search.dart';
import 'package:flutter/material.dart';

import 'user_model.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'dropdownSearch Demo',
      //enable this line if you want test Dark Mode
      //theme: ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();
  final _openDropDownProgKey = GlobalKey<DropdownSearchState<String>>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("DropdownSearch Demo")),
      body: Padding(
        padding: const EdgeInsets.all(25),
        child: Form(
          key: _formKey,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          child: ListView(
            padding: EdgeInsets.all(4),
            children: <Widget>[
              ///Menu Mode with no searchBox MultiSelection
              DropdownSearch<String>.multiSelection(
                validator: (List<String>? v) {
                  return v == null || v.isEmpty ? "required field" : null;
                },
                hint: "Select a country",
                mode: Mode.MENU,
                showSelectedItems: false,
                items: ["Brazil", "Italia (Disabled)", "Tunisia", 'Canada'],
                label: "Menu mode multiSelection*",
                showClearButton: true,
                onChange: print,
                popupSelectionWidget: (cnt, String item, bool isSelected) {
                  return isSelected
                      ? Icon(
                          Icons.check_circle,
                          color: Colors.green[500],
                        )
                      : Container();
                },
                popupItemDisabled: (String s) => s.startsWith('I'),
                clearButtonSplashRadius: 20,
                selectedItems: ["Tunisia"],
              ),
              Divider(),

              ///Menu Mode with no searchBox
              DropdownSearch<String>(
                validator: (v) => v == null ? "required field" : null,
                hint: "Select a country",
                mode: Mode.MENU,
                showSelectedItems: true,
                items: ["Brazil", "Italia (Disabled)", "Tunisia", 'Canada'],
                label: "Menu mode *",
                showClearButton: true,
                onChanged: print,
                popupItemDisabled: (String? s) => s?.startsWith('I') ?? false,
                clearButtonSplashRadius: 20,
                selectedItem: "Tunisia",
                onBeforeChange: (a, b) {
                  if (b == null) {
                    AlertDialog alert = AlertDialog(
                      title: Text("Are you sure..."),
                      content: Text("...you want to clear the selection"),
                      actions: [
                        TextButton(
                          child: Text("OK"),
                          onPressed: () {
                            Navigator.of(context).pop(true);
                          },
                        ),
                        TextButton(
                          child: Text("NOT OK"),
                          onPressed: () {
                            Navigator.of(context).pop(false);
                          },
                        ),
                      ],
                    );

                    return showDialog<bool>(
                        context: context,
                        builder: (BuildContext context) {
                          return alert;
                        });
                  }

                  return Future.value(true);
                },
              ),
              Divider(),

              ///Menu Mode with overriden icon and dropdown buttons
              Row(
                children: [
                  Expanded(
                    flex: 2,
                    child: DropdownSearch<String>(
                      validator: (v) => v == null ? "required field" : null,
                      hint: "Select a country",
                      mode: Mode.MENU,
                      dropdownSearchDecoration: InputDecoration(
                        filled: true,
                        border: UnderlineInputBorder(
                          borderSide: BorderSide(color: Color(0xFF01689A)),
                        ),
                      ),
                      showAsSuffixIcons: true,
                      clearButtonBuilder: (_) => Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: const Icon(
                          Icons.clear,
                          size: 24,
                          color: Colors.black,
                        ),
                      ),
                      dropdownButtonBuilder: (_) => Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: const Icon(
                          Icons.arrow_drop_down,
                          size: 24,
                          color: Colors.black,
                        ),
                      ),
                      showSelectedItems: true,
                      items: [
                        "Brazil",
                        "Italia (Disabled)",
                        "Tunisia",
                        'Canada'
                      ],
                      label: "Menu mode *",
                      showClearButton: true,
                      onChanged: print,
                      popupItemDisabled: (String? s) =>
                          s?.startsWith('I') ?? true,
                      selectedItem: "Tunisia",
                    ),
                  ),
                  Expanded(
                      child: TextField(
                    decoration: InputDecoration(
                      filled: true,
                      labelText: "Menu mode *",
                      border: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF01689A)),
                      ),
                    ),
                  ))
                ],
              ),
              Divider(),
              DropdownSearch<UserModel>.multiSelection(
                searchFieldProps: TextFieldProps(
                  controller: TextEditingController(text: 'Mrs'),
                ),
                mode: Mode.BOTTOM_SHEET,
                maxHeight: 700,
                isFilteredOnline: true,
                showClearButton: true,
                showSelectedItems: true,
                compareFn: (item, selectedItem) => item?.id == selectedItem?.id,
                showSearchBox: true,
                label: 'User *',
                dropdownSearchDecoration: InputDecoration(
                  filled: true,
                  fillColor: Theme.of(context).inputDecorationTheme.fillColor,
                ),
                autoValidateMode: AutovalidateMode.onUserInteraction,
                validator: (u) =>
                    u == null || u.isEmpty ? "user field is required " : null,
                onFind: (String? filter) => getData(filter),
                onChange: (data) {
                  print(data);
                },
                dropdownBuilder: _customDropDownExampleMultiSelection,
                popupItemBuilder: _customPopupItemBuilderExample,
                popupSafeArea: PopupSafeArea(top: true, bottom: true),
                scrollbarProps: ScrollbarProps(
                  isAlwaysShown: true,
                  thickness: 7,
                ),
              ),
              Divider(),

              ///custom itemBuilder and dropDownBuilder
              DropdownSearch<UserModel>(
                showSelectedItems: true,
                compareFn: (i, s) => i?.isEqual(s) ?? false,
                label: "Person",
                onFind: (String? filter) => getData(filter),
                onChanged: (data) {
                  print(data);
                },
                dropdownBuilder: _customDropDownExample,
                popupItemBuilder: _customPopupItemBuilderExample2,
              ),
              Divider(),

              ///BottomSheet Mode with no searchBox
              DropdownSearch<String>(
                mode: Mode.BOTTOM_SHEET,
                items: [
                  "Brazil",
                  "Italia",
                  "Tunisia",
                  'Canada',
                  'Zraoua',
                  'France',
                  'Belgique'
                ],
                label: "Custom BottomShet mode",
                onChanged: print,
                selectedItem: "Brazil",
                showSearchBox: true,
                searchFieldProps: TextFieldProps(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    contentPadding: EdgeInsets.fromLTRB(12, 12, 8, 0),
                    labelText: "Search a country1",
                  ),
                ),
                popupTitle: Container(
                  height: 50,
                  decoration: BoxDecoration(
                    color: Theme.of(context).primaryColorDark,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20),
                    ),
                  ),
                  child: Center(
                    child: Text(
                      'Country',
                      style: TextStyle(
                        fontSize: 24,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
                popupShape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(24),
                    topRight: Radius.circular(24),
                  ),
                ),
              ),
              Divider(),

              ///show favorites on top list
              DropdownSearch<UserModel>(
                showSelectedItems: true,
                showSearchBox: true,
                compareFn: (i, s) => i?.isEqual(s) ?? false,
                label: "Person with favorite option",
                onFind: (filter) => getData(filter),
                onChanged: (data) {
                  print(data);
                },
                dropdownBuilder: _customDropDownExample,
                popupItemBuilder: _customPopupItemBuilderExample2,
                showFavoriteItems: true,
                favoriteItemsAlignment: MainAxisAlignment.start,
                favoriteItems: (items) {
                  return items.where((e) => e.name.contains("Mrs")).toList();
                },
                favoriteItemBuilder: (context, item) {
                  return Container(
                    padding: EdgeInsets.symmetric(horizontal: 8, vertical: 6),
                    decoration: BoxDecoration(
                        border: Border.all(color: Colors.grey),
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.grey[100]),
                    child: Text(
                      "${item.name}",
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.indigo),
                    ),
                  );
                },
              ),
              Divider(),

              ///merge online and offline data in the same list and set custom max Height
              DropdownSearch<UserModel>(
                items: [
                  UserModel(name: "Offline name1", id: "999"),
                  UserModel(name: "Offline name2", id: "0101")
                ],
                maxHeight: 300,
                onFind: (String? filter) => getData(filter),
                label: "choose a user",
                onChanged: print,
                showSearchBox: true,
              ),
              Divider(),

              ///open dropdown programmatically
              DropdownSearch<String>(
                items: ["no action", "confirm in the next dropdown"],
                label: "open another dropdown programmatically",
                onChanged: (v) {
                  if (v == "confirm in the next dropdown") {
                    _openDropDownProgKey.currentState?.openDropDownSearch();
                  }
                },
              ),
              Padding(padding: EdgeInsets.all(4)),
              DropdownSearch<String>(
                key: _openDropDownProgKey,
                items: ["Yes", "No"],
                label: "confirm",
                showSelectedItems: true,
                dropdownButtonSplashRadius: 20,
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                mainAxisSize: MainAxisSize.min,
                children: [
                  ElevatedButton(
                      onPressed: () {
                        _openDropDownProgKey.currentState?.openDropDownSearch();
                      },
                      child: Text("Open dropdownSearch")),
                  ElevatedButton(
                      onPressed: () {
                        _openDropDownProgKey.currentState
                            ?.changeSelectedItem("No");
                      },
                      child: Text("set to 'NO'")),
                  Material(
                    child: ElevatedButton(
                        onPressed: () {
                          _openDropDownProgKey.currentState
                              ?.changeSelectedItem("Yes");
                        },
                        child: Text("set to 'YES'")),
                  ),
                  ElevatedButton(
                      onPressed: () {
                        _openDropDownProgKey.currentState
                            ?.changeSelectedItem("Blabla");
                      },
                      child: Text("set to 'Blabla'")),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget _customDropDownExampleMultiSelection(
      BuildContext context, List<UserModel?> selectedItems) {
    if (selectedItems.isEmpty) {
      return ListTile(
        contentPadding: EdgeInsets.all(0),
        leading: CircleAvatar(),
        title: Text("No item selected"),
      );
    }

    return Wrap(
      children: selectedItems.map((e) {
        return Padding(
          padding: const EdgeInsets.all(4.0),
          child: Container(
            child: ListTile(
              contentPadding: EdgeInsets.all(0),
              leading: CircleAvatar(
                  // this does not work - throws 404 error
                  // backgroundImage: NetworkImage(item.avatar ?? ''),
                  ),
              title: Text(e?.name ?? ''),
              subtitle: Text(
                e?.createdAt.toString() ?? '',
              ),
            ),
          ),
        );
      }).toList(),
    );
  }

  Widget _customDropDownExample(BuildContext context, UserModel? item) {
    if (item == null) {
      return Container();
    }

    return Container(
      child: (item.avatar == null)
          ? ListTile(
              contentPadding: EdgeInsets.all(0),
              leading: CircleAvatar(),
              title: Text("No item selected"),
            )
          : ListTile(
              contentPadding: EdgeInsets.all(0),
              leading: CircleAvatar(
                  // this does not work - throws 404 error
                  // backgroundImage: NetworkImage(item.avatar ?? ''),
                  ),
              title: Text(item.name),
              subtitle: Text(
                item.createdAt.toString(),
              ),
            ),
    );
  }

  Widget _customPopupItemBuilderExample(
      BuildContext context, UserModel? item, bool isSelected) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 8),
      decoration: !isSelected
          ? null
          : BoxDecoration(
              border: Border.all(color: Theme.of(context).primaryColor),
              borderRadius: BorderRadius.circular(5),
              color: Colors.white,
            ),
      child: ListTile(
        selected: isSelected,
        title: Text(item?.name ?? ''),
        subtitle: Text(item?.createdAt?.toString() ?? ''),
        leading: CircleAvatar(
            // this does not work - throws 404 error
            // backgroundImage: NetworkImage(item.avatar ?? ''),
            ),
      ),
    );
  }

  Widget _customPopupItemBuilderExample2(
      BuildContext context, UserModel? item, bool isSelected) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 8),
      decoration: !isSelected
          ? null
          : BoxDecoration(
              border: Border.all(color: Theme.of(context).primaryColor),
              borderRadius: BorderRadius.circular(5),
              color: Colors.white,
            ),
      child: ListTile(
        selected: isSelected,
        title: Text(item?.name ?? ''),
        subtitle: Text(item?.createdAt?.toString() ?? ''),
        leading: CircleAvatar(
            // this does not work - throws 404 error
            // backgroundImage: NetworkImage(item.avatar ?? ''),
            ),
      ),
    );
  }

  Future<List<UserModel>> getData(filter) async {
    var response = await Dio().get(
      "https://5d85ccfb1e61af001471bf60.mockapi.io/user",
      queryParameters: {"filter": filter},
    );

    final data = response.data;
    if (data != null) {
      return UserModel.fromJsonList(data);
    }

    return [];
  }
} 

Download Details:

Author: salim-lachdhaf

Source Code: https://github.com/salim-lachdhaf/searchable_dropdown

#flutter  #dropdown 

Flutter Simple and Robust DropdownSearch with Item Search Feature

Customizable Cool Dropdown UI

Cool drop down

Features

  • All customizable css(font, fontsize. color, icon, dropdown box decoration...)
  • Auto scroll to selected item position
  • dropdownBox is automatically placed. It's based on the position of the dropdown on the screen.(top/bottom)
  • Support triangle arrow
  • Support overflow ellipsis
  • "COOL"

Samples

Options map

Installing

command:

 $ flutter pub add cool_dropdown

pubspec.yaml:

dependencies:  cool_dropdown: ^(latest)

Usage

import 'package:cool_dropdown/cool_dropdown.dart';List dropdownItemList = [  {'label': 'apple', 'value': 'apple'}, // label is required and unique  {'label': 'banana', 'value': 'banana'},  {'label': 'grape', 'value': 'grape'},  {'label': 'pineapple', 'value': 'pineapple'},  {'label': 'grape fruit', 'value': 'grape fruit'},  {'label': 'kiwi', 'value': 'kiwi'},];CoolDropdown(              dropdownList: dropdownItemList,              onChange: (_) {},              defaultValue: dropdownItemList[3],              // placeholder: 'insert...',            )

Important options

 

import 'package:flutter_svg/flutter_svg.dart';          List dropdownItemList = [  {    'label': 'apple',    'value': 'apple',    'icon': Container(        // if you want to use icon, you have to declare key as 'icon'       key: UniqueKey(),       // you have to use UniqueKey()       height: 20,       width: 20,       child: SvgPicture.asset(          // I recommend to use this library, if you want to use svg extension         'assets/apple.svg',       ),     ),    'selectedIcon': Container(          // if you want to use different icon when user select item, you have to declare key as 'selectedIcon'      key: UniqueKey(),      width: 20,      height: 20,      child: SvgPicture.asset(        'assets/apple.svg',        color: Color(0xFF6FCC76),      ),    ),  }];

Dropdown options

dropdownBD = BoxDecoration(          color: Colors.white,          borderRadius: BorderRadius.circular(10),          boxShadow: [            BoxShadow(              color: Colors.grey.withOpacity(0.1),              spreadRadius: 1,              blurRadius: 10,              offset: Offset(0, 1),            ),          ],        );
dropdownTS = TextStyle(            fontSize: 20,            color: Colors.black,          );
dropdownPadding = const EdgeInsets.only(left: 10, right: 10);
dropdownAlign = Alignment.centerLeft;
placeholderTS = TextStyle(color: Colors.grey.withOpacity(0.7), fontSize: 20);

DropdownBox & triangle options

dropdownBoxBD = BoxDecoration(          borderRadius: BorderRadius.circular(10),          color: Colors.white,          boxShadow: [            BoxShadow(              color: Colors.grey.withOpacity(0.1),              spreadRadius: 1,              blurRadius: 10,              offset: Offset(0, 1),            ),          ],        );
dropdownBoxPadding = const EdgeInsets.only(left: 10, right: 10);
dropdownItemPadding = const EdgeInsets.only(left: 10, right: 10);
selectedItemBD = BoxDecoration(          color: Color(0XFFEFFAF0),          borderRadius: BorderRadius.circular(10),        );
selectedItemTS = TextStyle(color: Color(0xFF6FCC76), fontSize: 20);
selectedItemPadding = const EdgeInsets.only(left: 10, right: 10);
unselectedItemTS = TextStyle(            fontSize: 20,            color: Colors.black,          );

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add cool_dropdown

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:  cool_dropdown: ^1.1.0

Alternatively, your editor might support or flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:cool_dropdown/cool_dropdown.dart'; 

example/lib/main.dart

import 'package:flutter/material.dart';import 'package:cool_dropdown/cool_dropdown.dart';import 'package:flutter_svg/flutter_svg.dart';void main() {  runApp(MyApp());}class MyApp extends StatefulWidget {  @override  _MyAppState createState() => _MyAppState();}List dropdownItemList = [];List<String> pokemons = [  'pikachu',  'charmander',  'squirtle',  'bullbasaur',  'snorlax',  'mankey',  'psyduck',  'meowth'];List<String> fruits = [  'apple',  'banana',  'grapes',  'lemon',  'melon',  'orange',  'pineapple',  'strawberry',  'watermelon',];class _MyAppState extends State<MyApp> {  List<Map> pokemonsMap = [];  @override  void initState() {    for (var i = 0; i < pokemons.length; i++) {      pokemonsMap.add({        'label': '${pokemons[i]}',        'value': '${pokemons[i]}',        'icon': Container(          height: 25,          width: 25,          child: SvgPicture.asset(            'assets/${pokemons[i]}.svg',          ),        ),      });    }    for (var i = 0; i < fruits.length; i++) {      dropdownItemList.add(        {          'label': fruits[i] == 'melon' ? 'melon sugar high' : '${fruits[i]}',          // 'label': '${fruits[i]}',          'value': '${fruits[i]}',          'icon': Container(            key: UniqueKey(),            height: 20,            width: 20,            child: SvgPicture.asset(              'assets/${fruits[i]}.svg',            ),          ),          'selectedIcon': Container(            key: UniqueKey(),            width: 20,            height: 20,            child: SvgPicture.asset(              'assets/${fruits[i]}.svg',              color: Color(0xFF6FCC76),            ),          ),        },      );    }    super.initState();  }  @override  Widget build(BuildContext context) {    return MaterialApp(      debugShowCheckedModeBanner: false,      home: Scaffold(        appBar: AppBar(          backgroundColor: Color(0xFF6FCC76),          title: Text('Cool Drop Down'),        ),        body: ListView(          children: [            SizedBox(              height: 100,            ),            Center(              child: CoolDropdown(                dropdownList: dropdownItemList,                onChange: (selectedItem) {                  print(selectedItem);                },                // dropdownBoxBD: BoxDecoration(                //     color: Colors.white, border: Border.all(width: 20)),              ),            ),            SizedBox(              height: 200,            ),            Center(              child: CoolDropdown(                dropdownWidth: 70,                // dropdownIcon: Container(), // if you don't want to use Icon you can set empty Container                dropdownList: dropdownItemList,                isDropdownLabel: false,                onChange: (a) {},                dropdownItemReverse: true,                dropdownItemMainAxis: MainAxisAlignment.start,                dropdownMainAxis: MainAxisAlignment.start,                labelIconGap: 20,              ),            ),            SizedBox(              height: 200,            ),            Center(              child: CoolDropdown(                dropdownList: pokemonsMap,                dropdownItemPadding: EdgeInsets.zero,                onChange: (dropdownItem) {},                dropdownHeight: 50,                dropdownWidth: 50,                dropdownBoxWidth: 50,                dropdownBoxHeight: 200,                dropdownItemHeight: 30,                dropdownItemGap: 10,                dropdownIcon: Container(                  width: 25,                  height: 25,                  child: Container(                    width: 25,                    height: 25,                    child: SvgPicture.asset(                      'assets/pokeball.svg',                    ),                  ),                ),                dropdownIconLeftGap: 0,                dropdownPadding: EdgeInsets.zero,                dropdownIconRotation: true,                dropdownIconRotationValue: 1,                isDropdownBoxLabel: false,                isDropdownLabel: false,                isDropdownIconLabel: false,                dropdownBoxPadding: EdgeInsets.zero,                dropdownAlign: Alignment.center,                dropdownMainAxis: MainAxisAlignment.center,                dropdownItemMainAxis: MainAxisAlignment.center,                selectedItemBD: BoxDecoration(                    border: Border(                        left: BorderSide(                            color: Colors.black.withOpacity(0.7), width: 3))),                triangleWidth: 10,                triangleHeight: 10,                triangleAlign: 'center',                dropdownBoxAlign: 'center',                gap: 20,              ),            ),            SizedBox(              height: 400,            )          ],        ),      ),    );  }} 

Download Details:

Author: joo6077

Source Code: https://github.com/joo6077/cool_dropdown

#dart  #dropdown 

Customizable Cool Dropdown UI

Learn Angular : Fill Dropdown Dynamically | Reactive Forms

Learn Angular : Fill Dropdown Dynamically | Reactive Forms

In this angular tutorial, you’ll learn how to fill dropdowns dynamically. In this angular demo app, we are using three dropdowns, country, state and city. On load country dropdown will be populated. Then once user selects country, it’s corresponding states will be loaded in state dropdown and on state selection it’s corresponding city will be populated in city dropdown.

#dropdown #angular #multiselect #dynamic #reactiveforms

Learn Angular : Fill Dropdown Dynamically | Reactive Forms
Siphiwe  Harmse

Siphiwe Harmse

1628337120

How To Create a Multi-Column Dropdown Menu In WordPress?

In today’s video tutorial you’ll learn how to create a muti-column dropdown submenu in WordPress in a simple fast and easy way, without the needs of a plugin. In addition, we’ll see and understand the menu items’ hierarchical structure and how to change it.

I hope you guys enjoy this video, feel free to use the comments section below in the case that you have any questions and don’t forget to check out that Visualmodo website and subscribe to our channel for more web design and development training videos.

#wordpress #dropdown

How To Create a Multi-Column Dropdown Menu In WordPress?

Learn Angular : Disable Multi Select Dropdown

Learn Angular : Disable Multi Select Dropdown

In this video, you’ll see how to disable Angular Multi Select Dropdown (ng-multiselect-dropdown) using CSS. One of the previous videos, I had already shown how to disable the options of the multi select dropdown without disabling the whole dropdown.

#angular #multiselect #dropdown #learnangular #tutorials

Learn Angular : Disable Multi Select Dropdown

Multi Select Dropdown Angular

Multi Select Dropdown Angular

In this tutorial, you’ll learn how to use Multi Select Dropdown in Angular. We’ll be using ng-multiselect-dropdown package for displaying Multi Select Dropdown.

#angular #tutorials #multiselect #dropdown

Multi Select Dropdown Angular
Marisol  Kuhic

Marisol Kuhic

1627434000

Beginner's Flutter Dropdown Tutorial | Source in description

In this part of the tutorial we will see how to create a drop down in flutter app.

Source Code : http://www.androidcoding.in/2020/09/14/flutter-dropdown/

Visit my website :

http://androidcoding.in/

#flutter #dropdown

Beginner's Flutter Dropdown Tutorial | Source in description

Exploring Key Features of Blazor MultiSelect Dropdown

Syncfusion’s Blazor  MultiSelect Dropdown is a textbox component that allows a user to type or select multiple values from a list of predefined options. It works in both  Blazor Server and  WebAssembly (WASM) applications. You can bind the MultiSelect Dropdown to a data source using different modes like default, chip (box), delimiter, and check box.

A real-time example of using the MultiSelect Dropdown in an application is to select multiple email IDs for the To and CC fields.

This blog will explain the following key features of the Blazor MultiSelect Dropdown component along with code examples:

  • Data Binding
  • Filtering Data
  • Customize Appearance with Template
  • Check Box Mode
  • Grouping List Items

Data binding

The Blazor MultiSelect Dropdown component provides the following two methods to bind  data sources to it:

  • Local Data Binding
  • Remote Data Binding

Local data binding

For this approach, create the required model classes and data. Then, bind the data to the DataSource property of the Blazor MultiSelect Dropdown.

The following code example in the Razor file binds the local data to the Blazor MultiSelect Dropdown.

#blazor #web #dropdown #webassembly

Exploring Key Features of Blazor MultiSelect Dropdown
Milan  Reilly

Milan Reilly

1622826720

Easy Steps to Use Dropdown Tree with Organization Structures in ASP.NET MVC Applications

The Syncfusion ASP.NET MVC Dropdown Tree component is used to display and select data in hierarchical tree-like structure with a quick, readable UI.

In this blog, we are going to walk you through the steps to use the ASP.NET MVC Dropdown Tree component with an organization’s structure. Let’s say, for example, an accounts team wants to ensure the payslips of all employees before delivering them with a readable UI.

Initialize the Dropdown Tree

Before proceeding further, please go through the getting started UG documentation to render the Dropdown Tree component.

Add your Dropdown Tree component to the Index.cshtml file, as shown in the following code example.

@using (Html.BeginForm())
{
    <h1>Admin payslip application</h1>
    <table>
        <tr>
            <td>Select employee(s): </td>
            <td>
                <div id='container' style="margin: 10px auto; width:300px;">
                    @Html.EJS().DropDownTree("ddt").Placeholder("Select an employee").Render()
                </div>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>@Html.EJS().Button("btn").Content("Show").Render()</td>
        </tr>
    </table>
}

#syncfusion #dropdown #aspdotnet #aspdotnet mvc

Easy Steps to Use Dropdown Tree with Organization Structures in ASP.NET MVC Applications

Mahesh Lalwani

1619501887

How to Implement DropDown List In Flutter??

https://www.youtube.com/watch?v=mhMesuGkZxc

#flutter #flutterdev #flutterdevelopment #dropdown #flutterwidget #flutterdesign

How to Implement DropDown List In Flutter??

How To Create Dependent Dropdown In Laravel

In this example i will show you to how to create dependent dropdown list in laravel using ajax.

Many times we have requirments of get dynamic data or value on change of dependent dropdown in our websites or project, So, here i will show you how to get dynamic data or value using ajax in dropdown.

Here, we are using 2 tables state and city and when user will selected any state at that time in dependent dropdown automatically value has been change. So, follow below steps and get output of this example.

Read More : How To Create Dependent Dropdown In Laravel

https://websolutionstuff.com/post/how-to-create-dependent-dropdown-in-laravel

Thanks for reading!!

#laravel #dependent #dropdown #dynamic dropdown #jquery

How To Create Dependent Dropdown In Laravel
Robert look

Robert look

1605694066

Category Subcategory Dropdown in PHP MySQL Ajax With Example

Sometimes, you need to select a query in PHP so we create separate tables to display selected subcategories based on selected category dropdowns. But in this tutorial, we will use/learn only a single table use (category and subcategory in one table) for a PHP dynamic fetch data from database in dropdownlist in PHP.

Category Subcategory Dropdown In PHP MySQL Ajax With Example

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Dynamic Category Subcategory Dropdown in PHP MySQL Ajax - phpcodingstuff.com</title>
      <!-- Fonts -->
      <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
      <!-- Styles -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <style>
         html, body {
         background-color: #fff;
         color: #636b6f;
         font-family: 'Nunito', sans-serif;
         font-weight: 200;
         height: 100vh;
         margin: 0;
         }
         .full-height {
         height: 100vh;
         }
         .flex-center {
         align-items: center;
         display: flex;
         justify-content: center;
         }
         .position-ref {
         position: relative;
         }
         .top-right {
         position: absolute;
         right: 10px;
         top: 18px;
         }
         .content {
         text-align: center;
         }
         .title {
         font-size: 84px;
         }
         .links > a {
         color: #636b6f;
         padding: 0 25px;
         font-size: 13px;
         font-weight: 600;
         letter-spacing: .1rem;
         text-decoration: none;
         text-transform: uppercase;
         }
         .m-b-md {
         margin-bottom: 30px;
         }
      </style>
   </head>
   <body>
      <div class="container mt-5">
         <div class="row justify-content-center">
            <div class="col-md-8">
               <div class="card">
                  <div class="card-header">
                     <h2 class="text-primary">Category Subcategory Dropdown in PHP MySQL Ajax - phpcodingstuff.com</h2>
                  </div>
                  <div class="card-body">
                     <form>
                        <div class="form-group">
                           <label for="CATEGORY-DROPDOWN">Category</label>
                           <select class="form-control" id="category-dropdown">
                              <option value="">Select Category</option>
                              <?php
                                 require_once "db.php";
                                 $result = mysqli_query($conn,"SELECT * FROM categories where parent_id = 0");
                                 while($row = mysqli_fetch_array($result)) {
                                 ?>
                              <option value="<?php echo $row['id'];?>"><?php echo $row["category"];?></option>
                              <?php
                                 }
                                 ?>
                           </select>
                        </div>
                        <div class="form-group">
                           <label for="SUBCATEGORY">Sub Category</label>
                           <select class="form-control" id="sub-category-dropdown">
                           </select>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <script>
         $(document).ready(function() {
    $('#category-dropdown').on('change', function() {
        var category_id = this.value;
        $.ajax({
            url: "fetch-subcategory-by-category.php",
            type: "POST",
            data: {
                category_id: category_id
            },
            cache: false,
            success: function(result) {
                $("#sub-category-dropdown").html(result);
            }
        });
    });
});
      </script>
   </body>
</html>

#web-development #developer #dropdown

Category Subcategory Dropdown in PHP MySQL Ajax With Example

Vue Dual Listbox MultiSelect Dropdown Component

vue-listbox-multiselect

Vue Dual list-box multi-select drop-down component for enterprise applications.

Motivation

There are several good multi-select components available for Vue. However, none are suitable for enterprise app development. In a typical enterprise app, you are often challenged offering a simple drop-down which allows the user to filter through thousands of categorized items from the server, and allows the user to select hundreds. At Banner Edge Media, we have been using a similar component for multiple years. As we migrate to Vue, we wanted to share this component with the Vue community, and together make it even better.

Setup

Install:

# NPM
npm install @banneredge/vue-listbox-multiselect

Usage:

<script lang="ts">
import Vue from 'vue';
import VueListboxMultiselect from '@banneredge/vue-listbox-multiselect';
import dataSet from './usCities';

export default Vue.extend({
  name: 'ServeDev',
  components: {
    VueListboxMultiselect
  },
  data() {
    return {
      selectedList: [] as any[],
    };
  },
  methods: {
    async search(query: string): Promise<any[]> {
      const ids = this.selectedList.map((x) => x.id);
      let subset = dataSet.filter((x) => !ids.includes(`${x.state}-${x.city}`));

      if (!query) {
        subset = subset.slice(0, 100);
      } else {
        const q = query.toLowerCase();
        subset = subset.filter((x) => x.city.toLowerCase().includes(q) || x.state.toLowerCase().includes(q));
        subset = subset.slice(0, 100);
      }

      return subset.map((x: any) => {
        return {
          id: `${x.state}-${x.city}`,
          value: x.city,
          group: x.state
        }
      });
    },
  },
});
</script>

<template>
  <v-app id="app">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
    <vue-listbox-multiselect
        v-model="selectedList"
        :search-function="search"
        placeholder="Search Items"
        style="width: 300px; margin: 20px auto"
        size="medium"
        :hide-search="false"
    />
  </v-app>
</template>

#select #dropdown #vue #programming

Vue Dual Listbox MultiSelect Dropdown Component
Sofiaml Boo

Sofiaml Boo

1594803840

How to Create Custom Select Box in HTML using CSS and jQuery

In this tutorial, we will customize the select boxes so that it will appear consistent across the browser with the help of CSS and some sort of jQuery.

Download The File:

https://drive.google.com/file/d/1fTFl…

#html #css #jquery #dropdown

How to Create Custom Select Box in HTML using CSS and jQuery