danvick / flutter_chips_input Goto Github PK
View Code? Open in Web Editor NEWFlutter input field that takes in Material Chips as entries
Home Page: https://pub.dev/packages/flutter_chips_input
License: BSD 2-Clause "Simplified" License
Flutter input field that takes in Material Chips as entries
Home Page: https://pub.dev/packages/flutter_chips_input
License: BSD 2-Clause "Simplified" License
I tried to use 'onChipTapped' as described here:
https://pub.dev/documentation/flutter_chips_input/latest/flutter_chips_input/ChipsInput/onChipTapped.html
It seems to be not yet implemented. Any chance to get that functionality soon?
I am using version 1.5.1.
flutter -v
Flutter 1.1.10-pre.37 • channel master • https://github.com/flutter/flutter.git
Framework • revision 30ba6575c0 (6 hours ago) • 2019-01-11 07:52:09 -0800
Engine • revision e5ec3cf3ea
Tools • Dart 2.1.1 (build 2.1.1-dev.0.1 2cb346bd0c)
flutter run:
...
Compiler message:
file:///Users/Ryan/Applications/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_chips_input-1.0.3/lib/src/chips_input.dart:34:7: Error: The
non-abstract class 'ChipsInputState' is missing implementations for these members:
- 'updateFloatingCursor'
Try to either
- provide an implementation,
- inherit an implementation from a superclass or mixin,
- mark the class as abstract, or
- provide a 'noSuchMethod' implementation.
class ChipsInputState<T> extends State<ChipsInput<T>>
^^^^^^^^^^^^^^^
file:///Users/Ryan/Applications/flutter/packages/flutter/lib/src/services/text_input.dart:605:8: Context: 'updateFloatingCursor' is defined here.
void updateFloatingCursor(RawFloatingCursorPoint point);
Reproduce : Wrap your package widget with this
GestureDetector( behavior: HitTestBehavior.deferToChild,// opaque or other fail too onTap: () { // both fail FocusScope.of(context).requestFocus(new FocusNode()); // FocusScope.of(context).unfocus(); },
Possible Solution
Give access to suggestionController so we can close it on demand.
Error
I/flutter (26409): │ [Unsupported operation: Cannot add to a fixed-length list, #0 FixedLengthListMixin.addAll (dart:_internal/list.dart:38:5)
I would firstly like to thank you guys for making this control open source and sharing it with the rest of us , you are making my life much easier , and I am very grateful for this.
I was wondering what you current thinking is regarding how you are going to be implementing the controller for this field ?
would you be creating custom type of controller like a ChipsEditingController or a ListEditingController for example ? I am curious as to what your current plans/way of thinking is ?
Flutter dev channel 1.18.0-6.0.pre
Compiler message:
/C:/Programs/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_chips_input-1.8.0/lib/src/chips_input.dart:64:7: Error: The non-abstract class 'ChipsInputState' is missing implementations for these members:
class ChipsInputState extends State<ChipsInput>
^^^^^^^^^^^^^^^
/C:/Programs/flutter/packages/flutter/lib/src/services/text_input.dart:772:21: Context: 'TextInputClient.currentAutofillScope' is defined here.
AutofillScope get currentAutofillScope;
^^^^^^^^^^^^^^^^^^^^
Compiler message:
/C:/Programs/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_chips_input-1.8.0/lib/src/chips_input.dart:64:7: Error: The non-abstract class 'ChipsInputState' is missing implementations for these members:
Hi , I have suggestion, can we add manually the data to rebuild the chips. For example, if we input 5data to intialvalue. It will build 5chips. Can we have another input like addvalue , so that we can manually add data. Like once Chips rebuild ,it will get the new value from addvalue and build the number of chips. This not issue, just suggestion .
@danvick focus being removed after a chip selection
If I have maxChips=1 and I already selected a chip then the textController does not put the cursor even when we touch an empty space in the widget.
I understand that when number of chips is equal to maxChips, we can not add another chip. But still this does not mean we shouldn't be able to interact with the textController. Maybe the user wants to backspace an already selected chip instead of pressing X
on the chip.
Compilation is failing with v1.8.1 when used with web support and beta channel.
The backward break is due to a new interface method which will need implementing or a noSuchMethod provided.
https://flutter.dev/docs/release/breaking-changes/add-currentAutofillScope-to-TextInputClient
Compiler message:
/G:/flutter/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_chips_input-1.8.1/lib/src/chips_input.dart:65:7: Error: The non-abstract class 'ChipsInputState' is missing implementations for these
members: TextInputClient.currentAutofillScope
When i trying to run app i got below compile time error and app is not run.
Compiler message:
../../../FlutterHome/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_chips_input-1.9.3/lib/src/chips_input.dart:399:3: Error: Type 'AutofillScope' not found.
AutofillScope get currentAutofillScope => null;
Apples-MacBook-Pro-5:ZvolvFlutter apple$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.17.5, on Mac OS X 10.14.6 18G3020, locale en-IN)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 3.5)
[✓] Connected device (1 available)
• No issues found!
Works great! But there's an issue (only in iOS):
When pressing the keyboard's delete key after a chip, the app crashes. This is the log:
*** First throw call stack:
(
0 CoreFoundation 0x0000000105aa91bb __exceptionPreprocess + 331
1 libobjc.A.dylib 0x0000000105047735 objc_exception_throw + 48
2 CoreFoundation 0x0000000105aa9015 +[NSException raise:format:] + 197
3 CoreFoundation 0x00000001059f12d3 -[__NSCFString substringWithRange:] + 163
4 UIKitCore 0x000000010eaccc6e -[TIDocumentState(UITextInputAdditions) copyTextInRange:fromDocument:] + 92
5 UIKitCore 0x000000010eacd620 -[TIDocumentState(UITextInputAdditions) initWithDocument:contextBoundary:] + 599
6 UIKitCore 0x000000010eaccab9 +[TIDocumentState(UITextInputAdditions) documentStateOfDocument:] + 69
7 UIKitCore 0x000000<…>
I think is a Flutter issue and not a problem with this package because I can replicate this in any TextField when trying to delete this >`< character. But I don't know if you have noticed this and if you know the solution to this crash.
Thanks!
Hi,
I'm getting this error when changing from one tab to another.
`════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown while finalizing the widget tree:
Looking up a deactivated widget's ancestor is unsafe.
At this point the state of the widget's element tree is no longer stable.
To safely refer to a widget's ancestor in its dispose() method, save a reference to the ancestor by calling inheritFromWidgetOfExactType() in the widget's didChangeDependencies() method.
When the exception was thrown, this was the stack:
#0 Element._debugCheckStateIsActiveForAncestorLookup. (package:flutter/src/widgets/framework.dart:3406:9)
#1 Element._debugCheckStateIsActiveForAncestorLookup (package:flutter/src/widgets/framework.dart:3420:6)
#2 Element.inheritFromWidgetOfExactType (package:flutter/src/widgets/framework.dart:3435:12)
#3 MediaQuery.of (package:flutter/src/widgets/media_query.dart:717:38)
#4 ChipsInputState._recalculateSuggestionsBoxHeight. (package:flutter_chips_input/src/chips_input.dart:124:41)
...`
Hi,
Im trying to disable modifications by setting the "enabled" attribute to false.
Even tho i set it to false i'm still able to to add and remove values.
Running Flutter 1.20.2
Hello,
I would like to be able to style overlay component? Would it be possible to get a OverlayBuilder or similar to create that component individually?
Best regards
How to edit pervious chips?
means by deleting one character, now the chips will be removed but I want to delete last character of the chip
I have added an initial list to InputChip widget, want to add chip on setState method.
My list gets updated but chip not displayed on UI. Please help.
I'm using 1.6.0 version.
If I am not mistaken, ChipInput
widget has a problem with its focus mechanics. When ChipInput
is in focus and zero suggestions are shown and for example I select a FormBuilderRadio
item, ChipInputs
keyboard is still open and I can still type inside of it. Normally when we select the RadioButton
or any other widget, the keyboard should disappear.
Hello, im new in flutter, can anyone help to adding existing users to this widget?
When using the ChipsInput Widget, I often observe a strange behaviour when typing and it leads to a keyboard failure.
I can illustrate the bug with this video.
Does anyone has observed a similar behaviour ?
I updated my flutter, and I got the following errors.
Compiler message:
/D:/apps/flutter/.pub-cache/hosted/pub.flutter-io.cn/flutter_chips_input-1.7.0/lib/src/chips_input.dart:64:7: Error: The non-abstractclass 'ChipsInputState' is missing implementations for these members:
- TextInputClient.showAutocorrectionPromptRect
Try to either
- provide an implementation,
- inherit an implementation from a superclass or mixin,
- mark the class as abstract, or
- provide a 'noSuchMethod' implementation.
class ChipsInputState<T> extends State<ChipsInput<T>>
^^^^^^^^^^^^^^^
/D:/apps/flutter/packages/flutter/lib/src/services/text_input.dart:764:8: Context: 'TextInputClient.showAutocorrectionPromptRect' is
defined here.
void showAutocorrectionPromptRect(int start, int end);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Flutter 1.18.0-5.0.pre.99 • channel master • https://github.com/flutter/flutter.git
Framework • revision 812885c179 (3 hours ago) • 2020-04-12 23:40:01 -0400
Engine • revision 926f6fcbbc
Tools • Dart 2.8.0 (build 2.8.0-dev.20.0 8ef508ba36)
Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.18.0-5.0.pre.99, on Microsoft Windows [Version 10.0.18363.720], locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Chrome - develop for the web
[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.4.4)
[✓] Android Studio (version 3.6)
[✓] VS Code, 64-bit edition (version 1.44.0)
[✓] Connected device (3 available)
• No issues found!
It is similar to #27.
After running flutter upgrade
, my build breaks because fluttter_form_builder
3.12.3 depends on flutter_chips_input
1.8.3 which is not compatible for Flutter 1.20.
What is the prescribed solution? Will there be an official 1.9.0 release?
Hey! My problem is as following and I'm pretty sure it's a problem with the library because my code is the code from example but only attached to my state.
Type only one character into the input and select something from suggestions, then start typing again. The just added chip disappears and it becomes an ordinary text.
When you put only two characters it doesn't happen. When you select a suggestion without typing anything, it doesn't happen too.
It would be nice to have an option to position the overlay above the input, so it will work when input is at the bottom of the page, with keyboard opened.
ChipsInput(maxChips: 1)
I've assigned maxChips value to 1 then it actually work, but when the chip was remove by keyboard and I try to add a new one, it's not showing the suggestion box.
flutter doctor -v
[√] Flutter (Channel master, v1.13.6-pre.16, on Microsoft Windows [Version 10.0.18363.535], locale en-US)
• Flutter version 1.13.6-pre.16 at C:\src\flutter
• Framework revision fcaf9c4070 (13 hours ago), 2019-12-21 14:03:01 -0800
• Engine revision 33813929e3
• Dart version 2.8.0 (build 2.8.0-dev.0.0 886615d0f9)
Compiler message:
/C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_chips_input-1.6.1/lib/src/chips_input.dart:62:7: Error: The non-abstract class 'ChipsInputState' is missing implementations for these members:
- TextInputClient.currentTextEditingValue
Try to either
- provide an implementation,
- inherit an implementation from a superclass or mixin,
- mark the class as abstract, or
- provide a 'noSuchMethod' implementation.
class ChipsInputState<T> extends State<ChipsInput<T>>
^^^^^^^^^^^^^^^
/C:/src/flutter/packages/flutter/lib/src/services/text_input.dart:757:24: Context: 'TextInputClient.currentTextEditingValue' is defined here.
TextEditingValue get currentTextEditingValue;
^^^^^^^^^^^^^^^^^^^^^^^
Target kernel_snapshot failed: Exception: Errors during snapshot creation: null
build failed.
Well. It doesn't work.
[✓] Flutter (Channel beta, 1.19.0-4.1.pre, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Chrome - develop for the web
[!] Android Studio (version 4.0)
✗ Flutter plugin not installed
[!] Android Studio (version 3.6)
✗ Flutter plugin not installed
[✓] VS Code (version 1.42.1)
[✓] Connected device (3 available)
! Doctor found issues in 2 categories.
build logs:
Launching lib/main.dart on Android SDK built for x86 in debug mode...
Compiler message:
../../../.pub-cache/hosted/pub.dartlang.org/flutter_chips_input-1.8.2/lib/src/chips_input.dart:88:7:
Error: The non-abstract class 'ChipsInputState' is missing implementations for these members:
- TextInputClient.currentAutofillScope
class ChipsInputState<T> extends State<ChipsInput<T>>
^^^^^^^^^^^^^^^
../../../.local/flutter/packages/flutter/lib/src/services/text_input.dart:769:21: Context:
'TextInputClient.currentAutofillScope' is defined here.
AutofillScope get currentAutofillScope;
^^^^^^^^^^^^^^^^^^^^
Target kernel_snapshot failed: Exception: Errors during snapshot creation: null
build failed.
FAILURE: Build failed with an exception.
* Where:
Script '/home/ololosha228/.local/flutter/packages/flutter_tools/gradle/flutter.gradle' line: 896
* What went wrong:
Execution failed for task ':app:compileFlutterBuildDebug'.
> Process 'command '/home/ololosha228/.local/flutter/bin/flutter'' finished with non-zero exit value 1
BUILD FAILED in 12s
Exception: Gradle task assembleDebug failed with exit code 1
It COULD be something wrong with flutter, gradle, or dart, but i tested building on multiple projects, and currently all compilation error referencing on flutter_chips_input package.
The color focus highlighting of the suggestions list is wrong. This screen shows the mouse hovering above the first suggestion entry, but the second one is highlighted with a different background color:
I used flutter_chips_input version 1.5.1. Output of flutter doctor is:
tom$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.10.13-pre.12, on Mac OS X 10.14.6 18G103, locale de-DE)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 11.0)
[✓] Chrome - develop for the web
[!] Android Studio (version 3.4)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.38.1)
[✓] Connected device (3 available)
! Doctor found issues in 1 category.
When we try 2 input chips in a single page into a column its start to deleting error when click on delete button right side of chip
Is there a setting in the same way the typeahead flutter form plugin direction: AxisDirection.up
to define which direction the suggestionBuilder dropdown appears? FYI I am using flutter_chips_input via flutter_form_builder
The issue is when bringing focus to the formfield, the form bring the field to the top of the page (doesn't seem to do this for any other fields) and the box appears upwards
This widget doesn't make the SingleChildScrollView view to scroll when it enters focus with an opened keyboard like a normal TextField does, it's quite annoying.
Moreover, it doesn't expose his internal FocusNode, so it's hard to compensate.
Sometime I need _chips's info,like length. But there is no way to get it. Need help
through onchange is too magic
Suggestion create a possibility to add new chips via controller(or something like that, by programming way, I meant) because it can be need sometimes for updating widget.
I am talking about iOS now: How can I make the keyboard dark theme or lightTheme? is it related to this package? And also how can we show a numpad instead of a letter keyboard?
Hello
I would like to limit the length in the input field like it is done with a regular TextField
Is this possible?
When clicking "close" icon, this error is thrown:
package:flutter/src/services/text_input.dart': Failed assertion: line 664 pos 12: 'attached': is not true
with the following stack trace:
#2 TextInputConnection.setEditingState (package:flutter/src/services/text_input.dart:664:12) #3 ChipsInputState._updateTextInputState (package:flutter_chips_input/src/chips_input.dart:338:17) #4 ChipsInputState.deleteChip.<anonymous closure(package:flutter_chips_input/src/chips_input.dart:211:9) #5 State.setState (package:flutter/src/widgets/framework.dart:1141:30) #6 ChipsInputState.deleteChip (package:flutter_chips_input/src/chips_input.dart:209:7)
Resolution
Add guard against calling setEditingState in detached mode.
Suppose i have a dropdown and flutter chips input
dropdown values= ['1','2'];
on selecting 1 from dropdown i can select anyone from A,B,C in chips input
on selecting 2 from dropdown i can select anyone from D,E,F in chips input
Scenario if i select 1 from drop down and A,C in chips input,,
Now i changed my mind and select 2 from dropdown ,,, now how can i clear the previously selected values A,C from chips input automatically when there is a change/swap ,,,, without manually deleting it,
Presently how it works now is Upon selection of dropdown value 2 ,A,C still remains unless i delete it manally, and I can select anyone from D,E,F now since the dropdown value is 2
So expected behaviour is dropdown value 1 and chip input A,C
when i select 2 from dropdown it should clear A,C to take in fresh values
Similar to #20 ,
When the suggestionBuilder is a RaisedButton(), and you hover over the list items, the hitbox for the hover is offset from the top. It doesn't affect the actual touch functionality.
This is not obvious on android, but is visible on web.
It looks like flutter API changed.
performPrivateCommand() is a new method need to be implemented
Using this widget on the pre-release (version 1.9.0-dev.3) on the latest version of flutter web and it just crashes when choosing an option.
Works fine on android.
Error message:
Finished with error: Bad UTF-8 encoding found while decoding string: TextEditingValue(text: ┤�├, selection: TextSelection(baseOffset: 1, extentOffset: 1, affinity: TextAffinity.downstream, isDirectional: false), composing: TextRange(start: -1, end: -1))
. The Flutter team would greatly appreciate if you could file a bug or leave a comment on the issue https://github.com/flutter/flutter/issues/15646.
The source bytes were:
[84, 101, 120, 116, 69, 100, 105, 116, 105, 110, 103, 86, 97, 108, 117, 101, 40, 116, 101, 120, 116, 58, 32, 226, 148, 164, 239, 191, 189, 226, 148, 156, 44, 32, 115, 101, 108, 101, 99, 116, 105, 111, 110, 58, 32, 84, 101, 120, 116, 83, 101, 108, 101, 99, 116, 105, 111, 110, 40, 98, 97, 115, 101, 79, 102, 102, 115, 101, 116, 58, 32, 49, 44, 32, 101, 120, 116, 101, 110, 116, 79, 102, 102, 115, 101, 116, 58, 32, 49, 44, 32, 97, 102, 102, 105, 110, 105, 116, 121, 58, 32, 84, 101, 120, 116, 65, 102, 102, 105, 110, 105, 116, 121, 46, 100, 111, 119, 110, 115, 116, 114, 101, 97, 109, 44, 32, 105, 115, 68, 105, 114, 101, 99, 116, 105, 111, 110, 97, 108, 58, 32, 102, 97, 108, 115, 101, 41, 44, 32, 99, 111, 109, 112, 111, 115, 105, 110, 103, 58, 32, 84, 101, 120, 116, 82, 97, 110, 103, 101, 40, 115, 116, 97, 114, 116, 58, 32, 45, 49, 44, 32, 101, 110, 100, 58, 32, 45, 49, 41, 41, 10]
flutter doctor
output:
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, 1.19.0-4.3.pre, on Microsoft Windows [Version 10.0.18362.900], locale en-US)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[√] Chrome - develop for the web
[√] Android Studio (version 4.0)
[√] Connected device (3 available)
Thanks for the awesome package! You are a life saver!
Would be great if you can add a chip by selecting "Done" on the keyboard. Currently i have a chip input that is limited to a single chip. The users sometimes forget to select the overlay before continuing, causing the chip not to be selected.
Ex.
It would be great to type something, and select done on the keyboard to dismiss the keyboard, and add the keyboard content as a chip
I would like to have few enhancements, I would like to create a PR and fix em if anyone knows the solution to any
I think there should be a ChipInputController having access to validators, suggestion controller.
1- Access to suggestion controller to open and close on demand, like close controller when other formfield is focused
2- Optional suggestion dropdown. Instead I would like to use your input for input and build a custom list myself below your input field
3- Need validators at least 1 - non null validator. Could be minChips 1 and isMinChipValid
4- Access to onFocus and onUnfocus which can be used for validation
I use your chipsinput in a bottomsheet to alter ingredients of a pizza.
When I enter the ingredient in the chipsInputField and then add the pizza to my cart it throws this error:
I/flutter ( 9501): Initializing focus node
════════ (3) Exception caught by foundation library ════════════════════════════════════════════════
setState() called after dispose(): ChipsInputState#a3c70(lifecycle state: defunct, not mounted)
════════════════════════════════════════════════════════════════════════════════════════════════════
already tried to add if(mounted)
but it does not work.
and later when I open my cart page it throws the following error even though I have no keyboard action or nothing that would need a FocusNode on my cart page.
Unhandled Exception: A FocusNode was used after being disposed.
E/flutter ( 9501): Once you have called dispose() on a FocusNode, it can no longer be used.
The error then continues on every action throughout the whole app like the FocusNode is still trying to be called somehow till I restart the app.
After the error is thrown the suggestionBox cannot be opened anymore.
And then if I close the cart to go back to my menu it throws the error
Looking up a deactivated widget's ancestor is unsafe.
and opens my keyboard automatically
Any suggestion on how to solve this problem?
When you execute the flutter run
command, you will get an error abour RawFloatingCursorPoint
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.