I created a Flutter BottomAppBar and an icon in it. The page background color, the BottomAppBar’s color and the icon color is the same: Colors.white. But the BottomAppBar is always darker, why?
BottomAppBar(
height: 50,
color: Colors.white,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: 30,
child: IconButton(
constraints: const BoxConstraints(),
style: const ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
padding: EdgeInsets.zero,
icon: Icon(Icons.archive, color: Colors.white, size: 30),
2
Answers
This is due to material3 support in the latest versions of flutter.
You can disable material3 by adding a
ThemeData
on yourMaterialApp
:Or, if you still want to support material3. you can specifically set the theme:
Result (in both cases)
The slightly tinted color comes from the
surfaceTintColor
property. Change it to transparent to remove the effect.