Flutter滚动时内容覆盖Container圆角区域，如何让内容从圆角下方穿行？

问题现象 #

使用Scaffold搭建界面时，body区域的Container设置了顶部圆角，未滚动时界面显示正常，滚动SingleChildScrollView内的内容时，内容会超出圆角边界覆盖圆角部分，需要实现滚动内容从圆角下方穿过的效果。

原有代码 #

return Scaffold(
      backgroundColor: appGreenColor,
      appBar: new AppBar(
        centerTitle: false,
        backgroundColor: appGreenColor,
        elevation: 0,
        title: Padding(
          padding: const EdgeInsets.only(left: 16.0),
          child: Image.asset(
            "lib/Assets/bellazIcon.png",
            fit: BoxFit.fill,
            height: 40,
            width: 78,
          ),
        ),
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 8.0),
            child: IconButton(
                icon: Image.asset(
                  "lib/Assets/notification1.png",
                  height: 22,
                  width: 22,
                ),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => NotificationList()));
                }),
          )
        ],
      ),
      body: Container(
        height: MediaQuery.of(context).size.height - 70,
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(30), topRight: Radius.circular(30))),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 3),
                child: Column(
                  children: [
                    locationView(),
                    imageSlider(),
                    genderView(),
                    categories(),
                    isMan == true
                        ? maleTopBranches.length == 0
                            ? Container()
                            : topRatedSalons(maleTopBranches)
                        : topRatedSalons(femaleTopBranches),
                  ],
                ),
              ),
              offerImage(),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 2.0),
                child: Column(
                  children: [
                    services(),
                    nearByAppointment(),
                  ],
                ),
              ),
              infoImage()
            ],
          ),
        ),
      ),
    );

效果对比 #

• 未滚动正常效果：
• 滚动时异常效果：

修复方案 #

Flutter中Container默认不会裁剪超出自身边界的子组件内容，因此滚动的内容会覆盖圆角区域。只需要给带圆角的Container添加clipBehavior: Clip.hardEdge属性，强制Container裁剪超出边界的内容即可实现需求。
修改后的核心代码：

Container(
   clipBehavior: Clip.hardEdge,
   height: MediaQuery.of(context).size.height - 70,
   decoration: const BoxDecoration(
   color: Colors.white,
   borderRadius: BorderRadius.only(topLeft: Radius.circular(30), 
                     topRight: Radius.circular(30))),
   child: ...,
)

内容的提问来源于stack exchange，提问作者Deepak