A flutter package with tagging or multi-select functionality. Useful for adding Tag or Label Selection Forms.
List<Language> _selectedLanguages = [];
FlutterTagging<Language>(
initialItems: _selectedLanguages,
textFieldConfiguration: TextFieldConfiguration(
decoration: InputDecoration(
border: InputBorder.none,
filled: true,
fillColor: Colors.green.withAlpha(30),
hintText: 'Search Tags',
labelText: 'Select Tags',
),
),
findSuggestions: LanguageService.getLanguages,
additionCallback: (value) {
return Language(
name: value,
position: 0,
);
},
onAdded: (language){
// api calls here, triggered when add to tag button is pressed
return Language();
},
configureSuggestion: (lang) {
return SuggestionConfiguration(
title: Text(lang.name),
subtitle: Text(lang.position.toString()),
additionWidget: Chip(
avatar: Icon(
Icons.add_circle,
color: Colors.white,
),
label: Text('Add New Tag'),
labelStyle: TextStyle(
color: Colors.white,
fontSize: 14.0,
fontWeight: FontWeight.w300,
),
backgroundColor: Colors.green,
),
);
},
configureChip: (lang) {
return ChipConfiguration(
label: Text(lang.name),
backgroundColor: Colors.green,
labelStyle: TextStyle(color: Colors.white),
deleteIconColor: Colors.white,
);
},
onChanged: () {
print();
}
);
/// LanguageService
class LanguageService {
/// Mocks fetching language from network API with delay of 500ms.
static Future<List<Language>> getLanguages(String query) async {
await Future.delayed(Duration(milliseconds: 500), null);
return <Language>[
Language(name: 'JavaScript', position: 1),
Language(name: 'Python', position: 2),
Language(name: 'Java', position: 3),
Language(name: 'PHP', position: 4),
Language(name: 'C#', position: 5),
Language(name: 'C++', position: 6),
].where((lang) => lang.name.toLowerCase().contains(query.toLowerCase())).toList();
}
}
Author: sarbagyastha
GitHub: https://github.com/sarbagyastha/flutter_tagging
#flutter #dart #programming #mobile-app