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

•

528 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,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}