lcuis / search_choices Goto Github PK

Is it possible to call API to get data of search dialog when I tap to open it ?

Hi, I'd like to avoid the user to tap on the dropdown to display the search input. Is it possible to focus the input directly after the page loading? Thanks.

Examples of future search with a dialog box on iOS are affected by a bug.
Selection of a filter doesn't refresh the list.
Selection of an order refreshes the list and takes the previously selected filter into consideration.
All works fine in a menu, not in a dialog box.

Currently, if I use SearchChoices.single for example, and the items provided in the dialog list don't meet the search criteria, the list is simply empty.

I tried to check if there's a way to show a custom widget instead of that list if no results are returned, but couldn't. I might have missed it somewhere in the documentation, if so, please let me know.

Thanks a lot for this library, I couldn't find anything that works as well as it for having a searchable list from a dropdown.

sometimes we dun want to show the keyboard automatically. Better to allow customize the autofocus option of the searchBar?

Hi guys,
I'm using a custom colour as my primary colour, and it's set in a themes file so that Theme.of(context).primaryColor is able to access it. However it appears that the colour for buttons and UI in search_choices is hard coded to blue.

Is there a way to pass theme data through to the widget without needing to use a completely custom solution via buildDropDownDialog?

Is this library still maintained?

My code:
List bairros = List();
List bairrosEscolhidos = List();
List bairrosEscolhidosInt = List();

SearchChoices.multiple(
doneButton: (selectedItemsDone, doneContext) {
return (RaisedButton(
color: temaPadrao.primaryColor,
onPressed: () {
Navigator.pop(doneContext);
},
child: Text(
'Salvar',
style: TextStyle(color: Colors.white),
)));
},
items:
bairros.map<DropdownMenuItem>((String value) {
return DropdownMenuItem(
value: value,
child: Text(value),
);
}).toList(),
selectedItems: bairrosEscolhidosInt,
selectedValueWidgetFn: (item) {
return (Center(
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
side: BorderSide(
color: temaPadrao.primaryColor,
width: size.paddingPequeno / 4,
),
),
margin: EdgeInsets.all(size.paddingPequeno),
child: Padding(
padding: EdgeInsets.all(size.paddingPequeno),
child: Text(item.toString()),
))));
},
hint: Padding(
padding: EdgeInsets.all(size.paddingMedio),
child: Text('Selecione os Bairros e Distritos'),
),
style: TextStyle(fontSize: size.textPequeno),
searchHint: Text(
'Selecione os Bairros e Distritos',
style: TextStyle(fontSize: size.textPequeno),
),
onChanged: (value) {
setState(() {
bairrosEscolhidosInt.clear();
bairrosEscolhidos.clear();
bairrosEscolhidosInt = value;
for (var x in value) {
bairrosEscolhidos.add(cidades[x]);
}
});
},
closeButton: (selectedItemsClose) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RaisedButton(
onPressed: () {
setState(() {
bairrosEscolhidos.clear();
bairrosEscolhidosInt.clear();
bairrosEscolhidosInt.addAll(
Iterable.generate(bairros.length)
.toList());
});
},
child: Text("Selecionar Todos")),
RaisedButton(
onPressed: () {
setState(() {
bairrosEscolhidos.clear();
bairrosEscolhidosInt.clear();
});
},
child: Text("Limpar Seleção")),
],
);
},
isExpanded: true,
),

Hi

Is it possible to set the search string on the widget and then have it open by setting its focus?

Example:

I have a widget with an image that contained a string value. see image 1

When the user taps the image I want to automatically set the search string in SearchChoices and have the dialog open and the lookups filtered. see image 2

I want to change color in this icon
or Can I remove that search icon ?

