Comments (2)
Come Up with this solution
FormBuilderChipsInput<String>(
decoration: InputDecoration(
labelText: 'Skills',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.w),
borderSide: BorderSide.none,
),
),
name: 'skills',
maxChips: 5,
findSuggestions: (String query) {
if (query.isNotEmpty) {
var lowercaseQuery = query.toLowerCase();
List<String> res = skills.where((skill) {
return skill
.toLowerCase()
.contains(query.toLowerCase());
}).toList(growable: false)
..sort(
(a, b) =>
a.toLowerCase().indexOf(lowercaseQuery).compareTo(
b.toLowerCase().indexOf(lowercaseQuery),
),
);
if (res.isNotEmpty) return res;
return ['Add $query'];
} else {
return const [];
}
},
chipBuilder: (context, state, skill) {
return InputChip(
key: ObjectKey(skill),
label: Text(skill),
/* avatar: CircleAvatar(
backgroundImage: NetworkImage(skill.imageUrl),
), */
onDeleted: () => state.deleteChip(skill),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
);
},
suggestionBuilder: (context, state, skill) {
final bool isAddSkillPresent = skill.startsWith('Add');
final formattedSkill = skill.replaceAll('Add', '');
return Container(
alignment: Alignment.centerLeft,
child: InkWell(
onTap: () => state.selectSuggestion(formattedSkill),
child: Chip(
key: ObjectKey(skill),
// onDeleted: () => state.selectSuggestion(skill),
label: Text(
skill,
style: TextStyle(
fontWeight: isAddSkillPresent
? FontWeight.bold
: FontWeight.normal,
),
),
// avatar: const CircleAvatar(),
),
),
);
},
allowChipEditing: true,
suggestionsBoxMaxHeight: 300.h,
),
from flutter_chips_input.
A bit simpler solution:
return ChipsInput<String>(
decoration: const InputDecoration(
labelText: "Tags (optional)",
hintText:
"Type to get suggestions or add a new tag",
),
chipBuilder: (context, state, item) {
return InputChip(
key: ObjectKey(item),
label: Text(item),
onDeleted: () => state.deleteChip(item),
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
);
},
suggestionBuilder: (context, state, item) {
return ListTile(
key: ObjectKey(item),
title: Text(item),
onTap: () => state.selectSuggestion(item),
);
},
findSuggestions: (String query) {
if (query.isNotEmpty) {
final suggestions = {
tags.firstWhere(
(element) => element.name
.toLowerCase()
.contains(query.toLowerCase()),
orElse: () => query) // <= here we are "adding" the new entry to suggestions list
};
if (suggestions.isNotEmpty) {
return {...suggestions, HabitTag(name: query)} // <= here we make sure there is no duplicate
.toList();
}
}
return [];
},
onChanged: (t) {
print(t);
},
);
from flutter_chips_input.
Related Issues (20)
- Delay between typing text and getting a suggestion
- Compiler error after upgrading to Flutter 2.13.0-0.2.pre (Beta channel) HOT 1
- Error in TextInputClient for flutter 3 HOT 6
- Method 'addPostFrameCallback' cannot be called on 'WidgetsBinding?' because it is potentially null
- After version 2.0.0 can only enter a single character HOT 2
- Error: Method 'addPostFrameCallback' cannot be called on 'WidgetsBinding?' because it is potentially null.
- Cannot delete the initial value with normal delete button keyboard HOT 1
- Error on showing chips when adding suffix or prefix icons
- Changing background of the input area
- Keyboard backspace not registered HOT 1
- add in readme
- write @ then complete HOT 1
- How to not dismiss the suggestion list while choosing many suggestion at a time
- ChipsInputState missing performSelector override
- Add "@" as a char HOT 1
- Move this repository to Flutter form builder ecosystem HOT 1
- Not able to add more than 1 character and backspace also not working in samsung devices using samsung default keyboard. HOT 2
- Not compatible with flutter 3.7 HOT 22
- Hello, how to make the textEditController selection to the end when addeda WidgetSpan
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flutter_chips_input.