Rounded corner gives a decent look to any widget and rounded corner can be create using the border radius property of container. we can add border radius or shape to any container, image, button, text, input and etc. so in this article we will learn to create rounded corner using border radius in flutter.
Flutter use BoxDecoration class to render the border and borderRadius in container widget it accepts multiple options like border, border radius, color, background image, gradient, shape and etc. so to add the borderRadius first we need to add decoration option to container and then in decoration value we need to assign BoxDecoration class to implement the border.
borderRadius options
BorderRadius.all(Radius.elliptical(5, 25));
BorderRadius.all(Radius.circular(20)) ; // same as BorderRadius.circular(20);
BorderRadius.only(bottomLeft: Radius.circular(5),bottomRight:..,topRight: ..,bottomRight:.. , topLeft: ...); BorderRadius.vertical({
Radius top = Radius.zero,
Radius bottom = Radius.zero,
})
BorderRadius.horizontal({
Radius left = Radius.zero,
Radius right = Radius.zero,
})
You can simple create rounded corner using border radius in flutter as follow
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
borderRadius: BorderRadius.circular(20.0)),
child: const Text(
'Hello, World!',
style: TextStyle(color: Colors.white, fontSize: 30),
),
),
One side border radius to widget flutter
Sometimes we also want to add border radius to specific one side of widget or container so then we can use BorderRadius.only class named constructor to add the border radius to the one side or any side of container as follow
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0))),
child: const Text(
'Hello, World!',
style: TextStyle(color: Colors.white, fontSize: 30),
),
),
Let’s understand Create rounded corner using border radius in flutter with example
Step 1 : Create flutter project
Very first step is to create the fluter application using command line tool or in Android studio.
flutter create example_appThis will create a new project with name my_app then go in to the folder .
Step 2 : Create a simple widget
Now, Create a simple state less widget to add the border to widget as follow
File : lib/borderexample.dart
class BorderExample extends StatelessWidget {
@override
Widget Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Border Radius Example '),
),
body: Center(
child: Container(
padding: const EdgeInsets.all(10),
width: double.infinity,
color: Colors.black,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: const BorderRadius.horizontal()),
child: const Text(
'Hello, World!',
style: TextStyle(color: Colors.white, fontSize: 30),
),
),
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
borderRadius: BorderRadius.circular(20.0)),
child: const Text(
'Hello, World!',
style: TextStyle(color: Colors.white, fontSize: 30),
),
),
],
))),
);
}
}Step 3: Import and use the widget in main
We just created a new widget with name BorderExample, now we are going to use it in our main.dart file as below
import 'package:flutter/material.dart';
import 'package:example_app/BorderExample.dart';;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: BorderExample(),
),
),
);
}
}Step 4: Run the project
Simply run the project using command line or in android studio to check the implementation.
flutter run lib/main.dartRead Also : How to add border to container or any widget flutter?
