hiddencaliber / flutter_multiselect Goto Github PK

Hi,
In terms of functionality everything is working normally. However the value field is always null. The onSaved function doesn't print the value.
Even when I copy/paste your example code into my project I get the same behaviour. Everything looks like it's working but the value field is not populated.

Any ideas would by greatly appreciated

This is the example code from the main page. I had to add the colours since they were throwing an error because they can't be null.

MultiSelect(
              enabledBorderColor: Colors.grey,
              errorBorderColor: Colors.grey,
              selectIconColor: Colors.white,
              inputBoxFillColor: Colors.grey[800],
              searchBoxColor: Colors.grey[800],
              cancelButtonTextColor: Colors.white,
              cancelButtonColor: Colors.grey[800],
              buttonBarColor: Colors.grey[800],
              hintTextColor: Colors.white,
              selectedOptionsInfoTextColor: Colors.black,
              checkBoxColor: Colors.white,
              searchBoxFillColor: Colors.black,
              autovalidate: false,
              titleText: "title",
              validator: (value) {
                if (value == null) {
                  return 'Please select one or more option(s)';
                }
                return "";
              },
              errorText: 'Please select one or more option(s)',
              dataSource: [
                {
                  "display": "Australia",
                  "value": 1,
                },
                {
                  "display": "Canada",
                  "value": 2,
                },
                {
                  "display": "India",
                  "value": 3,
                },
                {
                  "display": "United States",
                  "value": 4,
                }
              ],
              textField: 'display',
              valueField: 'value',
              filterable: true,
              required: true,
              value: null,
              onSaved: (value) {
                print('The value is $value');
              }),

I've tried using example in readme and while select items I get this error, it is quite random - sometimes it throws error on first checkbox click sometimes on 2nd or 3rd.
Here is what I got:

