I am trying to overlay two Container()
to obtain this effect:
but i don't understand how to do.
Stack(
children: <Widget>[
Container(
height: 300,
width: MediaQuery.of(context).size.width,
child: Image(
image: AssetImage(
'assets/images/' image,
),
fit: BoxFit.cover,
),
),
Container(
height: 200,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(
MediaQuery.of(context).size.height * 0.05),
),
),
),
],
);
Could you help me?
CodePudding user response:
To position the widget inside Stack
use Positoned
or Align
widget.
child: SizedBox(
height: 300 200, ///total height of inner children
child: Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: Container(
height: 300,
...
),
),
Positioned(
bottom: 0,
child: Container(
height: 300,
....
),
),
],
),
),
You may also like LayoutBuilder
.