How To Easily Customize Flutter Card Border Radius

In this Flutter post, we’ll learn how to change Flutter card border radius using multiple Flutter examples. We’ll first see what the default border radius of Flutter card widget is, then we will practically customize it.

After reading this post, you’ll be able to easily customize Flutter card border radius in your own Flutter apps.

So without any delay, let’s jump right into its implementation.

What is Flutter Card Border Radius?

It specified the shape of Flutter card widget. Customizing the shape of borders will change the shape of whole card widget.

Let’s now customize Flutter card border radius using multiple Flutter practical examples. But first, let’s see its default shape.

Default Shape of Flutter Card Widget

Card(
      color: Colors.green,
      child: Padding(
        padding: const EdgeInsets.all(15),
        child: Text(
          'Default Card Widget Border Radius',
          style: TextStyle(color: Colors.white),
        ),
      ),
    )

You can see that we have used Flutter card widget class with a green background color so we can see the border shape clearly.

We also have given it a child Flutter text widget with some padding so the text can have a distance from the border of cards.

In the above image, you can see the default border radius of card widget.

Change Flutter Card Border Radius (Multiple Examples)

For that, we have to use the shape constructor of Flutter card widget class. Let’s noe look at multiple examples on how to change border radius of Flutter card widget.

Example 1: Border Radius Circular

shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30))

We’ll be using the border radius constructor of round rectangle border class. In this case, we have passed border radius circular which will give same circular shape to each edge of card widget.

If you want to specify a different value to one or more edges then use the copyWith method. See below:

shape: RoundedRectangleBorder(
          borderRadius:
              BorderRadius.circular(30).copyWith(topRight: Radius.circular(0)))

Example 2: Border Radius All

  shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(30)))

It can also be used to specify the same radius value to each edge. You can use copyWith method here as well.

Example 3: Border Radius Only

  shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(0),
              bottomRight: Radius.circular(10),
              topLeft: Radius.circular(30),
              topRight: Radius.circular(5)))

 It can be used to specify same or different values to each edge of Flutter card widget. You can use copyWith here as well but its not recommended.

Example 4: Border Radius Horizontal

  shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.horizontal(
             left: Radius.circular(20), right: Radius.circular(5)))

It is used to give some specific value to the left side(top left and bottom left) and some other value to the right side(top right and bottom right). If you want then you can use copyWith method here.

Example 5: Border Radius Vertical

    shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.vertical(
             top: Radius.circular(20), bottom: Radius.circular(5)))

It’s used to give a same value to the top side(top left and top right) and some other value to the bottom(bottom left and bottom right). You can use copyWith method here as well.

I am sure you now you have a complete understanding of how to customize Flutter card border radius.

I would love to answer if you still have any questions regarding the customization of Flutter card border radius.

Below section features the complete source code in which Flutter card border radius is also customized.

Custom Flutter Card Border Radius Source Code

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
                child: Card(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
              top: Radius.circular(20), bottom: Radius.circular(5))),
      color: Colors.green,
      child: Padding(
        padding: const EdgeInsets.all(15),
        child: Text(
          'Custom Card Widget Border Radius',
          style: TextStyle(color: Colors.white),
        ),
      ),
    ))));
  }
}

Conclusion

As conclusion, hope you now have a complete practical idea of how to use and customize Flutter card border radius. I would love to have your thoughts on this post.

I would also strongly encourage you to visit my other posts as well. Thank you for reading this post.