I/flutter (19741): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ I/flutter (19741): The following StateError was thrown building SelectionModal(dirty, state: I/flutter (19741): _SelectionModalState#19b72): I/flutter (19741): Bad state: Too many elements I/flutter (19741): I/flutter (19741): When the exception was thrown, this was the stack: I/flutter (19741): #0 _ListBase&Object&ListMixin.singleWhere (dart:collection/list.dart:172:11) I/flutter (19741): #1 _SelectionModalState._currentlySelectedOptions.<anonymous closure> (package:flutter_multiselect/selection_modal.dart:154:12) I/flutter (19741): #2 List.forEach (dart:core/runtime/libgrowable_array.dart:278:8) I/flutter (19741): #3 _SelectionModalState._currentlySelectedOptions (package:flutter_multiselect/selection_modal.dart:152:20) I/flutter (19741): #4 _SelectionModalState._buildBody (package:flutter_multiselect/selection_modal.dart:93:11) I/flutter (19741): #5 _SelectionModalState.build (package:flutter_multiselect/selection_modal.dart:256:13) I/flutter (19741): #6 StatefulElement.build (package:flutter/src/widgets/framework.dart:3825:27) I/flutter (19741): #7 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3736:15) I/flutter (19741): #8 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5) I/flutter (19741): #9 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2273:33) I/flutter (19741): #10 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:700:20) I/flutter (19741): #11 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:268:5) I/flutter (19741): #12 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:988:15) I/flutter (19741): #13 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:928:9) I/flutter (19741): #14 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:840:5)

solution I found is to replace singleWhere with firstWhere in both places it is used in code. Then it works fine.

Hi, it'll nice to see somes images or a gif in this repo and pub.dev.

I can not find how to change the font style i used on my application. please advise, thankyou.

Dear All,
I've noticed an issue when I call setState inside _onSaved function.
Basically, I need to set the selected values in my state.

  onSaved: (value) {
    setState(() => this.selectedData = value);
  }

This line causes the error:
The following NoSuchMethodError was thrown building MultiSelect(dirty, dependencies: [_FormScope], state: FormFieldState<dynamic>#140cb): The method '[]' was called on null. Receiver: null Tried calling: []("display")

It's well known that forms are reloaded on setState function (see here), but how to solve this issue for the library?

Sincerely,
Francesco

I would be nice to populate the selected values. Currently the MultiSelect.initialValue is set to int type so there cannot be a list of strings sent to be pre-selected. This can be useful when one wants to hydrate the selected options in a form when a user reopens a page that has a list of stored values.

Thank you for your work on this widget.

I'm having an issue where I get an error if the current datasource changes and the previously selected items don't match the new datasource. This behaviour mirrors the standard dropdownbutton behaviour which is fine, however, dropdown button offers access to the selected item so it can be set to null. It would be great if this feature could be implemented or some way to clear or reset the selected items.

if I have a long list, could I locate the selector to a value? I want to locate one item fast, thanks

When I make selection the printing from this line can mix with other print lines I am looking at. I don't think this line is helpful in the code and can be switched on for a test.

Is there a way to change the text language of those buttons?
Furthermore, thank you for contributing to the community with this package.

Is there any option to select or deselect all items? It would be nice if this feature could be implemented.

MultiSelect(
      titleText: 'Select The Options!',
      validator: (value) {
        if (value == null) {
          return 'Please select one or more option(s)';
        }
        return 'Loading...';
      },
      errorText: 'Please select one or more option(s)',
      dataSource: _getDataSource,
      textField: 'display',
      valueField: 'value',
      filterable: true,
      required: true,
      value: null,
      change: _onChange,
      saveButtonColor: Theme.of(context).primaryColor,
      saveButtonText: 'OK',
      clearButtonColor: Colors.yellowAccent[700],
      clearButtonIcon: FontAwesome.trash,
      clearButtonTextColor: Colors.black,
      cancelButtonColor: Colors.red[800],
      cancelButtonTextColor: Colors.white,
      cancelButtonIcon: FontAwesome.times,
      selectIcon: Icons.arrow_drop_down_circle,
      saveButtonIcon: FontAwesome.check,
      enabledBorderColor: Colors.blue,
    );
  }

Should be nice to have a migration tutorial from non null-safety to null-safety version....

I have setup it in my project and getting error in console:

The library 'package:flutter_multiselect/flutter_multiselect.dart' is legacy, and should not be imported into a null safe library.
Try migrating the imported library.

Which means it does not support NULL SAFETY project. Kindly share null safety package link. Thanks a lot.

Hello!
I need to limit the number of selectable values while the user is in the selection screen, is there a way?

I know there's the validation rule, but as far as I tested, that apply only on form submit...

It would be nice to implement to accept an entity list and not an / json array.

I can't use a dynamic list.

I can not get the value of select when I clicked save. The result was printed inner function return InkWell()

The bar color comes with blue background, and i am not founding what property a need to change to put my color on it. Can u help me

enable filter and scroll search result and select it, it will cause size problem if select so many results.

I/flutter ( 6278): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 6278): The following message was thrown during layout:
I/flutter ( 6278): A RenderFlex overflowed by 4.3 pixels on the bottom.
I/flutter ( 6278):
I/flutter ( 6278): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter ( 6278): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 6278): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter ( 6278): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter ( 6278): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter ( 6278): This is considered an error condition because it indicates that there is content that cannot be
I/flutter ( 6278): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter ( 6278): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter ( 6278): like a ListView.
I/flutter ( 6278): The specific RenderFlex in question is:
I/flutter ( 6278):   RenderFlex#2c002 relayoutBoundary=up2 OVERFLOWING
I/flutter ( 6278):   creator: Column ← MediaQuery ← Padding ← SafeArea ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ←
I/flutter ( 6278):   CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
I/flutter ( 6278):   _InkFeatures-[GlobalKey#4f381 ink renderer] ← NotificationListener<LayoutChangedNotification> ← ⋯
I/flutter ( 6278):   parentData: offset=Offset(0.0, 0.0) (can use size)
I/flutter ( 6278):   constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=321.1)
I/flutter ( 6278):   size: Size(411.4, 321.1)
I/flutter ( 6278):   direction: vertical
I/flutter ( 6278):   mainAxisAlignment: start
I/flutter ( 6278):   mainAxisSize: max
I/flutter ( 6278):   crossAxisAlignment: center
I/flutter ( 6278):   verticalDirection: down
I/flutter ( 6278): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter ( 6278): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 6278): Another exception was thrown: A RenderFlex overflowed by 4.3 pixels on the bottom.

