How To Easily Change Flutter Container Border Radius

In this Flutter post, we will be exploring what is meant by Flutter container border radius and how to practically use and customize it in Flutter.

We will be explaining everything about Flutter container border radius and implement it using a proper example.

Let’s no wait more and dive right into customizing Flutter container border radius.

What is Flutter Container Border Radius?

Flutter container border radius can be used to shape the Flutter container widget. By using the border radius, we can change the edge shapes of the Flutter container widget. We will first see what the default Flutter container border radius is then we will change the border radius using multiple ways.

Default Flutter Container Border Radius

To see the default border radius of container, we have to define a simple Flutter container.

For demonstration, we have give our container a height, width, color and a Flutter text widget. See the below code:

Container(
          width: 240,
          height: 60,
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text(
            'Flutter Container Default Border radius',
            style: TextStyle(color: Colors.white, fontSize: 15),
          ),
        )

The default border radius of Flutter container can be seen in the above image. You can see that the edges are sharp. Let’s now see how to change it.

Change Flutter Container Border Radius(Multiple Ways)

To change the border radius, we have to use the decoration constructor of the container class and pass it box decoration. Then by using the border radius constructor, we can easily change the shape of Flutter container.

We will be using multiple ways to customize the Flutter container border radius. See below:

Border Radius Circular
Border Radius Only

Border Radius Circular

Border radius circular is used when you want to give the same circular value to each edge of the Flutter container. See below code:

 borderRadius: BorderRadius.circular(10)

flutter container circular border radius

You can see the custom border radius shape of Flutter container in the above image. If you still want to give a different value to one or many edges then use the copy with. See the below code:

 borderRadius: BorderRadius.circular(10).copyWith(topRight: Radius.circular(0))

You can see that the top right edge is sharp as we have given 0 value to it. The less value you give, the sharper it will be.

Border Radius Only

It is used when you want to give each edge a different value. See the below code:

  borderRadius: BorderRadius.only(
                topLeft: Radius.circular(3),
                topRight: Radius.circular(30),
                bottomLeft: Radius.circular(10),
                bottomRight: Radius.circular(0))

You can see that the Flutter container border radius for edge edge is different. You can give values of your choice to it.

Let’s say you want the top left corner to have the default value then just the constructor of that corner. See below code:

  borderRadius: BorderRadius.only(
                topLeft: Radius.circular(3),
                bottomLeft: Radius.circular(10),
                bottomRight: Radius.circular(0)),

You now have a proper implementing knowledge of how to use and customize Flutter container border radius with multiple ways. Don’t hesitate to hold back your words if you still have any questions related to the customization of Flutter container border radius. I would love to answer all.

Below section has the complete source code in which Flutter container border radius is also customized.

Flutter Container Border Radius Customization Source Code

flutter container border radius

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
        child: Container(
          width: 240,
          height: 60,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(3),
                topRight: Radius.circular(30),
                bottomLeft: Radius.circular(20),
                bottomRight: Radius.circular(0)),
            color: Colors.blue,
          ),
          alignment: Alignment.center,
          child: Text(
            'Flutter Container Custom Border radius',
            style: TextStyle(color: Colors.white, fontSize: 15),
          ),
        ),
      ),
    ));
  }
}

Conclusion

To conclude now you know of the value that Flutter container border radius has and how to use and customize it in your Flutter applications. I welcome your feedback on this post. Thank you for reading this post.

1 thought on “How To Easily Change Flutter Container Border Radius”

barnyard
August 3, 2022 at 3:50 pm
We are а group of voluntеers and startіng a new scheme in our сommunity.
Y᧐ur web site provided us with valuable info to work on. You’ve done ɑ formidable job and
our entire community will be thankful to you.