Flutter Bottom Border

In Flutter you can control the borders of a Widget – by wrapping it in Container and setting them per side using BorderSide.

Bottom border only

Container(
  decoration: const BoxDecoration(
    border: Border(
      bottom: BorderSide(
        color: Colors.black,
        width: 1.0,
      ),
    ),
  ),
  child: Text('Hello'),
)

With padding & width

Container(
  padding: const EdgeInsets.symmetric(vertical: 8),
  decoration: BoxDecoration(
    border: Border(
      bottom: BorderSide(
        color: Colors.grey.shade400,
        width: 2,
      ),
    ),
  ),
  child: const Text('Bottom border only'),
)

Rounded bottom border (slightly fancy)

If you want rounded corners only at the bottom:

Container(
  decoration: BoxDecoration(
    border: Border(
      bottom: BorderSide(color: Colors.black),
    ),
    borderRadius: const BorderRadius.only(
      bottomLeft: Radius.circular(8),
      bottomRight: Radius.circular(8),
    ),
  ),
)

Using Divider instead (sometimes cleaner)

For forms / lists:

Column(
  children: [
    Text('Item'),
    Divider(height: 1),
  ],
)