davigmacode / flutter_smart_select Goto Github PK

Hi all,
How to display complete title value after selected the item instead of 3dots in the last? Any help would be appreciated.

Could you please share the example of displaying options after fetched from network API. Could I display loading indicator till the response is fetched?

Is there a way (for example flag) related to modalFilter that will search only for text schema at the begging of text?
Is there a way that searching in list will open when calling showModal() , currently it is only after the user will press 'search' icon?

Cheers,
Thx for answering questions

choiceConfig: SmartSelectChoiceConfig(
isGrouped: true,
glowingOverscrollIndicatorColor: kPrimaryColor,
style: SmartSelectChoiceStyle(
activeColor: kPrimaryColor,
checkColor: Colors.white70,
activeTitleStyle: TextStyle(
color: Colors.white70
),
)
// secondaryBuilder: (context, item) => CircleAvatar(
// backgroundColor: kPrimaryColor,
// child: Text('H')
// )
),

#activeTitleStyle color doesn't work !

When i apply color on chipDeleteColor, i get this error:
type 'MaterialColor' is not a subtype of type 'bool'

S2Tile.fromState( state, hideValue: true, title: const Text('Choisir un prestation'), trailing: const Icon(Icons.add_circle_outline), body: S2TileChips( chipLength: state.valueObject.length, chipLabelBuilder: (context, i) { return Text(state.valueObject[i].title); }, chipOnDelete: (i) => setState(() { _prestations.remove(state.valueObject[i].value); }), chipColor: IntervenantThemeColors.primaryColor, chipDeleteColor: Colors.red, ), ),

Thx

I upgraded the smart select package to the latest version (4.3.2) and everything works fine but i have a problem with some options of choiceConfig. I checked the file choice_config.dart and is different from the choice_config.dart that you use in your example.
My file is missing the class S2GroupSort.
I am posting the two screenshots below. Thanks in advance!

Search based screens are not responding on iOS simulator iPhone 11 - 13.3

flutter doctor -v

[✓] Flutter (Channel beta, v1.17.0, on Mac OS X 10.15.4 19E287, locale en-IN)
• Flutter version 1.17.0 at /Users/abc/development/flutter
• Framework revision e6b34c2b5c (3 weeks ago), 2020-05-02 11:39:18 -0700
• Engine revision 540786dd51
• Dart version 2.8.1

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
• Android SDK at /Users/abc/Library/Android/sdk
• Platform android-29, build-tools 29.0.2
• ANDROID_HOME = /Users/abc/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_212-release-1586-b4-5784211)
• All Android licenses accepted.

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

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

[✓] Android Studio (version 3.6)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 45.1.1
• Dart plugin version 192.8052
• Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

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

[✓] Connected device (3 available)
• iPhone 11 • 30D5A8D5-FA1D-4E56-9D57-204A4B52E404 • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-3 (simulator)
• Chrome • chrome • web-javascript • Google Chrome 81.0.4044.138
• Web Server • web-server • web-javascript • Flutter Tools

i mean i want is like this

                   var temp = SmartSelect.single(
                      choiceItems: [
                        S2Choice(value: 'test1', title: 'test1'),
                        S2Choice(value: 'test2', title: 'test2')
                      ],
                    );
                    S2Choice result = await temp.showModal(context);

Hi I want to start by saying, smart_select is awesome, thanks for this helpful package!

When it's filtering and the query or result item have and accent mark, nothing returns. I don't know if this is an expected behaviour but I think I fixed it in https://github.com/pblinux/flutter_smart_select/tree/accents.
Can I make pull request of this?

Also, I needed to filtering be auto. https://github.com/pblinux/flutter_smart_select/tree/autofilter
Would this be something useful?

Thanks.

[✓] Flutter (Channel master, 1.22.0, on Mac OS X 10.14.6 18G6020, locale ru-RU)
• Flutter version 1.22.0 at /usr/local/lib/flutter
• Framework revision fd80503fd3 (3 months ago), 2020-07-10 14:41:02 +0530
• Engine revision 9b3e3410f0
• Dart version 2.9.0 (build 2.9.0-20.0.dev 06cb010247)

smart_select: ^4.2.0

            SmartSelect<String>.single(
                modalType: S2ModalType.bottomSheet,
                title: "Wishes",
                value: wish,
                modalValidation: (value) => (value == null || value.isEmpty)
                    ? "Choose your wish"
                    : null,
                placeholder: "Select wish",
                onChange: (state) => wish = state.value,
                choiceItems: wishItems)

