davidsdearaujo / find_dropdown

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

Hi there 👋, David here

I'm a mobile developer and new technologies enthusiast with a current focus on Flutter.

👨🏻‍💻 I’m Founder of the Flutter Brazilian community Flutterando;

🔭 I work at Audo where I help people understand their strengths and enter the job market;

🌱 Currently learning about AI and Neural Networks with Tensorflow JS;

📚 Actively collaborating on packages like: [See all Flutterando packages]

1. localization
2. flutter_triple
3. 

Feel free to connect with me on LinkedIn.

find_dropdown's Issues

Width Landscape issue on i Pad

I found your find_dropdown library very nice and good implementation, saved me alot of time, but there seems to be an issue when the design is landscape, particularly in iPad and landscape mode the width is not quite as the portrait mode, find screenshots, i did a pull request in your git repo hope you can approve it so i can post the change

[FIXED BY] Updating the select_dialog.dart

LINE 131

  bool get isMobile =>
      MediaQuery.of(context).orientation == Orientation.portrait? 
      MediaQuery.of(context).size.width > MediaQuery.of(context).size.height:
       MediaQuery.of(context).size.height > MediaQuery.of(context).size.width;

  BoxConstraints get webDefaultConstraints =>
      BoxConstraints(maxWidth: 250, maxHeight: 500);

  BoxConstraints get mobileDefaultConstraints => BoxConstraints(
        maxWidth: MediaQuery.of(context).orientation == Orientation.portrait
          ? MediaQuery.of(context).size.width * 0.9
          : MediaQuery.of(context).size.height * 0.7,
        maxHeight: MediaQuery.of(context).orientation == Orientation.portrait
          ? MediaQuery.of(context).size.height * 0.7
          : MediaQuery.of(context).size.width * 0.7,
      );

searchHint is not defined

SelectDialog (a wdiget that FindDropdown uses) has an attribute called searchHint; It's a String that's used as the search TextField label in the FindDropdown widget.
If we don't define it, its value will be 'Find', which doesn't fit on all cases (ex.: apps for Portuguese people).

When validating always uses space instead of expanding only if needed

The validation could use some extra implementation not to use always the space to show nothing.
Nice to have some extra options to format the way validation is displayed

Update dependencies

This package is being used in one project where I work.

Recently I've updated my dependencies. However, this one is the only one that is not yet using rxdart 0.23.x.

Could you please update the dependencies so the package is usable again?

Thanks, in advance.

Add decoration to the field

Please add decoration to the field without having us rebuild the entire drop down like how you do it with searchBoxDecoration.

Error OnChange for onFind Dropdown

Run the example project when you use the

FindDropdown(
key: nameKey,
label: "Nome",
OR

FindDropdown(
label: "Personagem",

You need to search for an item and then click on the result. you will get the search animation again and the onchange method is never trigger.

[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1288], locale en-US)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
X cmdline-tools component is missing
Run path/to/sdkmanager --install "cmdline-tools;latest"
See https://developer.android.com/studio/command-line for more details.
X Android license status unknown.
Run flutter doctor --android-licenses to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.9.0)
[√] Android Studio (version 4.1)
[√] VS Code (version 1.62.0)
[√] Connected device (3 available)

e

Update to latest rxdart (0.24.x)

huge error on using this library

Hi I Upgraded flutter to new stable version (1.12.13) and i got error when i using this library in my project. error is in following:

