Unverified Commit 400702d1 authored by Andrea Cioni's avatar Andrea Cioni Committed by GitHub

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`.
parent 62fb15a6
This diff is collapsed.
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'package:flutter_api_samples/material/input_chip/input_chip.1.dart'
as example;
import 'package:flutter_test/flutter_test.dart';
void main() {
final String replacementChar = String.fromCharCode(
example.ChipsInputEditingController.kObjectReplacementChar);
testWidgets('User input generates InputChips', (WidgetTester tester) async {
await tester.pumpWidget(
const example.EditableChipFieldApp(),
);
await tester.pumpAndSettle();
expect(find.byType(example.EditableChipFieldApp), findsOneWidget);
expect(find.byType(example.ChipsInput<String>), findsOneWidget);
expect(find.byType(InputChip), findsOneWidget);
example.ChipsInputState<String> state =
tester.state(find.byType(example.ChipsInput<String>));
expect(state.controller.textWithoutReplacements.isEmpty, true);
await tester.tap(find.byType(example.ChipsInput<String>));
await tester.pumpAndSettle();
expect(tester.testTextInput.isVisible, true);
// Simulating text typing on the input field.
tester.testTextInput.enterText('${replacementChar}ham');
await tester.pumpAndSettle();
expect(find.byType(InputChip), findsOneWidget);
state = tester.state(find.byType(example.ChipsInput<String>));
await tester.pumpAndSettle();
expect(state.controller.textWithoutReplacements, 'ham');
// Add new InputChip by sending the "done" action.
await tester.testTextInput.receiveAction(TextInputAction.done);
await tester.pumpAndSettle();
expect(state.controller.textWithoutReplacements.isEmpty, true);
expect(find.byType(InputChip), findsNWidgets(2));
// Simulate item deletion.
await tester.tap(find.descendant(
of: find.byType(InputChip),
matching: find.byType(InkWell).last,
));
await tester.pumpAndSettle();
expect(find.byType(InputChip), findsOneWidget);
await tester.tap(find.descendant(
of: find.byType(InputChip),
matching: find.byType(InkWell).last,
));
await tester.pumpAndSettle();
expect(find.byType(InputChip), findsNothing);
});
}
......@@ -42,6 +42,16 @@ import 'theme_data.dart';
/// ** See code in examples/api/lib/material/input_chip/input_chip.0.dart **
/// {@end-tool}
///
///
/// {@tool dartpad}
/// The following example shows how to generate [InputChip]s from
/// user text input. When the user enters a pizza topping in the text field,
/// the user is presented with a list of suggestions. When selecting one of the
/// suggestions, an [InputChip] is generated in the text field.
///
/// ** See code in examples/api/lib/material/input_chip/input_chip.1.dart **
/// {@end-tool}
///
/// ## Material Design 3
///
/// [InputChip] can be used for Input chips from Material Design 3.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment