flutter/examples
Andrea Cioni 400702d1d6
Add an example for InputChip generated by user input (#130645)
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`.
2023-09-01 00:02:04 +00:00
..
api Add an example for InputChip generated by user input (#130645) 2023-09-01 00:02:04 +00:00
flutter_view [Windows] Add target architecture to build path (#131843) 2023-08-31 09:09:02 -07:00
hello_world [Windows] Add target architecture to build path (#131843) 2023-08-31 09:09:02 -07:00
image_list Manual roll to engine commit 9b14c382 using Dart SDK version 3.2.x (#131371) 2023-07-27 17:33:07 +00:00
layers [Windows] Add target architecture to build path (#131843) 2023-08-31 09:09:02 -07:00
platform_channel [Windows] Add target architecture to build path (#131843) 2023-08-31 09:09:02 -07:00
platform_channel_swift Update flutter packages to pick up latest vm_service (#133335) 2023-08-25 11:03:35 -07:00
platform_view [Windows] Add target architecture to build path (#131843) 2023-08-31 09:09:02 -07:00
splash Manual roll to engine commit 9b14c382 using Dart SDK version 3.2.x (#131371) 2023-07-27 17:33:07 +00:00
texture Update flutter packages to pick up latest vm_service (#133335) 2023-08-25 11:03:35 -07:00
.clang-format Implement Linux part of examples (#108068) 2022-12-08 08:44:11 +13:00
flutter_gallery.readme Move flutter_gallery to the testing folder (#52532) 2020-03-16 10:31:42 +01:00
README.md Fix typo in README.md (#126053) 2023-05-04 14:58:17 +02:00

Flutter Examples

This directory contains several examples of using Flutter. To run an example, use flutter run inside that example's directory. See the getting started guide to install the flutter tool.

For additional samples, see the flutter/samples repo.

Available examples include:

Notes

Note on Gradle wrapper files in .gitignore:

Gradle wrapper files should normally be checked into source control. The example projects don't do that to avoid having several copies of the wrapper binary in the Flutter repo. Instead, the Gradle wrapper is injected by Flutter tooling, and the wrapper files are .gitignore'd to avoid making the Flutter repository dirty as a side effect of running the examples.