如何用Flutter的Stack或等效组件实现指定UI效果？

我想用Flutter实现目标UI，但用Container做不出设计要求的完美弧形。现在用了Stack组件，但Container宽度没法超出屏幕。

期望效果 #

当前效果 #

当前代码 #

import 'package:flutter/material.dart';
import 'package:smarthomeapp/colors.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            Padding(
              padding: const EdgeInsets.all(4.0),
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height / 1.5,
                decoration: BoxDecoration(
                  color: AppColors.containerColor,
                  border: Border.all(
                    color: Colors.black,
                    width: 2,
                  ),
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(10),
                    topRight: Radius.circular(10),
                    bottomLeft: Radius.circular(30),
                    bottomRight: Radius.circular(30),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解决方案 #

要实现底部弧形超出屏幕的效果，核心是让容器宽度大于屏幕宽度，再通过布局组件调整位置，同时配合圆角或自定义裁剪路径匹配设计。

方法一：扩大容器宽度+居中对齐 #

直接让容器宽度超过屏幕，在Stack中居中放置，就能让左右两侧超出屏幕形成弧形，同时调整圆角半径更贴近设计：

import 'package:flutter/material.dart';
import 'package:smarthomeapp/colors.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    // 容器宽度设为屏幕的1.2倍，可根据设计调整
    final containerWidth = screenWidth * 1.2;
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            Align(
              alignment: Alignment.topCenter,
              child: Container(
                width: containerWidth,
                height: MediaQuery.of(context).size.height / 1.5,
                decoration: BoxDecoration(
                  color: AppColors.containerColor,
                  border: Border.all(
                    color: Colors.black,
                    width: 2,
                  ),
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(10),
                    topRight: Radius.circular(10),
                    bottomLeft: Radius.circular(80),
                    bottomRight: Radius.circular(80),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

方法二：自定义ClipPath实现精准弧形 #

如果设计的弧形不是简单的圆角，可以自定义裁剪路径实现更精准的效果：

import 'package:flutter/material.dart';
import 'package:smarthomeapp/colors.dart';

// 自定义底部弧形裁剪器
class BottomArcClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 处理顶部左侧圆角
    path.lineTo(10, 0);
    path.arcToPoint(const Offset(0, 10), radius: const Radius.circular(10));
    // 左侧边缘到弧形起点
    path.lineTo(0, size.height - 80);
    // 绘制底部弧形
    path.arcToPoint(
      Offset(size.width, size.height - 80),
      radius: const Radius.circular(120),
      clockwise: false,
    );
    // 右侧边缘到顶部右侧圆角
    path.lineTo(size.width, 10);
    path.arcToPoint(Offset(size.width - 10, 0), radius: const Radius.circular(10));
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            Align(
              alignment: Alignment.topCenter,
              child: ClipPath(
                clipper: BottomArcClipper(),
                child: Container(
                  width: screenWidth * 1.25,
                  height: MediaQuery.of(context).size.height / 1.5,
                  decoration: BoxDecoration(
                    color: AppColors.containerColor,
                    border: Border.all(
                      color: Colors.black,
                      width: 2,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

注意事项 #

• 超出屏幕的容器必须放在Stack中，通过Align或Positioned控制位置，避免被屏幕边缘裁剪。
• 可根据设计图调整容器宽度比例、圆角半径或自定义裁剪器的参数，直到匹配期望效果。
• 如果需要保留顶部的小圆角，无论是用BorderRadius还是自定义ClipPath，都要单独处理顶部的圆角逻辑。

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