White color not display proper using material3 in Card widgets

Question

I have used card widget and container both in one screen and set the white color in both and it's display correct in container but not correct in card widget. I have attache the screenshot. in this screenshot code and emulator both are show for compared.

Thank you in advanced Note I have used the App them for Light theme and dark theme.

ThemeData lightTheme(){
return ThemeData.light(useMaterial3: true).copyWith(
scaffoldBackgroundColor: Colors.white,
primaryColor: Colors.black,
primaryColorDark: Colors.white,

appBarTheme: AppBarTheme(
    backgroundColor: Colors.white,
  shadowColor: Colors.black,
  elevation: 15,
  foregroundColor: Colors.black,
  titleTextStyle:TextStyle().copyWith(color: Colors.black,fontFamily: EAFontName.Muli,fontWeight: EAFontWeight.muliMedium),
),
textTheme: TextTheme(
  titleSmall: TextStyle().copyWith(color: Colors.black,fontFamily: EAFontName.Muli,fontWeight: EAFontWeight.muliRegular,fontSize: EAFontSize.size10),
  titleMedium: TextStyle().copyWith(color: Colors.black,fontFamily: EAFontName.Muli,fontWeight: EAFontWeight.muliSemiBold,fontSize: EAFontSize.size12),
  titleLarge: TextStyle().copyWith(color: Colors.black,fontFamily: EAFontName.Muli,fontWeight: EAFontWeight.muliBold,fontSize: EAFontSize.size16),
),
  bottomNavigationBarTheme: BottomNavigationBarThemeData(
      backgroundColor: Colors.white54,
      selectedItemColor: Colors.black,
      unselectedItemColor: Colors.black54,
    elevation: 16,
  ),
  cardColor: Colors.white,
  cardTheme: CardTheme(
      color: Colors.white,
      shadowColor: Colors.black,
      elevation: 6,
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
       // side: BorderSide(color: Colors.black,width: 1)
    ),
  ),

 ); 
}



    ThemeData darkTheme(){
   return ThemeData.light(useMaterial3: true).copyWith(
scaffoldBackgroundColor: Colors.black,
primaryColor: Colors.white,
primaryColorDark: Colors.black,
appBarTheme: AppBarTheme(
  backgroundColor: Colors.black,
  shadowColor: Colors.white,
  elevation: 15,
  foregroundColor: Colors.white,
  titleTextStyle: TextStyle().copyWith(color: Colors.white,fontFamily: EAFontName.Muli,fontWeight: EAFontWeight.muliMedium),
),
textTheme: TextTheme(
  titleSmall: TextStyle().copyWith(color: Colors.white,fontFamily: EAFontName.Muli,fontWeight: EAFontWeight.muliRegular,fontSize: EAFontSize.size10),
  titleMedium: TextStyle().copyWith(color: Colors.white,fontFamily: EAFontName.Muli,fontWeight: EAFontWeight.muliSemiBold,fontSize: EAFontSize.size12),
  titleLarge: TextStyle().copyWith(color: Colors.white,fontFamily: EAFontName.Muli,fontWeight: EAFontWeight.muliBold,fontSize: EAFontSize.size16),
),
bottomNavigationBarTheme: BottomNavigationBarThemeData(
  backgroundColor: Colors.black54,
  selectedItemColor: Colors.white,
  unselectedItemColor: Colors.white54,
  elevation: 16,
),
cardColor: Colors.black,
cardTheme: CardTheme(
    color: Colors.black,
    shadowColor: Colors.white,
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16),
    //  side: BorderSide(color: Colors.white,width: 1)
  ),
  elevation: 8
    ),
 );
}

I have also try add Theme color to card widegts but same result getting.

Thank in advanced

Simla

Answer 1

With material 3 there is new option for this which is surfaceTintColor add that to the card widget and set to what you want read more here for migrating to the material 3

return Card(
  // color: Colors.white,
  surfaceTintColor: Colors.white,
  elevation: 20,
  child: Padding(
    padding: const EdgeInsets.all(32.0),
    child: Text(
      'Hello, World!',
      style: Theme.of(context).textTheme.headlineMedium,
    ),
  ),
);

Hydrated

I was pulling my hair out... thought some alpha was there in my chosen color :) – Zen

Answer 2

In Material3, the cards are displayed with their surfaceTintColor attribute's default color. So, if you want them to appear white, that's the attribute you should change. If you want all the cards in the app to be white, you can modify the ThemeData as follows:

// Modify the ThemeData
ThemeData(
  // Other theme configurations...
  cardTheme: CardTheme(
    surfaceTintColor: Colors.white,
  ),
)

This will set the surfaceTintColor of the CardTheme to white, ensuring that all cards in the app have a white appearance. More here for migrating to the material 3!

Claraclarabella

Answer 3

I did a quick and dirty implementation of a Card widget using Material design and it seems to be working fine and shows the white color properly.

Here is my code:

//imported google's material design library
import 'package:flutter/material.dart';
 
void main() {
runApp(
    /**Our App Widget Tree Starts Here**/
    MaterialApp(
    home: Scaffold(
    appBar: AppBar(
        title: const Text('Card widget demo'),
        backgroundColor: Colors.white,
        centerTitle: true,
    ), //AppBar
    body: Center(
        /** Card Widget **/
        child: Card(
        elevation: 50,
        color: Colors.white,
        child: SizedBox(
            width: 300,
            height: 200,
            child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
                children: [
                const Text(
                    'My card widget',
                    style: TextStyle(
                    fontSize: 15,
                    color: Colors.black,
                    ), //Textstyle
                 ), //Text
                ],
            ), //Column
            ), //Padding
        ), //SizedBox
        ), //Card
       ), //Center
      ), //Scaffold
      ) //MaterialApp
     );
   }  

Output

Can you please check if any other Theme or color is getting applied to your Widget.

Somatist

Thank you @Somatist for the response but now I'm getting the issue. I have set the "true" in "useMaterial3: true" in my "ThemeData.light(useMaterial3: true).copyWith()". but after set to "false" it's working properly. – Simla

ok please accept my answer if it has helped you :) – Somatist

If you set the useMaterial3 to true, then widgets that have been migrated to Material 3 will use new colors, typography and other features of Material 3. If false, they will use the Material 2 look and feel. – Somatist

Yes, But why white color loose his property means not display proper white in material3. – Simla

For that you need to check what is difference between material3 and material2. Please check this link blog.codemagic.io/migrating-a-flutter-app-to-material-3 – Somatist

Answer 4

Set both surfaceTintColor & color properties of the Card to get the desired color.

Webfooted

Answer 5

For people who may still need the solution to this, set your theme this way:

theme: ThemeData.light().copyWith(
          cardTheme: CardTheme(
            surfaceTintColor: Color(0xFFFFFFFF)
          ),
          cardColor: Colors.white,
        ),

Then in any Card you want to set your color, you set the color: property, to be:

color: Theme.of(context).cardColor,

Then you have your Card color displayed as white in Material3 design.

Griffiths