Flutter ClipRRect examples

Last updated on November 28, 2020 A Goodman Loading... Post a comment

Last update: 28 Now, 2020

In Flutter, you can use the ClipRRect widget to create rounded corners rectangle widgets, or circular widgets. Let’s walk through the following examples to get a better understanding.

Example 1: Rounded corners Container

The code:

Padding(
            padding: EdgeInsets.all(15),
            child: ClipRRect(
                borderRadius: BorderRadius.circular(100),
                child: Container(
                    width: 300, height: 300, color: Colors.blue[200]))
)

Output:

Example 2: Circle Container

The code:

ClipRRect(
                // the radius must be at least half of the width of the child Container
                borderRadius: BorderRadius.circular(600),
                child: Container(
                    width: 300, height: 300, color: Colors.blue[200]))

Output:

Example 3: Make a circle image

The code:

Center(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(150),
              child: Image.network(
                'https://www.kindacode.com/wp-content/uploads/2020/11/my-dog.jpg',
                width: 300,
                height: 300,
                fit: BoxFit.cover,
              ),
))

Output:

Note: You can also use the CircleAvatar widget to make a circular image in Flutter.

Example 4: Make a circular ElevatedButton

The code:

Center(
          child: ClipRRect(
          borderRadius: BorderRadius.circular(100),
          child: SizedBox(
            width: 200,
            height: 200,
            child: ElevatedButton(
              onPressed: () {},
              child: Text('Button', style: TextStyle(fontSize: 24),),
            ),
          ),
        ))

Output:

If you’d like to learn more about Flutter, check out our Flutter topic page for more tutorials and examples.

Related Articles

guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x