Skip to content

Conversation

@andreacioni
Copy link
Contributor

@andreacioni andreacioni commented Jul 14, 2023

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:

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.

Pre-launch Checklist

  • I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
  • I read the [Tree Hygiene] wiki page, which explains my responsibilities.
  • I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement].
  • I signed the [CLA].
  • I listed at least one issue that this PR fixes in the description above.
  • I updated/added relevant documentation (doc comments with ///).
  • I added new tests to check the change I am making, or this PR is [test-exempt].
  • All existing and new tests are passing.

@github-actions github-actions bot added d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos labels Jul 14, 2023
@TahaTesser TahaTesser self-requested a review July 15, 2023 09:22
@TahaTesser
Copy link
Member

@andreacioni
Copy link
Contributor Author

Yeah 😅, I'm figuring these out. I'll try to fix them in a couple of days.

@goderbauer goderbauer added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Jul 17, 2023
@github-actions github-actions bot removed framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Jul 17, 2023
@TahaTesser TahaTesser added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Jul 18, 2023
@TahaTesser
Copy link
Member

Hi @andreacioni
Thanks for contributing a new example

  1. Can you describe all the functionalities in this example in the description?
  2. Describe the example code structure.
  3. I can see visual misalignments on desktop
    Screenshot 2023-07-18 at 14 42 44
  4. Backspace doesn't delete text on the desktop, just the web. Is this an example issue or Flutter itself?

@andreacioni
Copy link
Contributor Author

Hi @TahaTesser, Thanks for your time too. I'm really enjoying contributing to these project!

I've updated the description but I've some questions related to the other points:

Describe the example code structure.

Where it should be the best place to describe it? Here or the PR or in the code itself?

I can see visual misalignments on desktop

Are you talking about the Search hint text or the label?

Backspace doesn't delete text on the desktop, just the web. Is this an example issue or Flutter itself?

Which OS are you using? Mac or Windows? I'm not able to reproduce on Mac OS X .

@TahaTesser
Copy link
Member

TahaTesser commented Jul 20, 2023

Where it should be the best place to describe it? Here or the PR or in the code itself?

In the description, please explain the code structure. I can see there several things happening in ChipsInput and MainScreen

Are you talking about the Search hint text or the label?

Yes, you can "Seerch" text isn't aligned with the prefix icon. please make sure there are no visual or functionality issues.

Which OS are you using? Mac or Windows? I'm not able to reproduce on Mac OS X .

Mac. Type some text and try to delete it with the backspace or delete key.

Screenshot 2023-07-20 at 12 35 33

@andreacioni
Copy link
Contributor Author

andreacioni commented Jul 22, 2023

Hi @TahaTesser,

some updates about:

Mac. Type some text and try to delete it with the backspace or delete key.

I guess this is related to another issue that involves Mac OS X platform. I can't do much here if it won't be solved. The problem is related to the main component (TextInputClient) that I'm using in the example.

give up using scrollable content because of the misalignment that caused on the hint
@andreacioni
Copy link
Contributor Author

Description is now updated. Let me know if you need more details.

Copy link
Member

@TahaTesser TahaTesser left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did some simplifications and cleanup.

@TahaTesser
Copy link
Member

This also requires some functionality tests and documentation.

See examples are documented in https://github.com/flutter/flutter/pull/128295/files

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 3, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 3, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 4, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 4, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 5, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 5, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 5, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 6, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 6, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 6, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 6, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 6, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 6, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 6, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 6, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

autosubmit Merge PR when tree becomes green via auto submit App d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants