davigmacode / flutter_chips_choice Goto Github PK

How to validate the choice, ex: at least one choice selected or should display error message?

hello bro,
How can I change the color of the check mark?

I have code:

Future<List<C2Choice>> getChildHashTags(String element) async {
.....
}

then:

choiceLoader: getChildHashTags("cat")

=> show error:
The argument type 'Future<List<C2Choice>>' can't be assigned to the parameter type 'Future<List<C2Choice>> Function()'.

Thanks.

With upgrading to version 3 I cannot figure out how to make hoveredStyle dynamic - I need to have different hovered color depending on which item I'm hovering on - one color for selected and another for non-selected chips.

Tried the small snippet and didnt work in my project. Then tried the example code from this repository and it's not upgraded to null safety standards so can't run without some work.

I am using choice chips. how to fetch API data in Works with FormField and Validator Section

Please refer to the image below I want to fetch API Data to the green Rectangle Section.. I don't want a red rectangle model.. How to do it....

Add ScrollController to The SingleChildScrollView with the option to control the scrolling this will help improve the scrolling in the web because the web has issues with scrolling horizontally using the mouse.

How do I use the disabled Style with different colors, when I have marked and others unmarked?

Hello! excellent widget! Thank you very much for creating and maintaining it. I just tried the latest version without problems on IOS, but on MacOS I can't get to move the chips horizontally by dragging with the mouse. The code is the first one you have published in the readme, called 'Simple usage'.

Thank you.

I have a single horizontal line of chips. The list is long, so the chips scroll off the screen.

If I set the initial value to an item which is off screen e.g. 4, the list still shows item 0 as the first left-most item, and the selected item (4) is not in view.

Is this behaviour as expected? I would have expected the left most chip to be the selected one.

ChipsChoice.single(
value: 4,
padding: const EdgeInsets.fromLTRB(6, 4, 0, 0),
options: ChipsChoiceOption.listFrom<int, String>(
source: model.chipItems.map((e) => e.name).toList(),
value: (i, v) => i,
label: (i, v) => v,
),
onChanged: (val) {
setState(() {
selectedChip = val;
});
}
)

I get the error:

type 'EdgeInsets' is not a subtype of type 'bool'

if I set a margin like this: margin: EdgeInsets.all(10)

the problem is found here:

padding: config.margin ?? isWrapped ? const EdgeInsets.all(0) : const EdgeInsets.all(5)

Is there a pull request to convert this useful tool to a null safe one? Seems the author is not responsive

I have code: ...
choiceItems: C2Choice.listFrom<String, String>(
source: options,
value: (i, v) => v,
label: (i, v) => v,
tooltip: (i, v) => v,
),
...
tooltip not show ???

This package is giving this error during build.

Error: Method 'addPostFrameCallback' cannot be called on 'WidgetsBinding?' because it is potentially null.
 - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../Development/flutter/packages/flutter/lib/src/widgets/binding.dart').
