I am trying to create a chip where the close button (deleteIcon) is on the left side of the chip label (label). how can i do that.
here is the unwantted result:
and i want to move the X to the left side of "Hagai" like this:
Chip(
deleteIcon: Icon( Icons.close, ),
onDeleted: () {setState(() {print("bla");}); }
label: Text("bla",),
),
An update: after the suggestions answers here is my new code (still dosent work):
Widget build(BuildContext context) {
return Container(
child:
Chip(
label: Text(
"bla",
),
avatar: InkWell(
onTap: () {
print("bla");
},
child: Icon(
Icons.close,
),
),
),
);
}
There is no way to change the direction of Chip Widget. But we can customize the Chip
Chip(
label: Text(
"bla",
),
avatar: InkWell(
onTap: () {},
child: Icon(
Icons.close,
),
),
),
another solution is given by ibhavikmakwana
Additions
as in the above view are visible the same as per requirement but onTap is not working I am working on finding the reason why it's not working.
I have created the custom chip View, for mean while you can use it its working fine
Wrap(
children: <Widget>[
Container(
padding: const EdgeInsets.fromLTRB(5.0, 5.0, 5.0, 5.0),
decoration: BoxDecoration(
color: Color(0xffDBDBDB),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(20.0),
),
child: Wrap(
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
runSpacing: 10,
children: <Widget>[
InkWell(
onTap: () {
print("bla");
},
child: Icon(
Icons.close,
),
),
Padding(padding: const EdgeInsets.all(5.0)),
Text(
"bla",
),
],
),
)
],
),
You can either use a RawChip
, Chip
,
and in avatar
field pass your delete icon.
You can wrap your delete icon with InkeWell
or GestureDetector
to get the onTap
event.
RawChip(
label: Text(
"bla",
),
avatar: InkWell(
onTap: () {},
child: Icon(
Icons.close,
),
),
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With