`
Compiler message:
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/find_dropdown-0.1.7+1/lib/find_dropdown_bloc.dart:9:3: Error: Type 'Observable' not found.
Observable get validateMessageOut => _validateMessage$;
^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/find_dropdown-0.1.7+1/lib/find_dropdown_bloc.dart:9:3: Error: Expected 0 type arguments.
Observable get validateMessageOut => _validateMessage$;
^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/select_dialog-1.0.6+1/lib/select_bloc.dart:8:3: Error: Type 'Observable' not found.
Observable<List> filteredListOut;
^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/select_dialog-1.0.6+1/lib/select_bloc.dart:8:3: Error: Expected 0 type arguments.
Observable<List> filteredListOut;
^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/select_dialog-1.0.6+1/lib/select_bloc.dart:9:3: Error: Type 'Observable' not found.
Observable<List> _filteredListOnlineOut;
^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/select_dialog-1.0.6+1/lib/select_bloc.dart:9:3: Error: Expected 0 type arguments.
Observable<List> _filteredListOnlineOut;
^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/select_dialog-1.0.6+1/lib/select_bloc.dart:10:3: Error: Type 'Observable' not found.
Observable<List> _filteredListOfflineOut;
^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/select_dialog-1.0.6+1/lib/select_bloc.dart:10:3: Error: Expected 0 type arguments.
Observable<List> _filteredListOfflineOut;
^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/select_dialog-1.0.6+1/lib/select_bloc.dart:8:3: Error: 'Observable' isn't a type.
Observable<List> filteredListOut;
^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/select_dialog-1.0.6+1/lib/select_bloc.dart:9:3: Error: 'Observable' isn't a type.
Observable<List> _filteredListOnlineOut;
^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/select_dialog-1.0.6+1/lib/select_bloc.dart:10:3: Error: 'Observable' isn't a type.
Observable<List> _filteredListOfflineOut;
^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/select_dialog-1.0.6+1/lib/select_bloc.dart:16:9: Error: The getter 'Observable' isn't defined for the class 'SelectOneBloc'.

• 'SelectOneBloc' is from 'package:select_dialog/select_bloc.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/select_dialog-1.0.6+1/lib/select_bloc.dart').
  Try correcting the name to the name of an existing getter, or defining a getter or field named 'Observable'.
  Observable.combineLatest2(_list$, _filter$, filter);
  ^^^^^^^^^^
  /C:/flutter/.pub-cache/hosted/pub.dartlang.org/select_dialog-1.0.6+1/lib/select_bloc.dart:22:29: Error: The getter 'Observable' isn't defined for the class 'SelectOneBloc'.
• 'SelectOneBloc' is from 'package:select_dialog/select_bloc.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/select_dialog-1.0.6+1/lib/select_bloc.dart').
  Try correcting the name to the name of an existing getter, or defining a getter or field named 'Observable'.
  .switchMap((val) => Observable.fromFuture(onFind(val)).startWith(null));
  ^^^^^^^^^^
  /C:/flutter/.pub-cache/hosted/pub.dartlang.org/select_dialog-1.0.6+1/lib/select_bloc.dart:25:9: Error: The getter 'Observable' isn't defined for the class 'SelectOneBloc'.
• 'SelectOneBloc' is from 'package:select_dialog/select_bloc.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/select_dialog-1.0.6+1/lib/select_bloc.dart').
  Try correcting the name to the name of an existing getter, or defining a getter or field named 'Observable'.
  Observable.merge([_filteredListOfflineOut, _filteredListOnlineOut]);
  ^^^^^^^^^^
  Target kernel_snapshot failed: Exception: Errors during snapshot creation: null
  build failed.

FAILURE: Build failed with an exception.

• Where:
  Script 'C:\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 780

• What went wrong:
  Execution failed for task ':app:compileFlutterBuildDebug'.

Process 'command 'C:\flutter\bin\flutter.bat'' finished with non-zero exit value 1

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
  `

older version of Rxdart

please update to latest version of rxdart. i.e. 0.24

Question: how to select an item from list?

How do we know what item has been selected?

onFind on press back button on android display [No data found]

HI, i have a problem, i need implemented with a model, al is fine, but when i find on the text searchBox, the result return the list of data but when i press in the phone back button for scrolling mi new list, the results display [No data found]
This is my code

