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.

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. 

No any Comments on this Article


Please Wait...