Try calling using ?. instead.
    WidgetsBinding.instance.addPostFrameCallback((_) {
                            ^^^^^^^^^^^^^^^^^^^^


FAILURE: Build failed with an exception.

Changing WidgetsBinding.instance.addPostFrameCallback to WidgetsBinding.instance?.addPostFrameCallback solves the issue.

flutter doctor

[✓] Flutter (Channel stable, 2.10.5, on macOS 12.6 21G115 darwin-x64, locale en-IN)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.71.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

Can not change the text color if i change the background color,

labelStyle: TextStyle(
decorationColor: Colors.blue,
),

              selectedColor: Colors.red,
              selectedBrightness: Brightness.dark),

Is there a easy way to set background color for chips?

They always seem to be white now.

https://github.com/davigmacode/flutter_chips_choice/blob/master/lib/src/widget.dart

All lines containing clipBehavior: widget.clipBehavior

how to change color?

I believe you have to use choicechip instead of filterchip.

I would like to set a minimum chip width, if label is short.

Anyone tried using this with a custom theme? Is there any easy way for the chips to reflect colours of the custom theme being used?

Currently:

final Color effectiveBorderColor = data.selected
        ? secondaryColor.withOpacity(effectiveBorderOpacity)
        : primaryColor.withOpacity(effectiveBorderOpacity);

Where is style?.borderColor processing?
So the following code is doing nothing:

choiceStyle: C2ChoiceStyle(borderColor: Colors.red, borderWidth: 2, borderOpacity: 0.5);

When using ChipsChoice in a CupertinoApp, Flutter generates a runtime exception, even when the ChipsChoice constructor is inside a Material Widget.

Here is the exception I see in my app:
════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown building RawChip(dirty, dependencies: [_LocalizationsScope-[GlobalKey#f1873], _EffectiveTickerMode], state: _RawChipState#ff9ed(tickers: tracking 4 tickers)):
No MaterialLocalizations found.

RawChip widgets require MaterialLocalizations to be provided by a Localizations widget ancestor.
The material library uses Localizations to generate messages, labels, and abbreviations.

To introduce a MaterialLocalizations, either use a MaterialApp at the root of your application to include them automatically, or add a Localization widget with a MaterialLocalizations delegate.

The specific widget that could not find a MaterialLocalizations ancestor was: RawChip
dirty
dependencies: [_LocalizationsScope-[GlobalKey#f1873], _EffectiveTickerMode]
state: _RawChipState#ff9ed(tickers: tracking 4 tickers)
The ancestors of this widget were:
: ChipsChoice
dependencies: [_InheritedTheme, _LocalizationsScope-[GlobalKey#f1873]]
state: ChipsChoiceState#1ac60
: Material
type: canvas
dependencies: [_InheritedTheme, _LocalizationsScope-[GlobalKey#f1873], _EffectiveTickerMode]
state: _MaterialState#da9a7
: Flexible
flex: 1
: Column
direction: vertical
mainAxisAlignment: start
mainAxisSize: min
crossAxisAlignment: start
dependencies: [Directionality]
renderObject: RenderFlex#5c948 relayoutBoundary=up13 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
: Card
dependencies: [_InheritedTheme, _LocalizationsScope-[GlobalKey#f1873]]
: Material
type: canvas
dependencies: [_InheritedTheme, _LocalizationsScope-[GlobalKey#f1873], _EffectiveTickerMode]
state: _MaterialState#10a52
: Content
dependencies: [_InheritedTheme, _LocalizationsScope-[GlobalKey#f1873]]
state: _ContentState#8e5eb
: ListView
scrollDirection: vertical
primary: using primary controller
AlwaysScrollableScrollPhysics
dependencies: [PrimaryScrollController, MediaQuery]
: Padding
padding: EdgeInsets.all(5.0)
dependencies: [Directionality]
renderObject: RenderPadding#b8b0c relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
: CupertinoPageScaffold
dependencies: [MediaQuery, CupertinoUserInterfaceLevel, _InheritedCupertinoTheme]
state: _CupertinoPageScaffoldState#bcfea
: FilterPage
dependencies: [_InheritedTheme, _LocalizationsScope-[GlobalKey#f1873]]
state: _FilterPageState#93526
: CupertinoApp
state: _CupertinoAppState#d6f28
: Theme
ThemeData#202cb
: MyApp

Could you please update the package for Flutter 2.0 with Null Safety? Thanks

Reproduction Steps:

1. Create a ChipsChoice.multiple widget with multiple choice items using C2Choice.listFrom.
2. Define a style function to dynamically set the style properties of each chip based on its selected state.
3. Update the selected state of a chip by changing the value of the value property.
4. Observe that the style properties specified in the style function do not update unless an avatarText function is provided.

Expected Behavior:

When changing the selected state of a chip, the style properties specified in the style function should update accordingly, regardless of whether an avatarText function is provided.

Actual Behavior:

The style properties specified in the style function do not update unless an avatarText function is provided. Without an avatarText function, the style of the chips remains unchanged, even though the selected state changes.

Impact:

This issue affects applications that use the ChipsChoice widget and rely on dynamically updating the style of chips based on their selected state. It can lead to inconsistencies in the UI and hinder the ability to provide a consistent user experience.

Workaround:

A workaround for this issue is to provide an empty avatarText function even if it's not needed for the specific use case. This forces the ChipsChoice widget to update the style properties specified in the style function.

Environment:

Flutter version: 3.16.9 • channel stable
chips_choice package version: 3.0.1
Platform: All

Code Snippet:

ChipsChoice.multiple(
                value: selectedCashier,
                alignment: WrapAlignment.start,
                wrapCrossAlignment: WrapCrossAlignment.start,
                wrapped: true,
                padding:
                    const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                choiceItems: C2Choice.listFrom<String, CashierSummary>(
                  source: data.data!,
                  value: (index, item) => item.name,
                  label: (index, item) => item.name,
                  style: (index, item) {
                    final selected = selectedCashier.contains(item.name);
                    return C2ChipStyle(
                      borderRadius: const BorderRadius.all(Radius.circular(15)),
                      borderColor: Theme.of(context).colorScheme.primary,
                      backgroundColor: selected
                          ? Colors.White
                          : Colors.Brown,
                      foregroundColor: selected
                          ? Colors.White
                          : Colors.Brown,
                    );
                  },
                  avatarText: (index, item) {
                    bool selected = selectedCashier.contains(item.name);
                    return Icon(
                      selected
                          ? Icons.check_circle_outline
                          : Icons.circle_outlined,
                      color: !selected
                          ? Colors.White
                          : Colors.Brown,
                      size: 20,
                    );
                  },
                ),
                choiceStyle: C2ChipStyle(
                  borderRadius: const BorderRadius.all(Radius.circular(15)),
                  checkmarkColor: Theme.of(context).colorScheme.primary,
                  borderWidth: 2,
                  borderStyle: BorderStyle.solid,
                  backgroundOpacity: 1,
                ),
                onChanged: (values) {
                  ref
                      .read(selectedCashiersProvider.notifier)
                      .update((state) => state = values);
                },
              );

how to change fontsize?
i want to custom fontsize in chips coice

Does this still work? for the options don't remain selected when clicked. not in single mode nor multiple mode

    return Container(
      width: widget.width,
      height: widget.height,
      child: ChipsChoice<String>.multiple(
        value: selectedIndexes ?? [],
        choiceItems: choices ?? [],
        choiceStyle: C2ChipStyle.toned(),
        onChanged: (List<String> selectedItems) {
          setState(() {
            print(selectedItems);
          });
        },
      ),

Hi, first of all thanks a lot for this great library - saved us a lot of time already!

We were looking for a way to limit how many chips can be selected in ChipsChoice.multiple mode. If the limit is reached all other chips are disabled. We have already implemented this manually, but I think this would make a great addition to this library if it worked out of the box.

Edit: Here is how we are doing it at the moment (which is super simple anyways):

ChipsChoice.multiple(
  [...]
  choiceItems: C2Choice.listFrom(
    [...]
    disabled: (i, v) => !_selectedItems.contains(_allItems[i]) && _selectedItems.length >= _maxSelectedItems
  ),
)

Hello, I have a question，How to set the initial value？When I want to create multiple, I select several options by default。
my code is :
ChipsChoice.multiple(
value: widget.route._tags,
onChanged: (val) {
if (val.length < 7) {
setState(() {
widget.route._tags = val;
});
}
},
choiceItems: null,
choiceLoader: getChoices,
wrapped: true,
padding: EdgeInsets.only(top: 10, bottom: 10),
spacing: 10,
choiceBuilder: (item) {
return CustomChip(
label: item.label,
margin: const EdgeInsets.symmetric(vertical: 5),
width: (MediaQuery.of(context).size.width - 20 - 30) / 4,
height: 35,
selected: item.selected,
onSelect: item.select);
},
))

Currently there is the following code in C2Chip.build():

    final TextStyle defaultLabelStyle =
        TextStyle().merge(chipTheme.labelStyle).merge(style?.labelStyle);

    final TextStyle primaryLabelStyle =
        defaultLabelStyle.copyWith(color: foregroundColor);

    final TextStyle selectedLabelStyle = defaultLabelStyle.copyWith(
      color:
          isElevated ? Colors.white : secondaryColor.withAlpha(foregroundAlpha),
    );

So there is no way to specify font color for chips, because labelStyle color is just ignored. That leads to strange color combinations, for example blue background with opacity 0.12 and blue text with opacity 0.87 on it, which is barely readable.
Currently the following code is not working, though it definitely should:

choiceActiveStyle: C2ChoiceStyle(color: Colors.blue, opacity: 1, labelStyle: TextStyle().copyWith(color: Colors.yellow));

The disabled color, which is the background color of the chip doesn't change, even if changed to a different color, both in choiceStyle and choiceActiveStyle , using C2ChoiceStyle.

Here's the code snippet:

ChipsChoice<int>.single(
              value: tag,
              onChanged: (val) => setState(() => tag = val),
              choiceItems: C2Choice.listFrom<int, String>(
                source: options,
                value: (i, v) => i,
                label: (i, v) => v,
                tooltip: (i, v) => v,
              ),
              
              wrapped: true,
              choiceStyle: C2ChoiceStyle(
                color: Colors.grey[400],
                disabledColor: Colors.white,
                borderRadius: BorderRadius.all(
                  Radius.circular(5),
                ),
              ),
              choiceActiveStyle: C2ChoiceStyle(
                color: Colors.white,
                disabledColor: Colors.blue[200],
              ),
            ),

hi, cloud you give me an example how to implement with model class ?

my model class :

import 'package:flutter/material.dart';
import 'package:json_annotation/json_annotation.dart';
import '../utils/icon_model_converter.dart';
part 'option_model.g.dart';

@JsonSerializable()
class OptionModel {
  @JsonKey(
      disallowNullValue: true,
      fromJson: IconModelConverter.fromJson,
      toJson: IconModelConverter.toJson)
  final IconData? icon;
  final String label;
  late dynamic value;


  OptionModel(
      {this.icon,
      required this.label,
      required this.value
});

  factory OptionModel.fromJson(Map<String, dynamic> json) =>
      _$OptionModelFromJson(json);
  Map<String, dynamic> toJson() => _$OptionModelToJson(this);
}

I am putting the initial values ​​for the multiple choice, but the values ​​are not marked. How to make the values ​​can be marked in an initial way?

List _selectedCats = [
new Category(id: "001", name: "Cat 001"),
new Category(id: "003", name: "Cat 003"),
];
List _categories = [
new Category(id: "001", name: "Cat 001"),
new Category(id: "002", name: "Cat 002"),
new Category(id: "003", name: "Cat 003"),
];

Container(
child: ChipsChoice.multiple(
value: _selectedCats,
options: ChipsChoiceOption.listFrom<Category, Category>(
source: _categories,
value: (i, v) => v,
label: (i, v) => v.name,
),
onChanged: (val) {
setState(() => _selectedCats = val);
}),
)

please update it