Giter VIP home page Giter VIP logo

mindinventory / drop_down_list Goto Github PK

View Code? Open in Web Editor NEW
69.0 4.0 30.0 15.67 MB

Highly versatile Widget to search through a single or multiple choices from bottom sheet list in a dialog box or a menu.

Home Page: https://www.mindinventory.com/flutter-app-development.php

License: MIT License

Kotlin 0.47% Swift 4.37% Dart 80.51% HTML 14.52% Objective-C 0.14%
flutter-drop-down flutter-drop-down-ui

drop_down_list's Introduction

Dropdown List Choices

Highly versatile Widget to search through a single or multiple choices from bottom sheet list in a dialog box or a menu.

Platforms

This plugin has been successfully tested on iOS, Android & web.

Examples

The following examples are extracted from the example project available in the repository. More examples are available in this project.

Samples of Dropdown list with choices

Dropdown Multiple Selection

drop-down-list

Dropdown Single Selection

drop-down-list

How to Use

DropDownState(
      DropDown(
        bottomSheetTitle: const Text(
          kCities,
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 20.0,
          ),
        ),
        submitButtonChild: const Text(
          'Done',
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
        data: widget.cities ?? [],
        selectedItems: (List<dynamic> selectedList) {
          List<String> list = [];
          for(var item in selectedList) {
            if(item is SelectedListItem) {
              list.add(item.name);
            }
          }
          showSnackBar(list.toString());
        },
        enableMultipleSelection: true,
      ),
    ).showModal(context);

Required parameters

data:

This property takes List as a parameter and it is useful to display items in drop down list.

Optional parameters

listItemBuilder:

This property takes a builder function with SelectedListItem as argument. It is used to customize the rendering of the list items.

enableMultipleSelection:

This property takes Color value as a parameter. You can change the background color of animated segment. default value is Color(0xff8AADFB)

bottomSheetTitle:

This gives the bottom sheet title.

submitButtonChild:

You can set your custom submit button when the multiple selection is enabled.

selectedItems:

This will give the call back to the selected items from list.

dropDownBackgroundColor:

This will set the background color to the dropdown.

searchWidget:

This property takes TextFormField value as a parameter. [searchWidget] is use to show the text box for the searching. If you are passing your own widget then you must have to add [TextEditingController] for the [TextFormField].

isSearchVisible:

This property takes bool value as a parameter. [isSearchVisible] is use to manage the search widget visibility. by default it is [True] so widget will be visible.

searchHintText:

This property takes String value as a parameter. [searchHintText] is use to show the hint text into the search widget. by default it is 'Search' text.

isDismissible:

This property takes bool value as a parameter. [isDismissible] Specifies whether the bottom sheet will be dismissed when user taps on the scrim. If true, the bottom sheet will be dismissed when user taps on the scrim. by default it is True.

bottomSheetListener:

[bottomSheetListener] that listens for BottomSheet bubbling up the tree.

LICENSE!

Dropdown list is MIT-licensed.

Let us know!

We’d be really happy if you send us links to your projects where you use our component. Just send an email to [email protected] and do let us know if you have any questions or suggestion regarding our work.

drop_down_list's People

Contributors

abrarmalekji345 avatar acaala avatar deep-mindinventory avatar mi-ghanshyam avatar pratikkansaramind avatar romatallinn avatar sahilmind avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

drop_down_list's Issues

No dismissible sheet

I would like to have an option to prevent the user from closing the list by tapping out. To be able to have control and that it closes only when the Done button is given

best way to search objects with this package ?

can this package handle searching objects ?
for example dropdown_search package have this

DropdownSearch<UserModel>(
    itemAsString: (UserModel u) => u.userAsStringById(),
    onChanged: (UserModel? data) => print(data),
    dropdownSearchDecoration: InputDecoration(labelText: "User by id"),
)

I have a list of items that can have duplicate names, i want the value to be the id and the label to be the name
best DropDown in pubDev, only lacks searching through objects

Setting background color

image

image

From the image above when I switch to dark mode the top remain white color. What do I have to set to make it turn to the dark mode background color

Search breaks listItemBuilder

Search outputs the sublist of the items. This means that indexes from the original list are no longer aligned with this sublist. So when I search, it outputs, for example, a match with one item that is being built by index 0. And there is no way for me to actually know what this item is. It should at least pass over SelectedListItem in listItemBuilder instead of index, so I can match it by value in the original list.

Change hintText

Can you please add a parameter to change the hintText?
I need to translate this text...

And I know about searchWidget but it's not possible to add padding... I only need to change the placeholder.

Floating Menu instead of Bottom Sheet for Web

In mobile, it makes sense to have a bottom sheet as the open menu container.
However in web, it would make more sense to display the opened menu under the item we tap (like a standart dropdown)
Can we do this? what would the strategy be? I would be glad to contribute if I can be headed towards the right direction
Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.