How to change the shape of chip in flutter

user_4652688 0
Viewed 12950

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

enter image description here

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.

flutter android
2 Answers

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

enter image description here

Hope this helps you out!!

user_115442350

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