mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
400702d1d6
New example for `InputChip` that demonstrate how to create/delete them based on user text inputs. The sample application shows a custom text area where user can enter text. After the user has typed and hits _Enter_ the text will be replaced with an `InputChip` that contains that text. Is it possible to continue typing and add more chips in this way. All of them will be placed in a scrollable horizontal row. Also is it possible to have suggestion displayed below the text input field in case the typed text match some of the available suggestions. Issue I'm trying to solve: - https://github.com/flutter/flutter/issues/128247 **Code structure:** The example app is composed of 2 main components that find places inside `MainScreen`: - `ChipsInput` - `ListView` `ChipsInput` emulates a `TextField` where you can enter text. This text field accepts also a list of values of generic type T (`Topping` in my example), that gets rendered as `InputChip` inside the text field, before the text inserted by the user. This widgets is basically an `InputDecorator` widget that implements `TextInputClient` to get `TextEditingValue` events from the user keyboard. At the end of the input field there is another component, the `TextCursor`, that is displayed just when the user give the focus to the field and emulates the carrets that `TextField` has. There are also some available callbacks that the user can use to capture events in the `ChipsInput` field like: `onChanged`, `onChipTapped`, `onSubmitted` and `onTextChanged`. This last callback is used to build a list of suggestion that will be placed just below the `ChipsInput` field inside the `ListView`. |
||
|---|---|---|
| .. | ||
| action_buttons | ||
| action_chip | ||
| animated_icon | ||
| appbar | ||
| autocomplete | ||
| bottom_navigation_bar | ||
| bottom_sheet | ||
| card | ||
| checkbox_list_tile | ||
| choice_chip | ||
| context_menu | ||
| date_picker | ||
| dialog | ||
| divider | ||
| drawer | ||
| dropdown | ||
| dropdown_menu | ||
| expansion_panel | ||
| expansion_tile | ||
| filter_chip | ||
| floating_action_button | ||
| ink | ||
| input_chip | ||
| input_decorator | ||
| list_tile | ||
| menu_anchor | ||
| navigation_bar | ||
| navigation_drawer | ||
| navigation_rail | ||
| page_transitions_theme | ||
| paginated_data_table | ||
| popup_menu | ||
| progress_indicator | ||
| radio_list_tile | ||
| refresh_indicator | ||
| reorderable_list | ||
| scaffold | ||
| search_anchor | ||
| slider | ||
| switch | ||
| switch_list_tile | ||
| tabs | ||
| text_button | ||
| text_field | ||
| theme_data | ||
| time_picker | ||
| toggle_buttons | ||
| tooltip | ||