MultiSelectDialogField, some initial values are provided. In the MultiSelectChipDisplay's onTap method, the removal is wrapped with setstate (this does slow down the UI refreshment).

Upon clicking on initial items, they are not removed, but the validator complains 'no items selected'.

But, if no initial values provided, it works perfectly.

Hey,
I was trying to implement this package into my app and I wanted to change the colors for the buttons when you open the Bottom Sheet and when you select the chips inside the Sheet. I tried looking online and within the actual code but couldn't find anything that worked. If theres a solution for this please let me know. Thank you.

My code for the MultiSelectBottomShieldField looks like the following:

Container(
  width: 335,
  decoration: BoxDecoration(
    color: Color(0xFFF0F0F0),
    border: Border.all(
      color: Color(0xFFE8E8E8),
      width: 2,
    ),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    children: <Widget>[
      MultiSelectBottomSheetField<Software>(
        initialChildSize: 0.4,
        decoration: BoxDecoration(),
        listType: MultiSelectListType.CHIP,
        initialValue: _selectedSoftware,
        searchable: true,
        items: _items,
        buttonText: Text("Select Pharmacy Software...",
            style: GoogleFonts.inter(
                color: Color(0xFFBDBDBD), fontSize: 16)),
        onConfirm: (values) {
          _selectedSoftware = values;
        },
        chipDisplay: MultiSelectChipDisplay(
          items: _selectedSoftware
              .map((e) => MultiSelectItem(e, e.toString()))
              .toList(),
          chipColor: Color(0xFF5DB075),
          onTap: (value) {
            _selectedSoftware.remove(value);
            return _selectedSoftware;
          },
          textStyle: TextStyle(color: Colors.white),
        ),
      ),
    ],
  ),
),

Hello, any way to set min/max selections?

Hello CHB61

Thanks for this great flutter lib.

Seems the initialValue property is not working correctly. Based on your example I added all animals as an initial value:

MultiSelectBottomSheetField( initialValue: _animals, ..... ),

As a result the selected animals are not shown inside the form. But all animals are pre-selected on the bottom selection area (see screenshot).

Hi, there is a way to group the select by category in the selection. like this

Hi, I'm trying to make the font size of my Chips to 20 however this only works for the unselected chips?

Here's my Code:

View.dart

MultiSelectChipField(
scroll: false,
decoration: BoxDecoration(border: null),
showHeader: false,
chipColor: AppTheme.white,
selectedChipColor: AppTheme.medBlue,
textStyle: AppTheme.captionBlue,
selectedTextStyle: AppTheme.captionBlue,
items: _weekDays
.map((e) => MultiSelectItem(e, e))
.toList(),
onTap: (selected) {
studyDays = selected;
},
)

AppTheme:

static const TextStyle captionWhite = TextStyle(
fontFamily: fontName,
fontWeight: FontWeight.bold,
fontSize: 20,
letterSpacing: 0.2,
color: white,
);

static const TextStyle captionBlue = TextStyle(
fontFamily: fontName,
fontWeight: FontWeight.bold,
fontSize: 20,
letterSpacing: 0.2,
color: medBlue,
);

Any help or fix would be greatly appreciated, thanks.

on tapping search it overflows

How can I disable click for any checkbox with a particular condition?

Hi, can you help me converting a list of string into list of MultiSelectItem.
Here's my list List of String:

List keywords = [Doctor,Engineer,Accountant];

and what should I put in initial value parameter ?

and lastly, thanks for this amazing package.

Hi
I have Json data of list. I want to convert into List<MultiSelectItem> so that items will accept.

can you help me on this.

Please find below Json output

[{id: 1, name: apple}, {id: 2, name: orange}, {id: 3, name: Mango}, {id: 4, name: Papaya}, {id: 5, name: carrot}]

        decoration: widget.state != null
            ? widget.decoration ??
                BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      color: widget.state != null && widget.state.hasError
                          ? Colors.red.shade800.withOpacity(0.6)
                          : _selectedItems.isNotEmpty
                              ? (widget.selectedColor != null &&
                                      widget.selectedColor !=
                                          Colors.transparent)
                                  ? widget.selectedColor
                                  : Theme.of(context).primaryColor
                              : Colors.black45,
                      width: _selectedItems.isNotEmpty
                          ? (widget.state != null && widget.state.hasError)
                              ? 1.4
                              : 1.8
                          : 1.2,
                    ),
                  ),
                )
            : widget.decoration,

There is a lot of code like this. It draws a black frame border below the input. It broke my color design, it took me a day to find a way to override the colors but the result was impossible except for me to edit the entire file in the package.
If you have allowed drawing this frame border should allow the user to overwrite other colors.

