Analog for TagView in flutter

I want to have UI like this:

With native Android it can be done with libraries like https://github.com/whilu/AndroidTagView, how can it be done with flutter?

2 Answers
2

you can make the same UI by combining the Wrap and Chip widget as @wasyl montioned . but this is a full example about what you need

Wrap

Chip

Notes :

spacing

deleteIcon

avatar

Chip

Shape

new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Wrap(
children: <Widget>[
Chip(
label: new Text("Java"),
onDeleted: () {},
labelPadding: EdgeInsets.all(2.0),
deleteIcon: Icon(Icons.clear),
),
Chip(
label: new Text("C++"),
onDeleted: () {},
labelPadding: EdgeInsets.all(2.0),
deleteIcon: Icon(Icons.clear),
),
Chip(
label: new Text("Python"),
onDeleted: () {},
labelPadding: EdgeInsets.all(2.0),
deleteIcon: Icon(Icons.clear),
),
],
),
new SizedBox(
height: 10.0,
),
new Wrap(
spacing: 5.0,
children: <Widget>[
Chip(
label: new Text("China"),
backgroundColor: Colors.pinkAccent,
),
Chip(
label: new Text("USA"),
backgroundColor: Colors.greenAccent,
),
Chip(
label: new Text("Austria"),
backgroundColor: Colors.purpleAccent,
),
],
),
new SizedBox(
height: 10.0,
),
new Wrap(
textDirection: TextDirection.rtl,
spacing: 5.0,
children: <Widget>[
Chip(
label: new Text("نجربة"),
avatar: Icon(Icons.clear),
backgroundColor: Colors.transparent,
shape: new BeveledRectangleBorder(side: BorderSide(color: Colors.grey))),
Chip(
label: new Text("كتابة"),
avatar: Icon(Icons.clear),
backgroundColor: Colors.transparent,
shape: new BeveledRectangleBorder(side: BorderSide(color: Colors.grey))),
Chip(
label: new Text("مختلفة"),
avatar: Icon(Icons.clear),
backgroundColor: Colors.transparent,
shape: new BeveledRectangleBorder(side: BorderSide(color: Colors.grey))),
],
),
],
),


You will want to use:

Seems like the border width can't be easily set for a Chip, though, but the overall functionality is readily available

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.