Expect behavior that we cannot close this bottom sheet without choose a value - but when i open this select, not choose, and close - validation not worked (select closed without any message)

Hi all, when i try to delete the chip, the array _prestations is updated and remove the selected item, but the item kept visible, soo, it means that he dont re-render...

... child: S2Tile.fromState( state, hideValue: true, title: const Text('Cars'), trailing: const Icon(Icons.add_circle_outline), body: S2TileChips( chipLength: state.valueObject.length, chipLabelBuilder: (context, i) { return Text(state.valueObject[i].title); }, chipOnDelete: (i) => setState(() { _prestations.remove(state.valueObject[i].value); }), chipColor: IntervenantThemeColors.primaryColor, ), )

Thank you.

Here is the situation:
I want select multi tags in many groups of tag , but in one group I need to select a single tag.
Have it this function ?

I try to find a builder that can customize widget that opens a selection box with choices, but cannot find it.
Do you have this one?

I have used modalHeaderBuilder which calls an editor, which modifies choice items.
How can I reload items after that editor is popped out?

I am using custom title using titleBuilder but it is not opening the model window to choose item.
I am using single item selection widget.

Hi,

My use case needs to colorize every S2Choice item with different color (font or background).
Can I use S2Choice item's "meta" tag for this? How?

For example, I need that, the 'dev' chip sholud be green, the 'test' chip sholud be blue and the 'prod' chip sholud be red,

Thanks,
Gabor

Iam getting this error when building apk when using this package

lutter build apk --target-platform=android-arm
This application cannot tree shake icons fonts. It has non-constant instances of IconData at the following locations:
  - file:///home/incrypto/flutter/.pub-cache/hosted/pub.dartlang.org/smart_select-4.2.0/lib/src/choices_empty.dart:17:15
                                                                        
                                                                        
FAILURE: Build failed with an exception.                                
                                                                        
* Where:                                                                
Script '/home/incrypto/flutter/packages/flutter_tools/gradle/flutter.gradle' line: 896
                                                                        
* What went wrong:                                                      
Execution failed for task ':app:compileFlutterBuildRelease'.            
> Process 'command '/home/incrypto/flutter/bin/flutter'' 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.
                                                                        
* Get more help at https://help.gradle.org                              
                                                                        
BUILD FAILED in 1m 42s              

But when i pass the --no--tree-shake-icons flag to flutter build apk it works perfectly . Is this the inteneded behaviour?

Hi,

Can I do show a popup with the selectable items from a Function?
So I don't wan to use a concrete chooser-widget in another StateFul Widget or something, I don't want to see a chooser tile, I don't want to press phisically to a graphical item, I just show a chooser popup from a function.
Can I do it? How?

I'm having trouble changing the font size of the title. I tried changing the font size of the modal header but that does not change the font size of the title.
Any help will be really appreciated. Thanks.

Padding(
padding: const EdgeInsets.only(top: 35.0),
child: SmartSelect.single(
title: "House Type", //i want to change the font size of this on the form
value: this._houseType,
options: options.houseType,
onChange: (val) => setState(() => this._houseType = val),
modalType: SmartSelectModalType.bottomSheet,
modalConfig: SmartSelectModalConfig(
headerStyle: SmartSelectModalHeaderStyle(
textStyle: TextStyle(
fontSize: 28.0
)
)
)
),
),

Hi,
When you click on the filter text in a bottomsheet modal to type, the keyboard shows on top of that.
might help:
flutter/flutter#18564 (comment)

Hi, thanks for your great package, I just upgrade to the latest version(4.2.0), an exception when build the appbundle, it says.

This application cannot tree shake icons fonts. It has non-constant instances of IconData at the following locations:
  - file:///Users/xxxxx/development/tools/flutter/.pub-cache/hosted/pub.dartlang.org/smart_select-4.2.0/lib/src/choices_empty.dart:17:15

I using --no-tree-shake-icons flag to avoid this error at the moment, hope will fix in next version, thanks.

I need to use custom TextField for filtering. I didn't found any example of doing that. Is there any way of using custom search field?

Could you please share the example How to use the set key so that we can use the value elsewhere?

Hello,

This is an excellent package that has made our application so so much more professional feeling.

I'm having a hard time styling the 'title' field - not modal title but original title shown before opening the modal. This is primarily for dark/light mode. In dark mode the title is invisible before clicking to open the modal.

I see in #19 what looks like the same question but the answer only applies to the modal header title.

Any help would be appreciated!

Hello.

I discovered a bug with this code :