This package is awesome, until I couldn't fix this black :)

When I install and run this module, I am getting the following error.

../../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/multi_select_flutter-3.1.3/lib/dialog/multi_select_dialog_field.dart:92:9: Error: Type 'AutovalidateMode' not found.
final AutovalidateMode autovalidateMode;
^^^^^^^^^^^^^^^^
../../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/multi_select_flutter-3.1.3/lib/bottom_sheet/multi_select_bottom_sheet_field.dart:101:9: Error: Type 'AutovalidateMode' not found.
final AutovalidateMode autovalidateMode;
^^^^^^^^^^^^^^^^
../../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/multi_select_flutter-3.1.3/lib/chip_field/multi_select_chip_field.dart:83:9: Error: Type 'AutovalidateMode' not found.
final AutovalidateMode autovalidateMode;
^^^^^^^^^^^^^^^^
../../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/multi_select_flutter-3.1.3/lib/dialog/multi_select_dialog_field.dart:92:9: Error: 'AutovalidateMode' isn't a type.
final AutovalidateMode autovalidateMode;
^^^^^^^^^^^^^^^^
../../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/multi_select_flutter-3.1.3/lib/dialog/multi_select_dialog_field.dart:128:29: Error: Getter not found: 'AutovalidateMode'.
this.autovalidateMode = AutovalidateMode.disabled,
^^^^^^^^^^^^^^^^
../../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/multi_select_flutter-3.1.3/lib/dialog/multi_select_dialog_field.dart:134:13: Error: No named parameter with the name 'autovalidateMode'.
autovalidateMode: autovalidateMode,
^^^^^^^^^^^^^^^^
../../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/multi_select_flutter-3.1.3/lib/bottom_sheet/multi_select_bottom_sheet_field.dart:101:9: Error: 'AutovalidateMode' isn't a type.
final AutovalidateMode autovalidateMode;
^^^^^^^^^^^^^^^^
../../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/multi_select_flutter-3.1.3/lib/bottom_sheet/multi_select_bottom_sheet_field.dart:141:29: Error: Getter not found: 'AutovalidateMode'.
this.autovalidateMode = AutovalidateMode.disabled,
^^^^^^^^^^^^^^^^
../../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/multi_select_flutter-3.1.3/lib/bottom_sheet/multi_select_bottom_sheet_field.dart:146:13: Error: No named parameter with the name 'autovalidateMode'.
autovalidateMode: autovalidateMode,
^^^^^^^^^^^^^^^^
../../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/multi_select_flutter-3.1.3/lib/chip_field/multi_select_chip_field.dart:83:9: Error: 'AutovalidateMode' isn't a type.
final AutovalidateMode autovalidateMode;
^^^^^^^^^^^^^^^^
../../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/multi_select_flutter-3.1.3/lib/chip_field/multi_select_chip_field.dart:111:29: Error: Getter not found: 'AutovalidateMode'.
this.autovalidateMode = AutovalidateMode.disabled,
^^^^^^^^^^^^^^^^
../../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/multi_select_flutter-3.1.3/lib/chip_field/multi_select_chip_field.dart:123:13: Error: No named parameter with the name 'autovalidateMode'.
autovalidateMode: autovalidateMode,

Hi,
I need to chage the selected items programmatically this widget but I don't found a way to do this after setting the initial items parameter.
The only way I can make this kind of changes is creating a new unique key for each rebuild, making flutter discard the old state and create a new from the initial items but I think it is not very efficient.
Thank you.

When trying to pass newly added icon parameter in MultiSelectChipDisplay() class throws an error like below -
The method 'call' was called on null. Receiver: null Tried calling: call(Instance of 'Animal') The relevant error-causing widget was MultiSelectChipDisplay<dynamic>
I have used the example code as it is and just added icon parameter as below.
chipDisplay: MultiSelectChipDisplay( icon: Icon(Icons.access_alarm), items: _selectedAnimals2 .map((e) => MultiSelectItem<Animal>(e, e.name)) .toList(), onTap: (value) { setState(() { _selectedAnimals2.remove(value); }); }, ),

Flutter doctor -v output
[✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.15.6 19G2021, locale en-IN)
• Flutter version 1.20.3 at /Users/vaibhav/Documents/flutter
• Framework revision 216dee60c0 (12 days ago), 2020-09-01 12:24:47 -0700
• Engine revision d1bc06f032
• Dart version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
• Android SDK at /Users/vaibhav/Library/Android/sdk
• Platform android-30, build-tools 30.0.1
• ANDROID_HOME = /Users/vaibhav/Library/Android/sdk
• 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.6)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 11.6, Build version 11E708
• CocoaPods version 1.9.3

