change items in button and trailing icon

[Raween]

First, my compliments to the creator of the plugin!

Is there a possibility to change the amount of items selected (in the image: Travel, Education, and 2 more). I would like to show all the chosen items.
Furthermore, is there a way to change the trailing icon?

thank you in advance!

[davigmacode]

Thanks for the kind words about the plugin! I'm glad you're finding it useful.

Here's how you can customize the PromptedChoice widget to achieve what you want:

Understanding anchorBuilder:

The anchorBuilder property in PromptedChoice provides a powerful way to control how the selected items are displayed. It's a function that takes two arguments:

anchorBuilder: (
  // This object holds information about the current selection state, including the selected values.
  ChoiceController<T> state, 
  // This is a function you can call to trigger the opening of the choice selection modal.
  VoidCallback openModal
) {
  final List<T> selectedValues = state.value;
  return InkWell(
    onPressed: openModal,
    child: selectedValues.isEmpty  
      ? const Text('Select Categories')
      : Text(selectedValues.join(', ')),
  );
}

By creating your own custom anchorBuilder function, you can define exactly how the selected items are presented, including truncation behavior and trailing icon.

Built-in anchor builders:

The package offers pre-built anchor builders using the ChoiceAnchor class. These provide a convenient way to customize the appearance of the anchor area in the PromptedChoice widget. Here's a breakdown of the two relevant options:

1. ChoiceAnchor.create<T>(...): This constructor allows you to configure various aspects of the anchor, including:

   • title: A widget to display a title above the selected items.
   • leading: A widget to display a leading icon or element.
   • trailing: A widget to display a trailing icon or element (often used for an arrow indicating a dropdown).
   • loading: A boolean that controls whether to display a loading indicator.
   • inline: A boolean that determines if the anchor displays inline with the title or as a separate block.
   • dense: A boolean that affects the spacing of the anchor.
   • placeholder: A string to display when no items are selected.
   • valueTruncate: An integer that controls the truncation behavior of selected items.

2. ChoiceAnchor.createUntitled<T>(...): This is a simplified version that omits the title property, assuming you don't need a separate title widget. It offers the same configuration options for leading, trailing, loading, dense, placeholder, and valueTruncate.

Changing the number of displayed items:

By default, the ChoiceAnchor.create truncates the number of selected items to 2 if inline: false and 1 if inline: true. You can modify the valueTruncate property to control this behavior.

anchorBuilder: ChoiceAnchor.create(
  valueTruncate: null, // Show all selected items
  valueTruncate: 0, // Show selected items count followed by " Selected"
  valueTruncate: 1, // Displays the truncated list of selected items, followed by "and (remaining count) more" if applicable
)

Customizing the Trailing Icon:

You can replace the default Icon(Icons.keyboard_arrow_right) with any other icon or a custom icon you create. For example, to use a checkmark icon:

anchorBuilder: ChoiceAnchor.create(
  trailing: const Icon(
    Icons.check,
    color: Colors.green,
  ),
)

Choosing the Right Approach:

While the built-in builders provide a good starting point, sometimes you might need more control over the display of selected items. This is where the custom anchorBuilder function comes in. You can implement any logic you need to format and display the selected items according to your specific requirements.

The package also offers components that can be helpful when creating your custom builder. These components provide built-in functionality for displaying selected values:

• ChoiceValueText: This component displays the selected values as text with optional truncation.
• ChoiceValueChips: This component displays selected values as chips, which can be a visually appealing way to represent multiple selections.

Exploring Undocumented Features:

It's always a good practice to check the source code on GitHub (https://github.com/davigmacode/flutter_choice) to explore potential features and stay updated on future releases. The documentation might not cover everything, so exploring the codebase can provide additional insights.

[Raween]

Thank you, this was a useful answer.