I've got a problem with Stack and Positioned widget.
I'm trying to do something like this (picture below).
But instead I have something like this.
How can I move this mid rectangle up, to have divide screen in half like on first picture.
My code below:
return Scaffold(
backgroundColor: Colors.cyan,
body: SingleChildScrollView(
child: Column(
children: [
Stack(
children: [
Container(
decoration: const BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(20),
),
),
height: MediaQuery.of(context).size.height * 0.55,
),
],
),
Positioned(
bottom: 100,
child: Card(
child: Container(
height: 100,
width: MediaQuery.of(context).size.width - 80,
color: Colors.red,
),
),
),
],
),
),
);
Thanks for help
There are few things, you need to stack children top to bottom and the UI will render bottom to top. Play with this widget for now.
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.cyan,
body: LayoutBuilder(
builder: (context, constraints) => SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: constraints.maxHeight * .6 + 70, //70 for bottom
child: Stack(
children: [
Positioned(
top: 0,
bottom: 70, // to shift little up
left: 0,
right: 0,
child: Container(
decoration: const BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(20),
),
),
width: constraints.maxWidth,
height: constraints.maxHeight * 0.6,
),
),
Positioned(
top: constraints.maxHeight * .4,
height: 400,
left: 10,
right: 10,
child: ClipRRect(
borderRadius: BorderRadius.circular(24),
child: Card(
child: Container(
color: Colors.red,
),
),
),
),
],
),
),
],
),
),
),
);
}