如何在Flutter中实现半径超过屏幕宽度的圆形设计？

直接给Container设置超屏幕宽高没效果，是因为默认布局会把组件约束在屏幕范围内，以下两种方法可以实现需求：

方法一：Stack + Positioned 定位超大圆形 #

通过创建直径远大于屏幕宽度的圆形，用Positioned让圆形部分超出屏幕，只显示需要的区域：

import 'package:flutter/material.dart';

class LargeCirclePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    // 圆形直径设为屏幕宽度的3倍，确保半径足够大
    final circleSize = screenSize.width * 3;

    return Scaffold(
      body: Stack(
        children: [
          Positioned(
            bottom: 0,
            // 让圆形水平居中，左右超出屏幕
            left: (screenSize.width - circleSize) / 2,
            child: Container(
              width: circleSize,
              height: circleSize,
              decoration: const BoxDecoration(
                color: Colors.blueAccent,
                shape: BoxShape.circle,
              ),
            ),
          ),
          // 叠加前景内容
          const Center(
            child: Text(
              '超大半径圆形效果',
              style: TextStyle(fontSize: 22, color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }
}

方法二：Transform.scale 放大圆形 #

用Transform.scale将基础圆形放大，超出屏幕的部分会自然显示，无需计算位置：

import 'package:flutter/material.dart';

class LargeCirclePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      body: Stack(
        children: [
          Align(
            alignment: Alignment.bottomCenter,
            child: Transform.scale(
              scale: 3, // 放大倍数，数值越大半径效果越明显
              child: Container(
                width: screenWidth,
                height: screenWidth,
                decoration: const BoxDecoration(
                  color: Colors.blueAccent,
                  shape: BoxShape.circle,
                ),
              ),
            ),
          ),
          // 前景内容
          const Center(
            child: Text(
              '超大半径圆形效果',
              style: TextStyle(fontSize: 22, color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }
}

两种方法核心都是让圆形尺寸足够大，同时突破屏幕布局约束，只展示圆形的一部分，从而呈现出半径远超屏幕宽度的弧形视觉效果。

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