如何调整Flutter Container属性以实现目标顶部弧形UI样式？

问题原因 #

你当前设置的顶部圆角半径（1000）过大，会让容器顶部完全呈现大弧度半圆效果，同时文本完全居中的排版也和目标样式不符，可以根据你要实现的效果选择以下修改方案：

方案1：顶部仅边角做小圆角 #

如果目标样式是顶部大部分区域为平直状态，仅左右两个边角做圆角效果，调整圆角半径数值即可，同时调整文本位置适配排版：

Container(
  height: 150,
  child: Align(
    alignment: Alignment.topCenter,
    child: Padding(
      padding: const EdgeInsets.only(top: 40),
      child: Text(
        "A Project of Pera E16’ME",
        style: TextStyle(
            fontFamily: "NovaMono",
            fontSize: 20,
            color: Colors.white),
      ),
    ),
  ),
  decoration: BoxDecoration(
    // 调整为小半径圆角，数值可根据视觉效果微调
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(30),
        topRight: Radius.circular(30)),
    color: Color(0xff08367A),
  ),
)

方案2：顶部整体带平缓弧形 #

如果目标样式是顶部整体有一段平缓的向上凸起的弧形效果，不需要改圆角半径，只要把容器宽度设为大于屏幕宽度，让左右圆角部分超出屏幕显示范围即可：

// 记得导入dart:ui包获取屏幕尺寸
import 'dart:ui';

Container(
  // 宽度设为屏幕宽度的1.2倍，可根据弧度需要调整倍数
  width: window.physicalSize.width / window.devicePixelRatio * 1.2,
  height: 150,
  child: Align(
    alignment: Alignment.topCenter,
    child: Padding(
      padding: const EdgeInsets.only(top: 40),
      child: Text(
        "A Project of Pera E16’ME",
        style: TextStyle(
            fontFamily: "NovaMono",
            fontSize: 20,
            color: Colors.white),
      ),
    ),
  ),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(1000),
        topRight: Radius.circular(1000)),
    color: Color(0xff08367A),
  ),
)

使用该方案时需要注意外层要套一层居中的父组件，保证容器超出的左右部分均匀分布在屏幕两侧。

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