Flutter特定弧形容器样式实现求助

• 需求样式：容器左上角、右上角为直角，右下角为小圆角（半径32），左下角为大弧度圆角（弧度尺寸基于屏幕宽度的40%），背景为蓝色，容器占据屏幕高度的80%左右，四周带有指定边距。

以下是实现该样式的Flutter代码：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // 容器边距：左右各16，顶部16，底部64
      margin: EdgeInsets.only(right: 16, left: 16, top: 16, bottom: 64),
      // 容器高度为屏幕高度的80%
      height: MediaQuery.of(context).size.height * 0.80,
      // 容器宽度为屏幕宽度减去32（抵消左右边距）
      width: MediaQuery.of(context).size.width - 32,
      decoration: BoxDecoration(
        // 容器背景色设为蓝色
        color: Colors.blue,
        // 配置圆角：左上、右上为直角，左下为大弧度，右下为小圆角
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(0),
          bottomLeft: Radius.circular(MediaQuery.of(context).size.width * 0.4),
          bottomRight: Radius.circular(32.0),
          topRight: Radius.circular(0)),
      ),
    );
  }
}

关键说明 #

• 用BorderRadius.only单独控制每个角的圆角半径，实现差异化弧形效果
• 依赖MediaQuery获取屏幕尺寸，保证容器在不同设备上的适配性
• 边距、尺寸、圆角半径参数可根据需求自行调整

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