Widget _UserModelDropFind(FormularioController _){

  return Obx((){
      if(_.isPrestadoresPrestaciones.value == true){
        return FindDropdown<UserModel>(
            items: _.prestadoresPrestaciones,
            label: "Prestador *",
            onChanged: (UserModel value) {
                _.setUserModel(value);
            },
            selectedItem: _.UserModel,
            labelStyle: TextStyle(
                color: Colors.grey[600], fontSize: 18, fontWeight: FontWeight.w300),
            searchBoxDecoration: InputDecoration(hintText: "Buscar..."),
            titleStyle: TextStyle(color: Colors.indigo[700].withRed(80)),

            dropdownBuilder: (BuildContext context, UserModel item) {
                print('Se esta ejecutando dropdownBuilder');
                return Container(
                decoration: BoxDecoration(
                    border: Border.all(color: Theme.of(context).dividerColor),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.white,
                ),
                child: (item == null)
                    ? ListTile(title: Text("Elija al prestador"), dense: true)
                    : ListTile(
                        dense: true,
                        title: Text(item.nomprestador),
                        subtitle: Text(item.nomprestacion),
                        ),
                );
            },
            dropdownItemBuilder: (BuildContext context, UserModel item, bool isSelected) {
                print('Se esta ejecutando dropdownItemBuilder');
                return Container(
                    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.nomprestador),
                        subtitle: Text(item.nomprestacion),
                    ),
                );
            },
            onFind: (String filtro) => _findData(filtro, _),
        );
    }
    return Container();
  });

}

Future<List<UserModel>> _findData(String filtro, FormularioController _) async{
    print('se esta ejecutando _findData');
    print(filtro.toUpperCase());
    List<UserModel> data = [];
    // List<UserModel> data = _.prestadoresPrestaciones.where((UserModel item) => item.nomprestador.toUpperCase().contains(filtro.toUpperCase())).toList();

    if (_.prestadoresPrestaciones.any((element) => element.nomprestador.toLowerCase().contains(filtro.toLowerCase()))) {
        data =  _.prestadoresPrestaciones
            .where((element) =>
                element.nomprestador.toLowerCase().contains(filtro.toLowerCase()))
            .toList();

    }
    print( 'data.length =>' + data.length.toString());
    return data;
}

i apreciate your help.

Endpoint implementation & multi select item

hi , how can i implement with Endpoint and also work with multi select item ? i don't see any example about it or this package doesn't support something like that ? thank in advance

dropdownBuilder and showClearButton together issue

@davidsdearaujo @Bwolfs2 @Bwolfs2 if you set a custom dropdownBuilder widget you will no more able to control showClearButton, and since the behavor of "showClearButton" is cotrolled by a bloc , so no possible for workaround to bypass the issue without modify the library.

Implements some interface to label the item

While using the find dropdown with Objects, it would be great to have the option to implement in all objects some interface like WithLabel that returns the label identifier of the object.

I think this is usefull because toString is often used for debug purposes, so use toString on the dropdown don't let you use the toString for debug purposes.

My purpose is something like that:

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

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

  @override
  String toString() => 'ANY STRING FOR DEBUG PURPOSES';

  @override
  String toLabel() => name;

  @override
  operator ==(o) => o is UserModel && o.id == id;

  @override
  int get hashCode => id.hashCode^name.hashCode^createdAt.hashCode;

}

Obviously this purpose will need to change the logic of consuming from toString for toLabel

Question: how to use widgets with onPressed/onChange in (item) builder?

I would like to use CheckboxListItem as the widget for individual items in the multi select mode. However, when I return it from the dropdownItemBuilder, the CheckboxListItem consumes the tap and nothing happens. Is there a way to make the dropdown notice the tap?

The same thing happens with the dropdownBuilder - if I use a button for the dropdown widget, the button consumes the tap and the select dialog does not appear.

Text overflow when is big

After we select a big text on the Dialog, I got an overflow on the dropdown widget because of the size of the text.

selectedItem text Overflow

Hi, mi selectedItem overflowed, how to solve this?

Thanks.

Please update package

Hi!

Can you deprecated the package? It didn't has any upgrade a far ago... it was a good dropdown

Flutter web width of the result panel