[✓] 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.49.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.14.1

[✓] Connected device (2 available)
• Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 7.1.1 (API 25) (emulator)
• iPhone 11 (mobile) • 8F609EB6-6129-4CF3-82AD-6381BAF858D4 • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-6
(simulator)

• No issues found!

how to remove this empty area from dialog ?

Hi,

When the items are searchable the hint "Search" appears on the text field. This text cannot be customized (like confirm or cancel).
Would be great if that would be possible.

Regards,
Florian

Kindly suggest how to change chips text color? I am using "MultiSelectDialogField". Thanks

Hi there I tried this plugin with nearly 600 item in the list it takes almost 10 seconds to open the dialog box and it's slow while scrolling. UI is perfect but I couldn't use it because it was slow

Hello,
All example i see are with static list , how we can use with say -- data coming from firebase
and how to reload if the orignal query change

Firstly thank you for this package. I have a problem while setting initial values. It is not setting initial values and if i add a existing value of in the selectedCategories again, it's duplicating. What can i do?

selectedCategories => List< CategoryModel >
categoriesAll => List< CategoryModel >

Category Fields:
id, nameTr, nameEn, img, created, modified

MultiSelectChipField<CategoryModel>(
                      initialValue: selectedCategories,
                      items: categoriesAll
                          .map((e) => MultiSelectItem(e, e.nameTr))
                          .toList(),
                      icon: Icon(Icons.check),
                      onTap: (values) {
                        selectedCategories = values;
                      },
                    ),

Hello~
I try to set chipShape property :

chipShape: RoundedRectangleBorder(
        side: BorderSide(
          color: selectedItems.every((e) => allItems.contains(e))
          ? AppThemes.primaryColor
          : AppThemes.grey
        )
      ),

But not work.

Been trying to use it but it takes a lot of of time to load and show data
https://drive.google.com/file/d/1nDn3TAiOdYqR-EmYlvmawyOpMtlaVNP_/view?usp=sharing

I have implemented as follows:

MultiSelectDialogField( initialValue:[], items: presenter .responseFilter .value .author .authorList .map((author) => MultiSelectItem< AuthorList>( author, author.name)) .toList(), searchHint: "Search Author", decoration: BoxDecoration( border: Border.all( color: Colors.grey)), searchable: true, listType: MultiSelectListType.CHIP, onConfirm: (values) { _selectedAuthor = values; }, )

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!

Search option not working after it set to true in MultiSelectDialogField.

Hi,

I made some modifications for when doing the search and not returning a result, the icon changes to add, and the idea is when the user clicks, he adds what was typed in the search as a new item in the selected list, however I'm having difficulties in adding a new item to the list, I tried to add a new function similar to onTap and onConfirm and added the item, but the state is not updated (checbox list and chip display list). Any tips to help me solve this problem?

Currently the default Padding is 10.0 which make user unable to change the widget to their need. Please add a contentPadding option to MultiSelectDialogField so that user can freely modify to their need

It would be nice to have two new properties:

• open the dialog with _showSearch already set to true.
• decide if the text box has focus or not when the dialog is opened. Could be nice if the default for flutter web on desktop will be true and flutter web on mobile (or flutter mobile) will be false.

I have been struggling a bit getting initial value to work, could someone provide an example?

I don't see it being used in any of the examples in the repository.

MultiSelectBottomSheetField's content resize to a really small display when opening keyboard everytime I tap the search button

