How To Change Flutter Card Elevation – Easy Flutter Guide

In this post, we’ll learn what Flutter card elevation is and how to change it.

We’ll explain it practically with a proper Flutter example code. We’ll first see what the default elevation of Flutter card widget is. Then we’ll change it using a practical code example.

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

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

What is Flutter Card Elevation?

It specifies the shadow effect that Flutter card widget has. By using its background shadow, we can make our card widget looks more or less elevated.

Let’s now customize it using a proper code example. But first, let’s see the Flutter card default elevation.

Default Elevation of Flutter Card

In order to see that, we first have to define a simple card widget. We also will give it a child text widget with some padding so the text can have a distance from the borders of card widget. See below code:

Card(
      child: Padding(
        padding: const EdgeInsets.all(15),
        child: Text(
          'Flutter card default elevation',
        ),
      ),
    )

You can see that we have a card widget with some shadow. By customizing the extent of this shadow, we can make our card look more or less elevated.

Custom Flutter Card Elevation (Easy Example Code)

For that, we have to use the elevation constructor of Flutter card widget. It takes a double(decimal) value but passing it integer will also work just fine.

For demonstration, we will first pass 0 value to it. See below code:

Card(
      elevation: 0,
      child: Padding(
        padding: const EdgeInsets.all(15),
        child: Text(
          'Flutter card custom elevation',
        ),
      ),
    )

We can see in the above image that the elevation of card is now completely removed.

Let’s now pass a higher value to the elevation constructor. See below code:

Card(
      elevation: 10,
      child: Padding(
        padding: const EdgeInsets.all(15),
        child: Text(
          'Flutter card custom elevation',
        ),
      ),
    )

So this is how you can easily customize Flutter card elevation.

Hope you now have a detailed practical knowledge of how to customize Flutter card elevation.

I would be very glad to answer if you still have any questions related to the customization of Flutter card elevation.

The complete source code is available in the next section in which custom Flutter card elevation is also implemented.

Customized Flutter Card Elevation 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(
      elevation: 10,
      child: Padding(
        padding: const EdgeInsets.all(15),
        child: Text(
          'Flutter card custom elevation',
        ),
      ),
    ))));
  }
}

Conclusion

As conclusion, I’m sure you now have a complete and detailed practical understanding of how to customize Flutter card elevation. I’ll be glad to have your valuable feedback on this post.

Also, I’d highly encourage you to visit my other articles as well. Thank you for reading this post.