Flutter Tags Search View Example

This article explains you how to integrate flutter tags with search view in mobile application with suggested tags. You can also check out flutter search bar with listview.

To create tags UI, we are using flutter_tags package. Using this package, we can provide suggestions to user. So user can pick from them. Whenever user enters text in search field, we display suggestions based on search from our list. In this flutter example, we are displaying soccer players names as suggested tags.

 

Add required dependency in your pubspec.yaml file

flutter_tags: ^0.4.9+1
 
 

Create Suggested Tags List

class MyTagData {
String id;
String title;

MyTagData({
@required this.id,
@required this.title,
});
}

 
List<MyTagData> listSuggestedTags = [
MyTagData(id: ‘1’, title: ‘Cristiano Ronaldo’),
MyTagData(id: ‘2’, title: ‘Lionel Messi’),
MyTagData(id: ‘3’, title: ‘Neymar’),
MyTagData(id: ‘4’, title: ‘Kevin De Brune’),
MyTagData(id: ‘5’, title: ‘Sergio Ramos’),
MyTagData(id: ‘6’, title: ‘Virgil Van Dijk’),
MyTagData(id: ‘7’, title: ‘Bruno Fernandes’),
MyTagData(id: ‘8’, title: ‘Kylian Mbappe’),
MyTagData(id: ‘9’, title: ‘Robert Lewandowski’),
MyTagData(id: ’10’, title: ‘Mohamed Salah’),
MyTagData(id: ’11’, title: ‘Erling Haaland’),
MyTagData(id: ’12’, title: ‘Romelu Lukaku’),
MyTagData(id: ’13’, title: ‘Leonardo Bonucci’),
MyTagData(id: ’14’, title: ‘Luis Suarez’),
MyTagData(id: ’15’, title: ‘Alisson Becker’),
];
 
 

Initialize Text Editing Controller for Search View

TextEditingController myTextEditingController = TextEditingController();

@override
void initState() {
super.initState();
myTextEditingController.addListener(() => refreshState(() {}));
}

refreshState(VoidCallback fn) {
if (mounted) setState(fn);
}

@override
void dispose() {
super.dispose();
myTextEditingController.dispose();
}

 
 

Create Search View for Flutter Tags

String get getSearchedText => myTextEditingController.text.trim();

Widget mySearchEditTextWidget() {
return Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(6),
),
border: Border.all(
color: Colors.grey.shade700,
width: 1,
),
),
child: Row(
children: [
Expanded(
child: TextField(
textInputAction: TextInputAction.search,
controller: myTextEditingController,
style: TextStyle(
fontSize: 18,
),
decoration: InputDecoration.collapsed(
hintText: ‘Search Tags’,
hintStyle: TextStyle(
color: Colors.grey,
),
),
),
),
getSearchedText.isNotEmpty ? InkWell(
child: Icon(
Icons.clear,
color: Colors.grey.shade700,
),
onTap: () => myTextEditingController.clear(),
)
: Icon(
Icons.search,
color: Colors.grey.shade700,
),
Container(),
],
),
);
}

 
 

Filter Searched Flutter Tags

List<MyTagData> listFilteredSearchResults() {
if (getSearchedText.isEmpty) return listSuggestedTags;

List<MyTagData> listTempTags = [];
for (int index = 0; index < listSuggestedTags.length; index++) {
MyTagData tagModel = listSuggestedTags[index];
if (tagModel.title
.toLowerCase()
.trim()
.contains(getSearchedText.toLowerCase())) {
listTempTags.add(tagModel);
}
}

return listTempTags;
}

 
 

Create No Tags Found UI

noTagsTextWidget() {
return Padding(
padding: const EdgeInsets.all(15),
child: listFilteredSearchResults().isNotEmpty ? suggestionsTextWidget() : Text(‘No Tags Found’, style: TextStyle(fontSize: 18)),
);
}
 
 

Create Flutter Tags Chip UI

Widget myTagsChipUIWidget({
tagModel,
onTap,
action,
}) {
return InkWell(
onTap: onTap,
child: Stack(
children: [
Container(
padding: EdgeInsets.symmetric(
vertical: 5.0,
horizontal: 5.0,
),
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 10.0,
vertical: 10.0,
),
decoration: BoxDecoration(
color: Colors.pinkAccent,
borderRadius: BorderRadius.circular(100.0),
),
child: Text(
‘${tagModel.title}’,
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
),
),
Positioned(
right: 0,
child: CircleAvatar(
backgroundColor: Colors.pink.shade500,
radius: 8,
child: Icon(
Icons.clear,
size: 10,
color: Colors.white,
),
),
)
],
));
}
}
 
 

Create Suggested Tags UI

List<MyTagData> listSearchedTags = [];

Widget suggestionsTextWidget() {
return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
if (listFilteredSearchResults().length != listSearchedTags.length) Text(‘Suggestions’, style: TextStyle(fontSize: 18)),
Wrap(
alignment: WrapAlignment.start,
children: listFilteredSearchResults()
.where((tagModel) => !listSearchedTags.contains(tagModel))
.map((tagModel) => myTagsChipUIWidget(
tagModel: tagModel,
onTap: () => addPlayersTags(tagModel),
action: ‘Add’,
))
.toList(),
),
]);
}

 
 

Add Searched Tags from Suggestions

addPlayersTags(tagModel) async {
if (!listSearchedTags.contains(tagModel))
setState(() {
listSearchedTags.add(tagModel);
});
}
 
 

Remove Flutter Tags

removePlayerTag(tagModel) async {
if (listSearchedTags.contains(tagModel)) {
setState(() {
listSearchedTags.remove(tagModel);
});
}
}
 
 

Display Flutter Tags with SearchView

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Tags View Sample’)),
body: SingleChildScrollView(
padding: EdgeInsets.all(15),
child: myTagsUIWidget(),
),
);
}
 
Widget myTagsUIWidget() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
listSearchedTags.length > 0
? Column(children: [
Wrap(
alignment: WrapAlignment.start,
children: listSearchedTags.map((tagModel) => myTagsChipUIWidget(
tagModel: tagModel,
onTap: () => removePlayerTag(tagModel),
action: ‘Remove’,
))
.toSet()
.toList(),
),
])
: Container(),
mySearchEditTextWidget(),
noTagsTextWidget(),
],
);
}
 
 

flutter tags
 
 
 
flutter tags
 

Leave a Reply