import 'package:example/models.dart';
import 'package:flutter/material.dart';
import 'package:queries/collections.dart';
import 'package:smart_select/smart_select.dart';

class AddBook extends StatefulWidget {
  final Book book;

  const AddBook({Key key, this.book}) : super(key: key);

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

class _AddBookState extends State<AddBook> {
  Color get primaryColor => Theme.of(context).primaryColor;

  final List<SelectListItem<ELiteraryGenre>> literaryGenres = [
    new SelectListItem<ELiteraryGenre>(ELiteraryGenre.poetry, 'Poetry'),
    new SelectListItem<ELiteraryGenre>(ELiteraryGenre.drama, 'Drama'),
    new SelectListItem<ELiteraryGenre>(ELiteraryGenre.prose, 'Prose'),
    new SelectListItem<ELiteraryGenre>(ELiteraryGenre.fiction, 'Fiction'),
    new SelectListItem<ELiteraryGenre>(
        ELiteraryGenre.non_fiction, 'Non-fiction'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Add book"),
      ),
      body: Padding(
        padding: EdgeInsets.all(5.0),
        child: Column(
          children: [
            getLiteraryGenres(),
          ],
        ),
      ),
    );
  }

  Widget getLiteraryGenres() => new SmartSelect<ELiteraryGenre>.multiple(
        title: 'Literary genres',
        value: widget.book.literaryGenres.value,
        choiceItems: S2Choice.listFrom<ELiteraryGenre, Map>(
          source: Collection(this.literaryGenres)
              .select((arg1) => {'key': arg1.value, 'value': arg1.text})
              .toList(),
          value: (index, item) => item['key'],
          title: (index, item) => item['value'],
        ),
        onChange: (state) =>
            setState(() => widget.book.literaryGenres.value = state.value),
        modalType: S2ModalType.bottomSheet,
        modalConfirm: true,
        modalFilter: true,
        choiceGrouped: true,
        tileBuilder: (context, state) {
          return Card(
            elevation: 3,
            margin: const EdgeInsets.all(5),
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
            ),
            child: S2Tile.fromState(
              state,
              hideValue: true,
              title: const Text('Literary genres'),
              trailing: const Icon(Icons.add_circle_outline),
              body: S2TileChips(
                chipLength: state.valueObject.length,
                chipLabelBuilder: (context, i) {
                  return Text(state.valueObject[i].title);
                },
                chipOnDelete: (i) {
                  setState(() => widget.book.literaryGenres.value
                      .remove(state.valueObject[i].value));
                },
                chipColor: primaryColor,
              ),
            ),
          );
        },
      );
}

Here is the render :

