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

White color not display proper using material3 in Card widgets – Flutter

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.

enter image description here

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

Tags:

2

Answers


  1. 0

    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

    enter image description here

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

    Login or Signup to reply.
  2. 0

    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,
    ),
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search