Flutter Question posted in
The official Flutter documentation can be found here.

Flutter: Card Widget – Why does elevation in Card Widget change the card's color?

I’m very new to this community and Flutter, also a non-native English person.
So, I’m doing the codelab of Material Structure and Layout from google (https://codelabs.developers.google.com/codelabs/mdc-102-flutter#0).
While fiddling with the elevation property, I noticed that the background color of the Card changed.
I’m running the app on Android Emulator using a Windows laptop.
elevation: 1.
with elevation 1, the color hardly changed
enter image description here

elevation: 10.
with elevation 10, the color turn slightly pink with a shadow veil

enter image description here

My question is that why does this happen? Is there any way to avoid this? Do you suggest any other Widget that also has elevation without changing the color?

Tags:

3

Answers


  1. 0

    Elevation basically controls shadow effect for the widget, it doesn’t directly control the background color, it just gives the widget a sense of depth.

    Login or Signup to reply.
  2. 0

    I think you can set the surfaceTintColor as it described: The color used as an overlay on [color] to indicate elevation.

    
class MyWidget extends StatelessWidget {
  Color cardColor = const Color.fromARGB(255, 196, 214, 245);
  Widget child = const SizedBox(width: 50, height: 50);

  MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Card(
          color: cardColor,
          surfaceTintColor: cardColor,
          child: child,
        ),
        Card(
          color: cardColor,
          surfaceTintColor: cardColor,
          elevation: 20,
          child: child,
        ),
        Card(
          color: cardColor,
          elevation: 20,
          child: child,
        ),
      ],
    );
  }
}

    The output is:

    enter image description here

    Second and third widgets have elevation but I set the surfaceTintColor for the first two widgets and they are like each other (except the shadow).

    Login or Signup to reply.
  3. 0

    Starting from Flutter 3.16, Material 3 is enabled by default. In Material 3, giving elevation to a card will make the card tinted with its surfaceTintColor.

    To elevate a card without having the tint color, you can set the surfaceTintColor property to Colors.transparent:

    Card(
  surfaceTintColor: Colors.transparent,
  // ...
)

    Alternatively, you can use the Card.filled constructor and set the color to white:

    Card.filled(
  color: Colors.white,
  // ...
)

    See also: After upgrading to Flutter 3.16, the app bar, background color, button size, and spaces change

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search