I used a part of your code for this, from
[https://github.com/davigmacode/flutter_smart_select/blob/master/example/lib/features_tile/tile_builder.dart](this file)

Thanks

List _times = [];
....
boxes = widget.carwash.boxes
.map((e) => S2Choice(
value: e,
title: e.name,
))
.toList();
times = buttonListGenerator()
.map((e) => S2Choice(
value: e,
title: DateHelper.getTime(e),
selected: true,
))
.toList();
....
SmartSelect.multiple(
title: 'Времена',
modalFilter: true,
value: _times,
modalFilterHint: 'Ищите время',
placeholder: 'Выберите время',
onChange: (state) {
_times = state.value;
},
choiceItems: times,
modalType: S2ModalType.bottomSheet,
tileBuilder: (context, state) {
return S2Tile.fromState(
state,
isTwoLine: true,
loadingText: "Загружается",
leading: Container(
width: 40,
alignment: Alignment.center,
child: const Icon(Icons.access_time_outlined),
),
);
},
),

Excuse me, i want to make subtitle and sub subtitle. but in your library only provide subtitle. and i try to make a column in subtitle like this. but i got error "The expression doesn't evaluate to a function, so it can't be invoked."

subtitle: (index, item) => widget( child: Column(children: <Widget>[ Text(NumberFormat.currency( locale: "id", symbol: 'Rp ', decimalDigits: 0) .format(int.parse(item['harga'].split(".")[0]))), Text(item['working_duration']) ]), )

One of the required inputs to SmartSelect is "title", and the default display color for the title is black. How can I modify the color?

Since the title is expecting a String, I was hoping if you can change it to accept Text so the the title can be styled.

Right now the title when on an AlertDialog/Popup could be around 20 or 24.

So I found that if top want the S2TileChips widget to be scrollable, you can only have them in a horizontal scroll direction. Would be nice to have the choice to make it vertical as it looks better for long lists of values

I'm unable to find any feature that lets me select/deselect items programatically. Use case would be , a user selects an item from one page and navigates to another where he can edit his selection. I would like the previously selected option to be marked as selected on the edit page.

I've tried setting the selected value to true but it's not doing anything.
My code is as below

choiceOptions.add( S2Choice<String>( value: choiceOptions.length.toString(), title: _service.name, selected: true, ), );

how can I use smart select such that it allows me to select only one option from every group made in it?

i expect that the init value would be from SharedPreferences,so i invoke initSoundSetting,but when loading page ,it always displays null

class _StudyModelSoundSettingState extends State<StudyModelSoundSetting>{
  
  int soundSetting;
  void initState(){
    super.initState();
    initSoundSetting();
  }
  
  void initSoundSetting()async{
    final SharedPreferences prefs = await widget.sp;
    final soundSettingValue = prefs.getInt('soundSetting');
    this.setState(() {
      this.soundSetting = soundSettingValue==null?4:soundSettingValue;
    });
  }
  
  void changeSoundSetting(int newValue)async{
    final SharedPreferences prefs = await widget.sp;
    setState(() {
      this.soundSetting = newValue;
    });
    prefs.setInt('soundSetting', newValue);
  }
  
  List<S2Choice<int>> soundSettingOptions=[
    S2Choice<int>(value:1,title:'正常'),
    S2Choice<int>(value:2,title:'震动'),
    S2Choice<int>(value:3,title:'静音'),
    S2Choice<int>(value:4,title:'系统预设'),
  ];
  
  Widget build(BuildContext context){
    print(this.soundSetting);
    return SmartSelect<int>.single(
        title:'铃声模式',
        choiceItems:soundSettingOptions,
        modalType: S2ModalType.bottomSheet,
        value: this.soundSetting,
        onChange: (state){
          changeSoundSetting(state.value);
        },
    );
  }
}

Hello,
Is there any option to select all options in multi-select mode? I couldn't find it in the docs.

I can help if it's not there.

Thanks

Is there a option to change the background color of the chips? Or how can I achieve this is done in the "Chips Widget" Example.

Custom data filtering is the current component when it is empty

I have several smart sheets along with TextFields in a form. When I click on a textfield, enter some info in and then click on a smart select, the keyboard correctly hides, however when I make my selection the smart select bottom modal retracts but then the keyboard comes back with the focus on the previously active textfield.

I've looked for a hook in smart select for when the modal opens but I can't find one - I'd like to run FocusScope.of(context).unfocus(); when the bottom sheet is triggered.

I tried adding it to onChanged but the previous textfield still retains focus.

Interestingly, this is working well for a CheckboxListTile I have in the form:

CheckboxListTile(
      isThreeLine: true,
      value: model.productState.v1 ?? false,
      onChanged: (value) {
        FocusScope.of(context).unfocus();
        model.v1 = value;
      },
      title: Text('khabdfr?'),
      checkColor: Colors.green,
   
 ),

Or is there another solution to the issue? Thanks

I'm trying out the library and attempting to add a modal. I've copied over the modal example and run into compile issues when building the project, related to barrierColor not being found. I've tried including it in the S2ModalConfig, but no luck. I'm using the latest version 4.3.2.

Error log:

Compiler message:
../../Flutter/fluttersdk/.pub-cache/hosted/pub.dartlang.org/smart_select-4.3.2/lib/src/widget.dart:1023:11: Error: No named parameter with the name 'barrierColor'.
          barrierColor: modalConfig.barrierColor,
          ^^^^^^^^^^^^
../../Flutter/fluttersdk/packages/flutter/lib/src/material/dialog.dart:898:11: Context: Found this candidate, but the arguments don't match.
Future<T> showDialog<T>({
          ^^^^^^^^^^

Sample code with error

import 'package:flutter/material.dart';
import 'package:mindfulness_reminders/ui_res/TextStyles.dart';
import 'package:smart_select/smart_select.dart';

class AddReminderScreen extends StatefulWidget {
  @override
  _AddReminderScreenState createState() => _AddReminderScreenState();
}

class _AddReminderScreenState extends State<AddReminderScreen> {

  List<S2Choice<String>> days = [
    S2Choice<String>(value: 'mon', title: 'Monday'),
    S2Choice<String>(value: 'tue', title: 'Tuesday'),
    S2Choice<String>(value: 'wed', title: 'Wednesday'),
    S2Choice<String>(value: 'thu', title: 'Thursday'),
    S2Choice<String>(value: 'fri', title: 'Friday'),
    S2Choice<String>(value: 'sat', title: 'Saturday'),
    S2Choice<String>(value: 'sun', title: 'Sunday'),
  ];

  String _day = 'fri';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Add Reminder'),
        ),
        body: Column(children: <Widget>[
          SmartSelect<String>.single(
            title: 'Days',
            value: _day,
            choiceItems: days,
            onChange: (state) => setState(() => _day = state.value),
            modalConfig: S2ModalConfig(
              type: S2ModalType.fullPage,
              barrierColor: Colors.black54
            ),
          ),
        ]));
  }
}

