3.3 C
New York
Saturday, January 28, 2023

Flutter ClipRRect examples

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

Example 1: Rounded corners Container

The code:Advertisements

Center(
        child: Padding(
            padding: const 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

AdvertisementsThe 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

Advertisements

The code:

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

Output:

You can find more details about the constructors and properties of the ClipRRect widget in the official docs.

Wrapping Up

We’ve gone through some practical examples of using the ClipRRect widget to create rounded sharp things. If you’d like to explore more new and interesting stuff in the modern Flutter world, take a look at the following articles:

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles