白色在卡片小部件中显示不正确

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

我使用

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

.