How to fix widget overflowing rounded border container flutter - flutter

Question

I have a container with topLeft border as rounded, in its child I have a column with a SingleChildScrollView having the widgets for each full name, mobile etc.
When I'm scrolling up these children come over the container and overflow the rounded border.
I want to fix this.
I want this to go behind the container and not come in front of it.
class SetupAccountScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return BaseWidget(
mainTitle: "Setup Account",
description:
"One last step to an awesome shopping experience, we’d like to know you more",
content: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 50,
),
FullNameInputWidget(),
MobileNumberInputWidget(),
AddressInputWidget(),
],
),
),
);
}
}
class BaseWidget extends StatelessWidget {
final String mainTitle;
final String description;
final Widget content;
BaseWidget({this.mainTitle, this.description, this.content});
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text(
"Back",
style: GoogleFonts.playfairDisplay(fontSize: 15),
),
leading: IconButton(
icon: Icon(
Icons.chevron_left,
size: 40,
),
onPressed: () {}),
backgroundColor: Colors.transparent,
),
body: Stack(
children: [
Positioned(
bottom: 0,
child: Container(
height: MediaQuery.of(context).size.height * 0.7,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.only(topLeft: Radius.circular(100))),
child: content),
),
Positioned.fill(
child: Align(
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 30.0, vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(mainTitle,
style: GoogleFonts.playfairDisplay(
color: Colors.white,
fontWeight: FontWeight.w400,
fontSize: 25)),
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(description,
style: GoogleFonts.playfairDisplay(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 15)),
),
],
),
)))
],
),
);
}
}

Answer 1

Instead of decoration for the container, use ClipRRect to make the round corner, like so.
Positioned(
bottom: 0,
child: ClipRRect(
borderRadius: BorderRadius.only(topLeft: Radius.circular(100)),
child: Container(
height: MediaQuery.of(context).size.height * 0.7,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: content,
),
),
),