Flutter Chip - Software Development at Program Tom LTD

Here are a few simple, copy-pasteable ways to make a Chip with a rounded border (including a pill / stadium shape and a bordered outline).

1) Simple `Chip` with rounded outline

Chip(
  avatar: CircleAvatar(child: Text('A')),
  label: Text('Rounded Chip'),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12), // adjust for roundness
    side: BorderSide(color: Colors.blue, width: 1.5),
  ),
  backgroundColor: Colors.white,
  elevation: 2,
);

RoundedRectangleBorder gives you precise control of radius and BorderSide.

2) Pill / fully rounded chip (stadium)

Chip(
  label: Text('Pill Chip'),
  shape: StadiumBorder(
    side: BorderSide(color: Colors.green, width: 1.2),
  ),
  padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
  backgroundColor: Colors.white,
);

StadiumBorder produces a pill (capsule) style.

3) `InputChip`/`ChoiceChip` with rounded border and delete/action

InputChip(
  avatar: CircleAvatar(child: Icon(Icons.tag)),
  label: Text('InputChip'),
  onPressed: () { /* tap */ },
  onDeleted: () { /* delete */ },
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
    side: BorderSide(color: Colors.orange, width: 1),
  ),
);

Use InputChip, ChoiceChip, FilterChip, or ActionChip depending on interaction needs — they all accept a shape.

4) Fully custom decorated chip (more styling freedom)

Container(
  padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(20),
    border: Border.all(color: Colors.purple, width: 1.4),
    boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 4)],
  ),
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      CircleAvatar(radius: 10, child: Text('B', style: TextStyle(fontSize: 12))),
      SizedBox(width: 8),
      Text('Custom Chip'),
      SizedBox(width: 6),
      Icon(Icons.close, size: 16),
    ],
  ),
)

Use this when you need full control over shape, shadow, gradients, or layout.

5) Use `ChipTheme` to style all chips globally

Theme(
  data: Theme.of(context).copyWith(
    chipTheme: ChipThemeData(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12), side: BorderSide(color: Colors.blue)),
      backgroundColor: Colors.white,
      labelStyle: TextStyle(color: Colors.black),
      padding: EdgeInsets.symmetric(horizontal: 10),
    ),
  ),
  child: Wrap(
    spacing: 8,
    children: [
      Chip(label: Text('One')),
      Chip(label: Text('Two')),
    ],
  ),
);

Quick tips

shape is the key property (accepts any ShapeBorder).
Use RoundedRectangleBorder for corner control, StadiumBorder for pill shapes.
Border color/width → side: BorderSide(...).
For interaction variants, prefer InputChip, ChoiceChip, etc., which also support selected, onSelected, onDeleted.
If you need gradients or complex layout, wrap text in a Container with BoxDecoration.

1) Simple Chip with rounded outline