Categories
Flutter Mobile Development

Rounded borders in flutter

If you come from a web background you know that we can use CSS to create rounded borders, let us see how to do this flutter.

In this article i will demonstrate how to add rounded rectangles to commonly used widgets such as TextField, Container and an Image

For widgets such as TextEdit, Container we can use the decoration property to add rounded borders and for Image widget we use ClipRRect

First let us take a look at a TextEdit. To add a rounded border to a TextEdit, we need to add a property called decoration that is of type InputBorderDecoraton.

The InputDecoration property in turn will have a border property of type OutlineInputBorder with a borderRadius

TextField(
  onChanged: (data) {},
  decoration: InputDecoration(
      labelText: "TexField with rounded border",
      border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10.0))),
),

Similarly for a Container we can add a property “decoration” of type BoxDecoration with a property of type BorderRadius

Container(
  width: double.infinity,
  height: 100.0,
  padding: EdgeInsets.all(10.0),
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.all(
      Radius.circular(20.0),
    ),
  ),
  child: Text("Container with rounded border"),
),

For Images however we need to use ClipRRect. What is a clip rect? a simple explanation is this. Think of a rectangle placed over
an image and the rectangle will only show the image within its border. When we give the rectangle a rounded border we are giving the image a “rounded border”.

So to give an image rounded edges, we place it inside a clip rect and give a border radius property to the ClipRRect. Here ClipRRect means “Clip Rounded Rectangle”, there is also a ClipRect, which means “Clip Rectangle”.

ClipRRect(
  borderRadius: BorderRadius.circular(20.0),
  child: Image.asset('images/fish.jpg'),
)

Finally here is a screenshot showing the rounded edges for TextEdit, Container and Image widgets.

If i missed anything or if you find mistakes please let me know.

Code

You can find the code for this article here

If you like the article, please share and give the github repo a star.

Sign up to be notified of new posts. I promise i won’t spam you.