I have a screen that has a SafeArea widget on top and then everything inside is wrap with container and pass as a body to safearea. But when I want to change the container color, it stays always white.
Did I implement this UI wrong? How can I change this color?
class _MeetingScreenState extends State<MeetingScreen> {
@override
Widget build(BuildContext context) {
return SafeArea(
left: false,
right: false,
child: Container(
// Container color to change
color: Colors.black87,
child: Material(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ActionIconButton(
iconState: false,
iconStateOn: Icons.cameraswitch_outlined,
iconStateOff: Icons.cameraswitch_outlined),
Column(
children: const [
Text('Meeting title'),
// TODO implement meeting time
Text('04:28')
],
),
ActionIconButton(
iconState: _switchCamera,
iconStateOn: Icons.volume_up_outlined,
iconStateOff: Icons.volume_off_outlined,
iconBackgroundColor: AppColors.white,
activeIconColor: AppColors.white,
inactiveColor: AppColors.whiteWithOpacity,)
],
),
)
],
),
),
),
),
);
}
}
2
Answers
Material
also applies color and it is over the one of theContainer
.You can remove the
Container
and give your color to theMaterial
widget:Change
with
The Material widget is responsible for:
Clipping: If clipBehavior is not Clip.none, Material clips its widget sub-tree to the shape specified by shape, type, and borderRadius. By default, clipBehavior is Clip.none for performance considerations. See Ink for an example of how this affects clipping Ink widgets.
Elevation: Material elevates its widget sub-tree on the Z axis by elevation pixels, and draws the appropriate shadow.
Ink effects: Material shows ink effects implemented by InkFeatures like InkSplash and InkHighlight below its children.
so need to add the colors in the material widget as per Valentin Vignal Answer . i hope you understand .