在卡片小部件中使用材料3时白色无法正确显示

Question

我在一个屏幕中使用了卡片小部件和容器，并在两者中设置了白色，它在容器中显示正确，但在卡片小部件中显示不正确。我已附上屏幕截图。在此屏幕截图中，代码和模拟器都进行了比较。

提前谢谢您注意我已将应用程序用于浅色主题和深色主题。

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
    ),
 );
}

我也尝试将主题颜色添加到卡宽，但得到相同的结果。

提前致谢

Answer 1

有material 3一个新选项可以将其surfaceTintColor添加到卡片小部件中并设置为您想要的内容，请在此处阅读更多内容以迁移到材料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,
    ),
  ),
);

Answer 2

我使用quick and dirty它实现了一个Card小部件Material design，它似乎工作正常并且white正确显示颜色。

这是我的代码：

//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
     );
   }  

输出

您能否检查一下是否有任何其他Theme或color正在应用于您的Widget.