In this example, we are going to show you the easiest way to add border radius on the Card() widget in Flutter. Border radius is used to make Circle, you can add border radius more than 50% of width or height in Card to make it a circle.
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(80),
//set border radius more than 50% of height and width to make circle
)
)
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10))
),
)
SizedBox(
height: 150, width:150,
//square box; equal height and width so that it won't look like oval
child:Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(80),
//set border radius more than 50% of height and width to make circle
),
)
)
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: MyApp()
)
);
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text("Circular Card in Flutter"), //appbar title
backgroundColor: Colors.redAccent //appbar background color
),
body: Container(
alignment:Alignment.topCenter,
padding: EdgeInsets.all(15),
child: SizedBox(
height: 150, width:150,
//square box; equal height and width so that it won't look like oval
child:Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(80),
//set border radius more than 50% of height and width to make circle
),
color: Colors.lightBlue,
elevation:10,
)
)
)
);
}
}
In this way, you can add a Border radius on the Card and make it circular in Flutter.
Please Wait...
No any Comments on this Article