Posts Learn Components Snippets Categories Tags Tools About
/

How to Add border to a Container with borderRadius in Flutter 3

Learn How to Add border to a Container with borderRadius in Flutter 3 the easy way

Created on Sep 20, 2022

13 views

In this short snippet you will learn how to implement borderRadius in Flutter 3 the easy way.

Step 1: Create BoxDecoration for Container


The first step is to create Container and put "decoration" property which accept "BorderRadius". This is very important to create the box.
decoration: BoxDecoration(
  borderRadius: BorderRadius.circular(12),
  color: Colors.white,
),

Step 2: Add Some basic Details


Next you have to add some basic details such as the color and extra styling. Refer the code example below.
void main() {
  runApp(PostSrc());
}

class PostSrc extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("PostSrc"),
          backgroundColor: Colors.green.shade300,
        ),
        backgroundColor: Colors.green.shade100,
        body: SafeArea(
          child: Center(
            child: Container(
              width: 100,
              height: 100,
              padding: const EdgeInsets.all(10),
              margin: const EdgeInsets.all(10),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                color: Colors.white,
              ),
              child: const Center(
                child: Center(
                  child: Text(
                    "1",
                    style: TextStyle(
                      color: Colors.green,
                      fontFamily: "Pacifico",
                      fontSize: 32,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Preview


The container with border radius will look like below.
Flutter Container with Border Radius

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

)