Introduction:
Adding rounded corners to a container can give your app a more visually appealing and modern look. In Flutter, you can easily achieve this effect by applying a border radius to a container. The border radius property allows you to control the curvature of the container’s corners, giving you the flexibility to create various shapes and designs. In this step-by-step guide, you will learn how to add a border radius to a container in Flutter using the BoxDecoration class and the borderRadius property. By following this tutorial, you will be able to customize the appearance of your containers by adding rounded corners according to your app’s design requirements.
Content:
1. Create a Flutter project:
Make sure you have Flutter installed and set up on your machine. Create a new Flutter project using the following command in your terminal:
flutter create rounded_container_app
2. Open the main.dart file:
Navigate to the lib folder in your Flutter project and open the main.dart file.
3. Import the necessary packages:
At the top of the main.dart file, import the required Flutter packages:
import 'package:flutter/material.dart';
4. Define the RoundedContainer widget:
Create a new stateless widget called RoundedContainer. This widget will represent the container with rounded corners:
class RoundedContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(20),
),
);
}
}
5. Implement the RoundedContainer widget:
In the main.dart file, replace the MyApp class with the following code:
void main() {
runApp(RoundedContainerApp());
}
class RoundedContainerApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Rounded Container App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Rounded Container'),
),
body: Center(
child: RoundedContainer(),
),
),
);
}
}
6. Run the app:
Save the main.dart file and run the app using the following command in your terminal:
flutter run
Conclusion:
Congratulations! You have successfully learned how to add a border radius to a container in Flutter. By applying a borderRadius to the BoxDecoration of a Container widget, you can achieve rounded corners, giving your app’s UI a more visually appealing and modern look. You can further customize the borderRadius value to adjust the curvature of the corners according to your design preferences. Utilize this knowledge to enhance your Flutter app’s visual aesthetics and create stunning user interfaces.
