How to fix widget overflowing rounded border container 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,
          ),
        ),
      ),