and this is my code
MultiSelectBottomSheetField
(
initialChildSize: 0.7,
maxChildSize: 0.9,
shape: RoundedRectangleBorder
(
borderRadius: BorderRadius.circular(5),
),
decoration: BoxDecoration
(
color: Colors.white,
border: Border(bottom: BorderSide(color: Colors.grey[200], width: 1)),
),
buttonText: Text("- Ketuk Disini Pilih Tujuan Unit -", style: TextStyle(fontSize: ScreenUtil().setSp(25))),
cancelText: Text("Batal", style: TextStyle(fontSize: ScreenUtil().setSp(30), fontWeight: FontWeight.bold)),
confirmText: Text("Simpan", style: TextStyle(fontSize: ScreenUtil().setSp(30), fontWeight: FontWeight.bold)),
searchHint: "pencarian unit",
unselectedColor: Colors.grey[300],
itemsTextStyle: TextStyle
(
fontSize: ScreenUtil().setSp(28),
color: classesCustomColors.getTextBlack,
),
selectedColor: HexColor.fromHex(classesCustomColorsHex.getMain),
selectedItemsTextStyle: TextStyle
(
fontSize: ScreenUtil().setSp(28),
color: HexColor.fromHex(classesCustomColorsHex.getMain),
fontWeight: FontWeight.bold
),
title: Text
(
"- Pilih Tujuan Unit -",
style: TextStyle
(
fontSize: ScreenUtil().setSp(30),
fontWeight: FontWeight.bold
)
),
items: tujuanUnitDataOption.map((e) => MultiSelectItem(e, e.getNamaUnit)).toList(),
buttonIcon: Icon
(
Icons.arrow_drop_down_rounded,
size: ScreenUtil().setSp(80),
color: Colors.grey[700],
),
backgroundColor: classesCustomColors.getContentBackground,
searchable: true,
chipDisplay: MultiSelectChipDisplay
(
chipColor: HexColor.fromHex(classesCustomColorsHex.getMain),
textStyle: TextStyle
(
color: Colors.white
),
),
listType: MultiSelectListType.LIST,
onConfirm: (values) async
{
await onConfirmTujuanUnit(values);
},
)

Thanks.

I wanted to set the selected value of MultiSelectDialogField from my bloc code by binding it to the initialValue parameter but on looking at source code I found that the internal reference was only being updated in the initState

 void initState() {
     super.initState();
     if (widget.initialValue != null) {
       _selectedItems.addAll(widget.initialValue!);
     }
  }   

Which makes it imposible to use it to update the selected value on state change triggered on changing the initialValue parameter from my bloc code.

