In flutter Chip Widget, how can I move the deleteIcon to be before the label

user_8359749 0
Viewed 5724

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:

enter image description here

and i want to move the X to the left side of "Hagai" like this:

enter image description here

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,
      ),
    ),
  ),
);

}

flutter
2 Answers

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",
                        ),
                      ],
                    ),
                  )
                ],
              ),
user_21961760

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,
    ),
  ),
)
user_76527580
Related