In this short snippet you will learn how to implement borderRadius in Flutter 3 the easy way.
The first step is to create Container and put "decoration" property which accept "BorderRadius". This is very important to create the box.
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.