Also, the same error happens when using the sample code from the home page

import 'package:flutter/material.dart';
import 'package:mindfulness_reminders/ui_res/TextStyles.dart';
import 'package:smart_select/smart_select.dart';

class AddReminderScreen extends StatefulWidget {
  @override
  _AddReminderScreenState createState() => _AddReminderScreenState();
}

class _AddReminderScreenState extends State<AddReminderScreen> {

  String value = 'flutter';
  List<S2Choice<String>> options = [
    S2Choice<String>(value: 'ion', title: 'Ionic'),
    S2Choice<String>(value: 'flu', title: 'Flutter'),
    S2Choice<String>(value: 'rea', title: 'React Native'),
  ];


  @override
  Widget build(BuildContext context) {
    return SmartSelect<String>.single(
                title: 'Frameworks',
                value: value,
                choiceItems: options,
                onChange: (state) => setState(() => value = state.value)
            );
  }
}

when the value is set somewhere outside SmartSelect widget using setState, the S2Tile doesnt get redrawn. Forcing to redraw the widget by adding 'key' would result in error like mentioned in the subject.

          SmartSelect<String>.single(
            key: UniqueKey(),
            title: 'Category',
            value: categorySelected,```

I am trying to customize the confirmation widget using confirmationBuilder but I can't seem to get the right syntax. Is there an example anywhere that does this?

https://pub.dev/documentation/smart_select/latest/smart_select/SmartSelectModalConfirmationBuilder.html

Here is what I am attempting:

modalConfig: SmartSelectModalConfig(
  useConfirmation: true,
  confirmationBuilder: (context, () {
    return InkWell(
      child: Text('Send'),
      onTap: () {},
    );
  })
),

Is there a way to use smart select with type ahead functionality - that is to present the user with a text field and as they type the options are returned "live" from an async function?

The use case is I have 1000s of records which I would like the user to start typing to filter them down to ultimately select one, maintaining all the same styling as smart select.

Hi man, first of all great package, thanks for you work.

I saw that the package is not tested, so i want to test the component on my side.

Right now i can't test the onChange callback for example.

It would help me a lot if you could export ChoicesItem for example, so i can test the stuff.

Such a feature rich package. Thanks! However, it would be nice to be able to customize each list option. Why not implement a child parameter or make the required title parameter accept a type of Widget instead of just a String.

If the app theme changes while dialog/page/bottomsheet is opened, then these changes are not being applied. Only the background color changes unless it is overridden.

The theming is correct after closing and reopening.

I would like to select all when click in a button on header in modalConfirmBuilder without close the modal, how should I proceed?

@override
  Widget build(BuildContext context) {
    return SmartSelect<int>.multiple(
      choiceType: S2ChoiceType.checkboxes,
      modalConfirm: true,
      modalFilter: filter,
      choiceItems: list.map(toChoice).toList(),
      onChange: (state) => onSelect(state.value),
      value: selecionados,
      title: label,
      tileBuilder: (context, state) => _getItemLista(state, selecionados),
      modalFilterHint: '',
      modalConfirmBuilder: (context, value) => getModalConfirmBuilder(value),
    );
  }

  getModalConfirmBuilder(S2MultiState<int> value) {
    return Row(
      children: [
        IconButton(icon: Icon(FontAwesomeIcons.checkDouble), 
          onPressed: () {
            // code here
              
            //
          },
        ),
        IconButton(icon: Icon(FontAwesomeIcons.check, size: 14), 
          onPressed: () {
            value.closeModal();
          },
        )
      ]
    );
  }

To safely refer to a widget's ancestor in its dispose() method

Hi
Thank you for this usefull package .
how i can change direction in SmartSelectModal ?

Excuse me, Could I edit the magin , height or style by myself?

When I use grouped choices, the groups are ordered alphabetically.
Is it possible to disable this feature?

P.s:
I believe it is not implemented.
I cloned the repository and removed line 83 in flutter_smart_select/lib/src/choices.dart and it worked perfectly.
Please add a feature that allows us to disable that automatic sorting.