I was able to fix the issue by modifying the build method of MultiSelectDialogField

 Widget build(BuildContext context) {
    if (widget.initialValue != null) {
      _selectedItems=widget.initialValue!;
    }

If there is any other way externally modify (using the bloc architecture) the selected values of MultiSelectDialogField without altering the code please let me know.

I am using multi_select_flutter in mac desktop and the width of the MultiSelectDialog is the 75% of the window size. Can you make the width customizable?

I have slightly modified the included example to demonstrate the issue.

Steps:

• Add initialValue to MultiSelectDialogField
• Include chipDisplay and override onTap to delete the tapped value from the _selectedAnimals list.
• Tap on lion which is the initial value.
• 'lion' is removed from _selectedAnimals list but MultiSelectChipDisplay does not update itself.

              MultiSelectDialogField(
                initialValue: [_animals[0]],
                items: _items,
                title: Text("Animals"),
                selectedColor: Colors.blue,
                decoration: BoxDecoration(
                  color: Colors.blue.withOpacity(0.1),
                  borderRadius: BorderRadius.all(Radius.circular(40)),
                  border: Border.all(
                    color: Colors.blue,
                    width: 2,
                  ),
                ),
                buttonIcon: Icon(
                  Icons.pets,
                  color: Colors.blue,
                ),
                buttonText: Text(
                  "Favorite Animals",
                  style: TextStyle(
                    color: Colors.blue[800],
                    fontSize: 16,
                  ),
                ),
                onConfirm: (results) {
                  _selectedAnimals = results.cast<Animal>();
                },
                chipDisplay: MultiSelectChipDisplay(
                  onTap: (value) {
                    setState(() {
                      _selectedAnimals.remove(value);
                    });
                  },
                ),
              ),

Here is my code

MultiSelectDialogField(
  listType: MultiSelectListType.LIST,
  items: _itemList
      .map((e) => MultiSelectItem(
          e, e.name ?? "--"))
      .toList(),
  title: Text("Sold Products"),
  selectedColor: Color(0xff72BF44),
  onConfirm: (e) {print(e);},
),

Error comes when onConfirm is called after confirming selection

Latest Flutter SDK
Channel master, 2.3.0-1.0.pre.149

If we want to take any action on cancelling the dialogue or bottom sheet. In my use case, I have to add the on logs(analytics) on the cancel button tap to observe the user behaviour, how many times the user will select the values and how many time user will cancel the operation.(For the positive button we already have an onConfirm handler)

After I updated to flutter 2.0.
When I click search button, it shows bottom overflow like that.
Anyone has the solution for that?

Get this error when trying to run the example

======== Exception caught by gesture ===============================================================
The following TypeErrorImpl was thrown while handling a gesture:
Expected a value of type 'List?', but got one of type 'List<Animal?>'

What's going wrong?

MultiSelectDialogField(
items: _items,
title: Text("Main Categories"),
selectedColor: Colors.pink,
decoration: BoxDecoration(
color: Colors.pink.withOpacity(0.1),
borderRadius: BorderRadius.all(Radius.circular(40)),
border: Border.all(
color: Colors.pink,
width: 2,
),
),
buttonIcon: Icon(
Icons.category,
color: Colors.pink,
),
buttonText: Text(
"Main Categories - high level categories to list the card in",
style: TextStyle(
//color: Colors.blue[800],
//fontSize: 16,
),
),
onConfirm: (results) {
var selected = results.cast();
}),

Getting this error message all the time woth Flutter 2.0.3
It works when running flutter in no-sound mode (flutter run --no-sound-null-safety) but even then the "title" is not recognized and I get the default "Select"

======== Exception caught by gesture ===============================================================
The following _TypeError was thrown while handling a gesture:
type 'List<String?>' is not a subtype of type 'List?' of 'value'

When the exception was thrown, this was the stack:
#0 FormFieldState.didChange (package:flutter/src/widgets/form.dart)
#1 __MultiSelectDialogFieldViewState._showDialog.. (package:multi_select_flutter/dialog/multi_select_dialog_field.dart:369:29)
#2 MultiSelectActions.onConfirmTap (package:multi_select_flutter/util/multi_select_actions.dart:27:16)
#3 _MultiSelectDialogState.build. (package:multi_select_flutter/dialog/mult_select_dialog.dart:300:20)
#4 _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:991:20)
...
Handler: "onTap"
Recognizer: TapGestureRecognizer#85693
debugOwner: GestureDetector
state: possible
won arena
finalPosition: Offset(288.0, 617.7)
finalLocalPosition: Offset(40.0, 19.7)
button: 1
sent tap down

Suppose you have two provinces.
Each province has 3 cities.
When you select the first province, the list of cities is loaded into the MultiSelectDialogField. At this moment, I select for example two cities.

The moment I select cities, I save this list of cities in a list that I always put in the initialValue property.

When I switch to another province, the MultiSelectDialogField loads cities from this other province.

So far everything works fine, however when I open the list of cities in this province, the cities in the previous province are still set to the value of the onConfirm property;

 onConfirm: (values) {
    print(values.length);
  },

If I select a city in this province, the print is saying that there are 3 selected cities, because the previous selections were kept in the values.

Hi,

Currently it is possible to define one color for the chips.
Would be great if the color can be defined for each chip (maybe based on the value of the item. The color should apply in the MultiSelectChipDisplay and the select dialog.
A function could be provided that chooses the color based on the item's value. The current chipColor is a fallback when the function is not defined or does not return with a result.

Regards,
Florian

title parameter must be Widget not "Text". if the text bigger than width its overflow.

I am migrating all of my companies packages to null safety and we have a dependency on multi_select_flutter. I have run an initial migration and fixed up the code to get it to compile. I will be testing the changes on our systems but in the meantime will submit a PR.

The OK and CANCEL button are very close to the bottom of the scree n and causing issue on iPhone 12 Pro Max. Is there anyway to give this padding below?

There is no way that I see to change text color of error message. It is in default by red color which i need to change

MultiSelectBottomSheet(
listType: MultiSelectListType.CHIP,
searchable: false,
confirmText: Text("set",
textScaleFactor: 1.3,
style: TextStyle(
color: Colors.purple,
fontFamily: "SFUIDISPLAY",
fontWeight: FontWeight.w600)),
cancelText: Text("Cancel",
textScaleFactor: 1.3,
style: TextStyle(
color: Colors.purple,
fontFamily: "SFUIDISPLAY",
fontWeight: FontWeight.w600)),
selectedItemsTextStyle: TextStyle(color: Colors.white),
selectedColor: Colors.purple,
title: Center(
child: Text("Interest",
textScaleFactor: 1.3,
style: TextStyle(
color: Colors.black,
fontFamily: "SFUIDISPLAY",
fontWeight: FontWeight.w600))),
items: lang.map((e) => MultiSelectItem(e, e.interest)).toList(),
onConfirm: (values) {
_selectedlang = values;
print("values");
print(values.runtimeType);

          _selectedlang.forEach((element) {


             print(  element.toString());
             print("Element=======>>>>>>>>>>>>>>>>>>>>>>");
          });
        },
      );

I'm using a MultiSelectChipField with scroll set to false which means items flow to multiple rows when required. I can use itemBuilder to control the horizontal spacing between items but I can't find a way to control the vertical spacing between rows.

Would it be possible to add a way to set this?

Is there a way to have the items ordered after a user selects them? I have my items in alphabetical order which works fine when the Bottom Sheet is open, but if a user selects some of those items, closes the bottom sheet, and then opens it up again to add another item, that new item is appended to the end of the chips on screen.