I have added this and I can not identify selected event of multi select drop down value

I got this error because I have a lot of elements.
Can you help me to resolve that ? thanks
It seems an error of dart sdk
error : "Bad state: Too many elements" , That was so, when I selected 2 or 3 Element in the List
here js my code in the multiple select .
`dataSource: [
{
"display": "9 UHR",
"value": 9,
},
{
"display": "12 UHR",
"value": 12,
},
{
"display": "18 UHR",
"value": 18,
},
{
"display": "21 UHR",
"value": 21,
},
{
"display": "10 Uhr",
"value": 10
},
{
"display": "11 Uhr",
"value": 11
},
{
"display": "12 Uhr",
"value": 12
},
{
"display": "13 Uhr",
"value": 13
},
{
"display": "14 Uhr",
"value": 14
},
{
"display": "15 Uhr",
"value": 15
},
{
"display": "16 Uhr",
"value": 16
},
{
"display": "17 Uhr",
"value": 17
},
{
"display": "18 Uhr",
"value": 18
},
{
"display": "19 Uhr",
"value": 19
},
{
"display": "20 Uhr",
"value": 20
}

                      ],`

When i pass dataSource as Model class List<BuildingModel> buildingList = []; then gives me this error

Class 'BuildingModel' has no instance method '[]'.
Receiver: Instance of 'BuildingModel'
Tried calling: []("number")

My code is

Widget multiSelection(){
   return MultiSelect(
       buttonBarColor: Colors.white,
       autovalidate: true,
       hintText: "",
       titleText: 'Country of Residence',
//                    maxLength: 5, // optional
       validator: (dynamic value) {
         if (value == null) {
           return 'Please select one or more option(s)';
         }
         return null;
       },
       errorText: 'Please select one or more option(s)',
       dataSource: buildingList,
       textField: 'number',
       valueField: 'number',
       filterable: true,
       required: true,
       onSaved: (value) {
         print('The value is $value');
       },
       selectIcon: Icons.arrow_drop_down_circle,
       saveButtonColor: Colors.white,
       saveButtonTextColor: Colors.deepPurple,
       checkBoxColor: Theme.of(context).primaryColorDark,
       cancelButtonColor: Colors.white,
       cancelButtonTextColor: Colors.deepPurple,
       selectedOptionsBoxColor: Colors.white
   );
 }

when I try to save data, onSaved is not working, I put some prints inside to verify, and is nos executing the function. So I edit the libreary locally and added one link in the onTap listener of the InkWell in the flutter_multiselect.dart, as follow:

 return InkWell(
                  onTap: () async {
                    var results = await Navigator.push(
                        state.context,
                        MaterialPageRoute<dynamic>(
                          builder: (BuildContext context) => SelectionModal(
                              filterable: filterable,
                              valueField: valueField,
                              textField: textField,
                              dataSource: dataSource,
                              values: state.value ?? []),
                          fullscreenDialog: true,
                        ));

                    if (results != null) {
                      if (results.length > 0) {
                        state.didChange(results);
                      } else {
                        state.didChange(null);
                      }
                      print('selected value $results');
                      onSaved(
                          results); //added to listen the chaneges on the onSaved method
                    }
                  },

and it works for me! 👍

Hi,
Is it possible to jump this screen?

I would like that when the user clicks the save button on the item selection screen, it does not go through that screen. There is no need for him to confirm or view what he selected.
Thanks

Need color change option for selected items text or background color.

for me, text color is showing similar to background color.

onSaved: (value) { print('The value is $value'); }

not working

please provide option of user defined app bar color also