After applying this code, the design will match the expected output
```
import 'package:flutter/material.dart';
class UpcomingSessionItem extends StatelessWidget {
const UpcomingSessionItem({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Stack(
clipBehavior: Clip.none,
alignment: AlignmentDirectional.bottomCenter,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Image.asset('assets/images/yoga-1.jpg'),
),
Positioned(
bottom: -70,
left: 20,
right: 20,
child: Container(
width: 300,
height: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
padding: EdgeInsets.all(20),
child: Column(
children: [
Row(
children: [
Column(
children: [
Text(
"9 am - 10:30 am",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text("Yoga for Beginners with Emily Cassel"),
],
),
],
),
],
),
),
),
],
),
),
),
);
}
}
```
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.
```dart
@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,
),
),
),
),
],
),
),
],
),
),
),
);
}
```
[![enter image description here][1]][1]
[1]: https://i.sstatic.net/nzvRo.png
