How to change the shape of chip in flutter

Question

I am trying to create a shape which is something similar as shown in the following Image.

I am planning to use Chips for achieving the same. However, chips have a rounded border on all the 4 sides. is there any way I can override this and have a rectangular corner on the left side and rounded corner in the right side.

Answer 1

You can use shape property of the Chip widget. In that property you can pass RoundedRectangleBorder() and mention borderRadius inside of the RoundedRectangleBorder(). There are other ShapeBorders like BeveledRectangleBorder(), StadiumBorder(),OutlineInputBorder(),ContinuousRectangleBorder() and so on.

A code is given below using RoundedRectangleBorder():

    Chip(
      backgroundColor: Color(0xFFE1E4F3),
      padding: const EdgeInsets.symmetric(vertical: 15,horizontal: 5),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(topRight: Radius.circular(20),bottomRight: Radius.circular(20))),
      label: Text("Custom Chip Shape",
        style: TextStyle(
          fontSize: 16,
          fontWeight: FontWeight.w600,
          color: Color(0xFF3649AE)
          ),
        )
      );

Hope this helps you out!!

Answer 2

I had to place the chip inside a container then match the background colours.

  new Container(
    decoration: new BoxDecoration(
      color: Colors.blue.shade100,
      borderRadius: new BorderRadius.only(
          topRight: Radius.circular(30.0), bottomRight: Radius.circular(30.0)),
      border: new Border.all(color: Color.fromRGBO(0, 0, 0, 0.0)),
    ),
    child: new Chip(
      label: new Text('Order Created',
          style: new TextStyle(fontSize: 20.0, color: Colors.blueGrey)),      
    ),
  );