dart – Flutter give container rounded border

dart – Flutter give container rounded border

Try using the property borderRadius from BoxDecoration

Something like

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
    borderRadius: BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)

To make it completely circle:

Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
      ),
    )

To make it a circle at selected spots:

Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
            topRight: Radius.circular(40.0),
            bottomRight: Radius.circular(40.0),
            topLeft: Radius.circular(40.0),
            bottomLeft: Radius.circular(40.0)),
      ),
      child: Text(hello),
    ),

or

  Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(20)),
      ),
      child: ...
    )

dart – Flutter give container rounded border

Enhancement for the above answer.

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
   borderRadius: BorderRadius.circular(20) // use instead of BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)

Leave a Reply

Your email address will not be published.