Flutter开发中为第二个Container设置顶部圆角不生效该如何解决？

圆角不生效的核心原因 #

• 设置了BorderRadius的Container没有配置背景色，圆角和Scaffold默认的白色背景完全重叠，无法看出效果
• 仅配置了左上角圆角，和示例图的顶部双圆角效果不符
• 圆角Container没有覆盖下方按钮区域，下半部分整体效果和预期不一致

修复后的完整代码 #

import 'package:flutter/material.dart';

class WelcomeScreen extends StatefulWidget {
  @override
  _WelcomeScreenState createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
              child: Container(
            width: double.infinity,
            color: Colors.green,
            child: Image.asset("images/page1.png"),
          )),
          // 整个下半部分白色圆角容器
          Container(
            width: double.infinity,
            decoration: BoxDecoration(
              // 加白色背景，才能看出圆角效果
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(40),
                topRight: Radius.circular(40),
              ),
            ),
            // 可选添加，防止内容溢出圆角区域
            clipBehavior: Clip.antiAlias,
            padding: EdgeInsets.only(top: 30, bottom: 20),
            child: Column(
              children: [
                Text(
                  "Save and",
                  style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
                ),
                Text(
                  "Withdraw Money",
                  style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
                ),
                SizedBox(
                  height: 15,
                ),
                Text(
                  'you can find trainers',
                  style: TextStyle(
                    fontSize: 20,
                  ),
                  textAlign: TextAlign.center,
                  overflow: TextOverflow.ellipsis,
                  maxLines: 3,
                ),
                Text(
                  'at our best trainers and help',
                  style: TextStyle(
                    fontSize: 20,
                  ),
                  textAlign: TextAlign.center,
                  overflow: TextOverflow.ellipsis,
                  maxLines: 3,
                ),
                Text(
                  'and help you reacg the Top',
                  style: TextStyle(
                    fontSize: 20,
                  ),
                  textAlign: TextAlign.center,
                  overflow: TextOverflow.ellipsis,
                  maxLines: 3,
                ),
                SizedBox(
                  height: 25,
                ),
                Container(
                  padding: EdgeInsets.only(bottom: 20),
                  height: 60,
                  width: 150,
                  child: ElevatedButton(
                      style: ElevatedButton.styleFrom(primary: Colors.green),
                      onPressed: () {},
                      child: Text("NEXT")),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

补充说明 #

如果后续需要给圆角容器加阴影、边框等效果，都可以直接在BoxDecoration里配置对应的属性即可。

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