Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

How to add Border Radius and make Circular Card in Flutter

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.

How to Add Border Radius on Card:

Card( 
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(80),
      //set border radius more than 50% of height and width to make circle
  )
)

How to Add Border Radius to Specific Side:

Card( 
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.only(topLeft: Radius.circular(10))
  ),
)

How to Make Card Circular:

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
      ),
    )
)

Full Code Example:

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,

                 )
             )
          )
      );
  }
}

Output Screenshot:

In this way, you can add a Border radius on the Card and make it circular in Flutter. 

No any Comments on this Article


Please Wait...