The colors of PopupMenuItems and Cards must match the background of the PopupMenu and Cards color. Before the update the colors were wrong and to fix it I used ElevationOverlay.applySurfaceTint but now this doesn't work. I tried everything I know.
AppBar Code:
appBar: AppBar(
automaticallyImplyLeading: false,
elevation: 4,
surfaceTintColor: Theme.of(context).colorScheme.surfaceTint,
backgroundColor: Theme.of(context).colorScheme.surface,
title: const Text('Asistente'),
centerTitle: true,
actions: [
PopupMenuButton(
position: PopupMenuPosition.under,
// color: ElevationOverlay.applySurfaceTint(
// Theme.of(context).colorScheme.surface,
// Theme.of(context).colorScheme.surfaceTint,
// 2),
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4)),
constraints: const BoxConstraints(
minWidth: 112,
maxWidth: 280,
),
iconSize: 30,
icon: CircleAvatar(
backgroundImage: NetworkImage(user.photoURL!),
),
// icon: const Icon(Icons.account_circle_outlined),
itemBuilder: (BuildContext context) => [
PopupMenuItem(
child: ListTile(
iconColor:
Theme.of(context).colorScheme.onSurfaceVariant,
leading: const Icon(Icons.settings),
onTap: (() {
Navigator.pop(context);
openDialog(context);
}),
title: Text(
'Configuración',
style: Theme.of(context)
.textTheme
.labelLarge
?.copyWith(
color:
Theme.of(context).colorScheme.onSurface),
),
),
),
PopupMenuItem(
child: ListTile(
iconColor:
Theme.of(context).colorScheme.onSurfaceVariant,
leading: const Icon(Icons.account_circle),
onTap: (() {
Navigator.pop(context);
infoDialog(context);
}),
title: Text(
'Información',
style: Theme.of(context)
.textTheme
.labelLarge
?.copyWith(
color:
Theme.of(context).colorScheme.onSurface),
),
),
),
PopupMenuItem(
child: ListTile(
iconColor:
Theme.of(context).colorScheme.onSurfaceVariant,
leading: const Icon(Icons.logout_outlined),
onTap: (() {
final provider = Provider.of<GoogleSignInProvider>(
context,
listen: false);
provider.logout();
Navigator.pop(context);
}),
title: Text(
'Cerrar Sesión',
style: Theme.of(context)
.textTheme
.labelLarge
?.copyWith(
color:
Theme.of(context).colorScheme.onSurface),
),
),
),
])
],
),
For theming I'm using Material 3 with color scheme
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => GoogleSignInProvider(),
child: Consumer<ThemeProvider>(builder: (context, provider, child) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Tesis',
theme: ThemeData(
useMaterial3: true,
colorScheme: lightColorScheme,
),
darkTheme: ThemeData(
useMaterial3: true,
colorScheme: darkColorScheme,
),
themeMode: provider.themeMode,
initialRoute: '/',
routes: {
'/': (context) => const Start(),
'/second': (context) => const Home(),
},
);
}),
);
}
Color Scheme
const lightColorScheme = ColorScheme(
brightness: Brightness.light,
surfaceTint: Color(0xFF6750A4),
one rrorContainer: Color(0xFF410E0B),
one rror: Color(0xFFFFFFFF),
errorContainer: Color(0xFFF9DEDC),
onTertiaryContainer: Color(0xFF31111D),
onTertiary: Color(0xFFFFFFFF),
tertiaryContainer: Color(0xFFFFD8E4),
tertiary: Color(0xFF7D5260),
shadow: Color(0xFF000000),
error: Color(0xFFB3261E),
outline: Color(0xFF79747E),
onBackground: Color(0xFF1C1B1F),
background: Color(0xFFFFFBFE),
onInverseSurface: Color(0xFFF4EFF4),
inverseSurface: Color(0xFF313033),
onSurfaceVariant: Color(0xFF49454F),
onSurface: Color(0xFF1C1B1F),
surfaceVariant: Color(0xFFE7E0EC),
surface: Color(0xFFFFFBFE),
onSecondaryContainer: Color(0xFF1D192B),
onSecondary: Color(0xFFFFFFFF),
secondaryContainer: Color(0xFFE8DEF8),
secondary: Color(0xFF625B71),
inversePrimary: Color(0xFFD0BCFF),
onPrimaryContainer: Color(0xFF21005D),
onPrimary: Color(0xFFFFFFFF),
primaryContainer: Color(0xFFEADDFF),
primary: Color(0xFF6750A4),
);
const darkColorScheme = ColorScheme(
brightness: Brightness.dark,
surfaceTint: Color(0xFFD0BCFF),
one rrorContainer: Color(0xFFF2B8B5),
one rror: Color(0xFF601410),
errorContainer: Color(0xFF8C1D18),
onTertiaryContainer: Color(0xFFFFD8E4),
onTertiary: Color(0xFF492532),
tertiaryContainer: Color(0xFF633B48),
tertiary: Color(0xFFEFB8C8),
shadow: Color(0xFF000000),
error: Color(0xFFF2B8B5),
outline: Color(0xFF938F99),
onBackground: Color(0xFFE6E1E5),
background: Color(0xFF1C1B1F),
onInverseSurface: Color(0xFF313033),
inverseSurface: Color(0xFFE6E1E5),
onSurfaceVariant: Color(0xFFCAC4D0),
onSurface: Color(0xFFE6E1E5),
surfaceVariant: Color(0xFF49454F),
surface: Color(0xFF1C1B1F),
onSecondaryContainer: Color(0xFFE8DEF8),
onSecondary: Color(0xFF332D41),
secondaryContainer: Color(0xFF4A4458),
secondary: Color(0xFFCCC2DC),
inversePrimary: Color(0xFF6750A4),
onPrimaryContainer: Color(0xFFEADDFF),
onPrimary: Color(0xFF381E72),
primaryContainer: Color(0xFF4F378B),
primary: Color(0xFFD0BCFF),
);
CodePudding user response：
The problem was a compatibility conflict between the new versions and the ListTile on the Cards and PopupMenu. The solution was to remove the ListTile.
The new PopupMenu:
actions: <Widget>[
PopupMenuButton<Item>(
position: PopupMenuPosition.under,
initialValue: selectedMenu,
onSelected: (Item item) {
setState(() {
selectedMenu = item;
if (selectedMenu == Item.itemOne) {
infoDialog(context);
} else if (selectedMenu == Item.itemTwo) {
openDialog(context);
} else if (selectedMenu == Item.itemThree) {
final provider =
Provider.of<GoogleSignInProvider>(context, listen: false);
provider.logout();
}
});
},
itemBuilder: (context) => [
PopupMenuItem<Item>(
value: Item.itemOne,
child: Row(
children: const [
Padding(
padding: EdgeInsets.only(right: 12),
child: Icon(Icons.account_circle),
),
Text(
'Información',
),
],
),
),
PopupMenuItem<Item>(
value: Item.itemTwo,
child: Row(
children: const [
Padding(
padding: EdgeInsets.only(right: 12),
child: Icon(Icons.settings),
),
Text('Configuración'),
],
),
),
PopupMenuItem<Item>(
value: Item.itemThree,
child: Row(
children: const [
Padding(
padding: EdgeInsets.only(right: 12),
child: Icon(Icons.logout_outlined),
),
Text('Cerrar Sesión'),
],
),
),
],
child: CircleAvatar(
backgroundImage: NetworkImage(user.photoURL!),
),
)
],
The new Cards:
Card(
clipBehavior: Clip.antiAlias,
child: SizedBox(
width: 300,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image(
image: NetworkImage(widget.products.imageUrl),
fit: BoxFit.cover,
),
Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
child: Text(
widget.products.name,
style: Theme.of(context).textTheme.titleMedium,
),
),
Padding(
padding: const EdgeInsets.only(left: 8),
child: Text('Precio: ${widget.products.price}\$'),
),
Container(
margin: const EdgeInsets.only(left: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Cantidad: '),
Padding(
padding: const EdgeInsets.only(left: 8),
child: QuantityMenu(
quantityFuction: quantityFunction,
),
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 8, 8),
child: ElevatedButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(
const Color(0xFFFFFFFF),
),
backgroundColor: MaterialStateProperty.all<Color>(
const Color(0xFF6750A4),
),
),
onPressed: () => showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) => AlertDialog(
title: SizedBox(
width: 240,
height: 260,
child: QrImage(
data: data,
backgroundColor: Colors.white,
),
),
content: Text('ID del producto: $data'),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Cerrar')),
],
),
),
child: const Text(
'Mostrar QR',
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 8, 8),
child: ElevatedButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(
const Color(0xFFFFFFFF),
),
backgroundColor: MaterialStateProperty.all<Color>(
const Color(0xFF6750A4),
),
),
onPressed: () => showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) => AlertDialog(
title: Text(
'¿Desea eliminar el producto ${widget.products.name} de la base de datos?',
textAlign: TextAlign.center,
),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Cancelar')),
TextButton(
onPressed: () {
final docProducts = FirebaseFirestore.instance
.collection('products')
.doc(widget.products.id);
docProducts.delete();
Navigator.pop(context);
},
child: const Text('Eliminar')),
],
),
),
child: const Text(
'Eliminar',
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 8, 8),
child: ElevatedButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(
const Color(0xFFFFFFFF),
),
backgroundColor: MaterialStateProperty.all<Color>(
const Color(0xFF6750A4),
),
),
onPressed: () => showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) => AlertDialog(
content: Text(
'¿Desea añadir $quantity ${widget.products.name}(s) a la lista de compras? \n \n'
'Atencion!: Si este producto ya se encuentra en el carrito añadirlo de nuevo reemplazará el anterior',
textAlign: TextAlign.center,
),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Cancelar')),
TextButton(
onPressed: () {
double total = widget.products.price *
double.parse(quantity);
addToList(
id: widget.products.id,
total: total,
name: widget.products.name,
price: widget.products.price,
imgUrl: widget.products.imageUrl,
quantity: quantity)
.then((value) => Navigator.pop(context));
},
child: const Text('Añadir')),
],
),
),
child: const Text(
'Añadir al Carro',
),
),
),
],
),
],
),
),
);