Full error:
[ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: This widget has been unmounted, so the State no longer has a context (and should be considered defunct).
Consider canceling any active work during "dispose" or using the "mounted" getter to determine if the State is still active.
#0 State.context. (package:flutter/src/widgets/framework.dart:909:9)
#1 State.context (package:flutter/src/widgets/framework.dart:915:6)
#2 _SearchChoicesState.showDialogOrMenu (package:search_choices/search_choices.dart:1196:39)

#3 _SearchChoicesState.build. (package:search_choices/search_choices.dart:1277:21)

Here's the code:

Widget selectVehicle() {

  return Column(
      children: [
        Padding(
          padding: const EdgeInsets.only(left: 0.0, right: 0.0, top: 10.0),
          child: Row(
            children: <Widget>[
              WidgetAnimator(
                Text(
                  LocaleText.of(context).vehicle,
                  textAlign: TextAlign.left,
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
                ),
              ),
            ],
            mainAxisAlignment: MainAxisAlignment.start,
          ),
        ),
        DecoratedBox(
          decoration: ShapeDecoration(
            color: Colors.transparent,
            shape: RoundedRectangleBorder(
              side: BorderSide(
                  width: 3.0,
                  style: BorderStyle.solid,
                  color: Theme.of(context).textTheme.caption.color),
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.only(top: 0.0, left: 0, right: 0),
            //child: SearchableDropdown(
            child: SearchChoices.single(
              hint: Text(
                '${selectedVehicle['name'] != null ? selectedVehicle['name'] : LocaleText.of(context).unassigned}',
                style: new TextStyle(
                  fontSize: 14,
                  color: Theme.of(context).textTheme.subtitle2.color,
                ),
                overflow: TextOverflow.ellipsis,
              ),
              underline: SizedBox(),
              key: UniqueKey(),
              items: devicesList?.map((item) {
                return new DropdownMenuItem<dynamic>(
                    child: ListWidgetAnimator(
                      Text(
                        '${item['name']} ${item['brand']} ${item['model']}',
                        style: new TextStyle(
                          fontSize: 14,
                          color: Theme.of(context).textTheme.subtitle2.color,
                        ),
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    value: item);
              })?.toList(),
              selectedValueWidgetFn: (item) {
                return Container(
                  transform: Matrix4.translationValues(0, 0, 0),
                  alignment: Alignment.centerLeft,
                  child: Text(
                    '${item['name']} ${item['brand']} ${item['model']}',
                    style: new TextStyle(
                      fontSize: 16,
                      color: Theme.of(context).textTheme.subtitle2.color,
                    ),
                    overflow: TextOverflow.ellipsis,
                  ),
                );
              },

              menuBackgroundColor: Theme.of(context).textTheme.headline4.color,
              isExpanded: true,
              value: selectedVehicle,
              isCaseSensitiveSearch: false,
              searchHint: new Text(
                LocaleText.of(context).selectEquipmentError,
                overflow: TextOverflow.ellipsis,
                style: new TextStyle(
                  fontSize: 14,
                ),
              ),
              searchFn: (String keyword, items) {
                List<int> ret = List<int>();
                if (keyword != null && items != null && keyword.isNotEmpty) {
                  keyword.split(" ").forEach((k) {
                    int i = 0;
                    items.forEach((item) {
                      if (k.isNotEmpty &&
                          (item.value['name']
                                  .toString()
                                  .toLowerCase()
                                  .contains(k.toLowerCase()) ||
                              item.value['brand']
                                  .toString()
                                  .toLowerCase()
                                  .contains(k.toLowerCase()) ||
                              item.value['model']
                                  .toString()
                                  .toLowerCase()
                                  .contains(k.toLowerCase()) ||
                              item.value['description']
                                  .toString()
                                  .toLowerCase()
                                  .contains(k.toLowerCase()))) {
                        ret.add(i);
                      }
                      i++;
                    });
                  });
                }
                if (keyword.isEmpty) {
                  ret = Iterable<int>.generate(items.length).toList();
                }
                return (ret);
              },

              closeButton: LocaleText.of(context).cancel,
              onChanged: (value) {
               
                // Hide keyboard
                FocusScope.of(context).unfocus();

                if (value != null) {
                  selectedVehicle = value;
                  if (mounted)
                    setState(() {
                     
                    });
                }
              },
            ),
          ),
        ),
      ],
    );
}```

Also, it would be great to have the possibility to validate dropdown after form submit button was pressed(I mean when we complete full form with all fields)
I know it's a well-known issue I read tickets in searchable_dropdown, but looks like it's an important issue as lots of people need this widget as part of the form.

I created TextField and type in something, and then press SearchChoices widget and open drop down dialog.
When I closed the dialog, TextField was still in focus. May I know is there any method to unfocus other text fields when open/close SearchChoices widget?

Hi!
I'm building a web app using flutter web and got this issue when trying to implement search_choices:

error: The argument type 'List<DropdownMenuItem> (where DropdownMenuItem is defined in /Users/ak/Library/flutter/.pub-cache/git/flutter_web-cc38319841009fcbdf632d9b03aab18d28939438/packages/flutter_web/lib/src/material/dropdown.dart)' can't be assigned to the parameter type 'List<DropdownMenuItem> (where DropdownMenuItem is defined in /Users/ak/Library/flutter/packages/flutter/lib/src/material/dropdown.dart)'. (argument_type_not_assignable at [mc_web_app] lib/RequestsPage/AddEditRequestPage.dart:236)

My flutter doctor is:

[✓] Flutter (Channel beta, 1.19.0-4.1.pre, on Mac OS X 10.15.5 19F101, locale ru-RU)
    • Flutter version 1.19.0-4.1.pre at /Users/ak/Library/flutter
    • Framework revision f994b76974 (8 days ago), 2020-06-09 15:53:13 -0700
    • Engine revision 9a28c3bcf4
    • Dart version 2.9.0 (build 2.9.0-14.1.beta)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/ak/Library/Android/sdk
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.8.4

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.45.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.11.0

[✓] Connected device (2 available)
    • Web Server • web-server • web-javascript • Flutter Tools
    • Chrome     • chrome     • web-javascript • Google Chrome 83.0.4103.97

• No issues found!

My pubspec.yaml:

name: mc_web_app

version: 1.0.0+1

environment:
  sdk: ">=2.2.2 <3.0.0"

dependencies:
  protobuf: ^1.0.1
  provider: any

  service_worker: ^0.2.0
  googleapis_auth: ^0.2.3+5
  http: ^0.12.1
  intl: ^0.16.1
  search_choices: ^1.0.17

  firebase: any
  firebase_web: ^5.0.9

  flutter_web: any
  flutter_web_ui: any

dev_dependencies:
  build_runner: ^1.10.0
  build_web_compilers: ^2.11.0
  test: ^1.14.6

dependency_overrides:
  provider:
    git:
      url: https://github.com/kevmoo/provider
      ref: flutter_web

  flutter_web:
    git:
      ref: cc38319
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web

  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui

  firebase:
    git:
      url: https://github.com/FirebaseExtended/firebase-dart

My code is also below:

import 'package:search_choices/search_choices.dart';
...

  var _housesList = List<DropdownMenuItem<dynamic>>();

...

@override
  void initState() {
    if (!widget.editRequest) _db.getHouses().then((value) {
      var list = value.map((e) => DropdownMenuItem(value: e,
        child: Text('${e.city}, ${e.street}, ${e.houseNumber}'))).toList();
      _housesList = list;
    });
    super.initState();
  }

...

RaisedButton(
  child: Text('some text'),
    onPressed: () {
      SearchChoices.single(items: _housesList, onChanged: () { /*...*/ }); // ERROE GOES HERE
    },
  )

What this issue is about? I mean that I know that this issue appears when your Widget is not compatible with flutter_web, but site said that it's compatible with web.

Is there a way to center searchHint? I tried the snippet below but it didn't work.

searchHint: Center(child: Text("Select one")),

Is it possible to customize the searchBar?

add prefix icon

Hello,

first I would say thank you for creating this widget, it helps a lot for me.

I want to ask after I add menuConstraints, the close button under the list doesn't work. how can I solve this problem thank you :D

In case no selection is made, I need an option to not display clear button (currently it is displayed as disabled, which is quite confusing). This new option should display clear button only if there is selection.

Also it should be possible to specify position of clear button, before or after dropdown button:

There is a working example of editable list in single selection mode. The equivalent example in multiple selection mode would be needed to make sure it is possible.

I have an search_choices where I have passed the padding as 0, and this padding is properly applied when we have no item selected.

I added a yellow container surrounding the search_choices to see the size it takes up.
"Todos" is just the hint used when there is no item selected. In this case, the padding I passed works fine.

As soon as I select an item, the padding is not respected anymore.

Feature request:
Boolean to show/hide search input

I'm using the search_choices widget in a long list of filters, and some items only have two or three selections within their dropdown list. It would be really neat to have a bool to toggle the search itself on or off, so that I can show something along the lines of:

displaySearch: (items.length > 3),

After I've selected my items, I don't necessarily want them populated in innerItemsWidget. Instead, I'd rather handle those selections a different way (in a separate list below the search widget for example).

It'd be great if after selecting, the searchHint remains in the search bar and nothing is populated.

if (list.isEmpty && hintIndex != null) {
  innerItemsWidget = items[hintIndex];
} else {
  innerItemsWidget = widget.selectedAggregateWidgetFn != null
      ? widget.selectedAggregateWidgetFn!(list)
      : Column(
          children: isPopulatingSearchBar ? list : [searchHint], // Something like this perhaps
        );
}

How I can enable/disable this Widget?

Is there any method to display the selected items horizontally?
selectedValueWidgetFn always return vertical items display.

Can I customize the "Error - retry" button?

It should be possible to define background and foreground text color for title bar, see existing titleBar() method.

how can i add a title to the dropdown button and validation

Hi

I can't clear the field state. Whats can be wrong?

onClear: () => setState(() => _selectedCategoryTitle = ''),

Closure call with mismatched arguments: function '_PartsBoardLayoutState.build.'
Receiver: Closure: (dynamic) => void
Tried calling: _PartsBoardLayoutState.build.(null, Instance of 'StatefulElement')
Found: _PartsBoardLayoutState.build.(dynamic) => void

Currently it is hardcoded:

child: Card(
        color: widget.menuBackgroundColor,
        margin: EdgeInsets.symmetric(
            vertical: widget.dialogBox ? 10 : 5,
            horizontal: widget.dialogBox ? 10 : 4),
        child: Container(
          constraints: widget.menuConstraints,
          padding: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              titleBar(),
              searchBar(),
              list(),
              closeButtonWrapper(),
            ],
          ),
        ),
      ),

Need properties: menuMargin and menuPadding to be able to override these hardcoded values.

Currently there is a property: menuConstraints, but it is ignored in case of dialogBox = true
As result on large screens dialog takes almost all available space, which looks bad.
Please add property dialogConstraints to be able to limit dialog size.
Also it would be absolutely perfect if option for overriding showDialog() call is added, like:

OnShowDialog onShowDialog;

typedef OnShowDialog  = Future Function(BuildContext context, Widget menuWidget);

That way it will be possible to configure showDialog() exactly the way it is needed for my application, even replacing standard dialog to custom one.

Getting the following error on building for iOS

XCode Version 11.3.1
Tried to compile example project

.../pub-cache/hosted/pub.dartlang.org/search_choices-1.0.12/ios/Classes/SearchChoicesForPushPlugin.m:8:9: fatal error: 'search_choices_for_push-Swift.h' file not found
#import "search_choices_for_push-Swift.h"
^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1 error generated.
note: Using new build system
note: Planning build
note: Constructing build description

flutter doctor (tested on stable and beta channels )

⇒ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v1.15.17, on Mac OS X 10.15.3 19D76, locale en-ZA)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.6)
[✓] IntelliJ IDEA Ultimate Edition (version 2019.3.3)
[✓] Connected device (3 available)

• No issues found!

Currently padding is hardcode, and actually it is a little bit excessive by default, i.e. padding: EdgeInsets.all(10.0),
Please make it adjustable.

I'm building a client application for the Mastodon platform and users are supposed to be able to select any registered instance to log into. What I'm currently doing to achieve this is calling https://instances.social/api/doc/#api-Instances-ListInstances, storing all the instances in a list, and giving that to SearchChoices.single. But that response is paginated in the order of a few thousand pages of instances, and I'm wondering if SearchChoices can handle a list made of all the instances in those few thousand pages - right now I'm only passing the first page. Would this be a problem?

I've a widget with a search_choices widget (which is otherwise working great!) and a list of results below that (depending on the selected item from the dropdown).

I can search for and select an item from the dropdown list, but when an item has been selected, the selected item isn't shown in the search_choices widget - and I can't figure out why. TIA for your input.

(1) widget when first built

(2) selecting an item

(3) after an item has been selected

The widget is as follows:

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  
  late List<DropdownMenuItem<Model>> _items;

  // changed this
  Model? _selectedItem;

  @override
  void initState() {
    // get item list
    final itemList = // ...
    _items = _buildDropdownMenuItems(itemList);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Center(
          child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
              side: const BorderSide(
                color: Colors.grey,
                width: 1.0,
              ),
            ),
            margin: const EdgeInsets.all(10.0),
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: SearchChoices.single(
                items: _items,
                value: _selectedItem,
                hint: 'hint'.tr(),
                searchHint: 'hint2'.tr(),
                onChanged: (Model item) {
                  setState(() {
                    _selectedItem = item;
                  });
                },
                style: const TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.normal,
                ),
                isExpanded: true,
              ),
            ),
          ),
        ),
        Consumer(
          builder: (context, watch, child) {
            // results
          },
        )
      ],
    );
  }

  List<DropdownMenuItem<Model>> _buildDropdownMenuItems(
      List<Model> itemList) {
    final listItems = <DropdownMenuItem<<Model>>>[];
    for (final item in itemList)
      listItems.add(
        DropdownMenuItem<Model>(
          child: Text(
            item.itemName ?? '',
            style: const TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.normal,
            ),
          ),
          value: item,
        ),
      );
    return listItems;
  }
}

I have 3 search_choices, I noticed that if the widget has loaded list but has no data selected it is without padding(like: select province on the screenshot). If I select some item widget now has padding on the top and bottom(country dropdown on the screen.) And if dropdown doesn't have any data and is disabled it also has top and bottom padding. Is there any possibility to get rid of them and make the same height for all dropdowns?

I want to search by the item(text), not the value, because I want to pick the ID of the item.

example -

Item = Digital Marketing
ID = jdsds-dsdscsd-erereddsds

I want to search by item, and select the id

Hi

I have a container that has size X before selecting a value. Then after selecting value the container increases in size. How can I keep the size the same always?
Attached is an example:
1 - Top drop-down, I have selected a value
2 - Bottom drop-down I have not yet selected.

Also, the text after selecting is always right-aligned.

they are both configured the same way

Hi, you will support null safety? This package is very good, pls update him!

items: dropdownElemnts?.data?.sectors!.map((Sector value) { return DropdownMenuItem<String>( onTap: () { print('clicked'); }, value: value.id.toString(), child: Text(value.name!), ); }).toList(),

Actually i have two issues the first one ,the search feature doesn't work when the value and child pramters take different values as shown..with the below code search feature will work
value: value.name, child: Text(value.name!),

the second issue onTap function doesn't work at all

See icemanbsi#58

NoSuchMethodError: The getter 'overlay' was called on null.
Receiver: null
Tried calling: overlay

Gives me this error when i trying to add more items

I need to set the value to be shown after the widget is created, depending upon a selection of another widget.
How can I do that please?
Best regards,
Peter.

Hi @devZakariya , do you mean that you would like to propose an improvement for this plugin to add a prefix icon?
If so, the prefix icon is an icon that should be placed:

1. before the label?
2. before the underline?
3. before the hint or the selected value(s)?
   

Originally posted by @lcuis in #21 (comment)