It is there a way to set custom width to the result panel?
On Web just looks bad taking almost the whole width of the screen.

Release bug fixing

Hi guys,

I see you merged a PR some weeks ago to fix #14 but on pub.dev there is not the new release. It is possible to pubblish it?

Thanks!

Add validation

Adicionar parâmetro de validação, igual o widget TextFormField

Custom dropdown item template

Adicionar parâmetro estático para template default de item do dropdown

Style no texto do search

Poderia incluir o style do textformfield de search.

Add param to hide searchbox

Add param to hide searchbox

Question: use 2d array on item list

Hello, is possible to use a 2d array to load the dropdown:
like
'key': 'title',
'2': ' title2',
'3': ' title3',
use the titles to find in the dropdown and the onchange event get all info, something like this?:

onChanged: (item) {
           Selected_title=item;
           Selected_key=item_key;
      }

thanks

doesn't support rxdart 0.25.0

hello,,

my flutter project is using rxdart 0.25.0, can you please upgrade it? thank you..

Because inventory depends on find_dropdown ^0.2.3 which depends on rxdart >=0.23.0 <0.25.0, rxdart >=0.23.0 <0.25.0 is required. So, because inventory depends on rxdart ^0.25.0, version solving failed. pub get failed (1; So, because inventory depends on rxdart ^0.25.0, version solving failed.)

SetState don't update the text of the selected item

After update the selected item with a setState method data inside the dropdown is correct but the text is not

Add border width

Please, can you add border width to BoxDecoration in next version?

decoration: BoxDecoration(
 color: Colors.white,
 border: Border.all(
 width: 1,
color: Theme.of(context).dividerColor,
 ),
borderRadius: BorderRadius.circular(4.0),
),

Thanks

Null error thrown when setting multipleSelectedValues as AsyncSnapshot is null

The following TypeErrorImpl was thrown building StreamBuilder(dirty, state: _StreamBuilderBaseState<dynamic, AsyncSnapshot>#e57b9):
Unexpected null value.

The relevant error-causing widget was:

When the exception was thrown, this was the stack:
dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 236:49 throw
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 518:63 nullCheck
packages/find_dropdown/find_dropdown.dart 187:76
packages/flutter/src/widgets/async.dart 546:81 build
packages/flutter/src/widgets/async.dart 124:48 build
...

Project Dart version:
sdk: ">=2.7.0 <3.0.0"

Only lower case letters on the search box

Is there a way to make the search box to accept only lower case letters? I'm asking because my item list consist of words starting with an uppercase letter, but when I type in the search box starting with the same uppercase letter, it doesn't find anything, but if I type all letters in lower case, it finds the respective word correctly. So, it would be good if we could force the user to type only lower case letters.
My example below:

If I have a list like this:
{Car, Flower, Dog, Cat}

and try to type in the search box:
"Car"
It doesn't return nothing.

but if I type:
"car"
It returns "Car"

The problem is that some smartphones always try to put an uppercase letter in the begining of a word, so we need to delete the letter and type a lower case instead. But for some users this is not clear and they end complaining that got no results.

Thanks in advance, and congratulations for the great work with the find_dropdown.

Add searchBoxDecoration property

Add searchBoxDecoration property

Method "showDialog" is not closing as it used to

A new attribute of the material's showDialog was added 10 months ago.
Basically, when this attribute is true, the opened dialog doesn't close when we tap Back in our device.
It'll only close if we tap outside the dialog.

Suggestion

Awesome package! Wouldn't it be better to use an offline example for the demo gif rather than one that queries an online API? It'll make the package appear to run smoother.
Or maybe one online, one offline

And this is more of a searchable List dialog box instead of a Dropdown

Clear Selection programmatically

There is no option for clearing selected items programmatically.

This can be very useful when used with dependent dropdowns and value of parent dropdown changes.

I tried with selectedItem and changing the selectedItem state to null but it does not clear the value on UI.

Custom dropdown template

Adicionar parâmetro estático para template de layout default do dropdown