如何使用Stack Widget创建无背景图的弧形设计按钮

问题 #

请教如何使用Stack Widget创建带有弧形设计且不使用背景图片的按钮？

实现方案 #

通过Stack组件叠加自定义弧形背景（用ClipPath+CustomClipper绘制）和按钮内容，无需依赖图片资源，代码示例如下：

import 'package:flutter/material.dart';

class CurvedStackButton extends StatelessWidget {
  final String label;
  final VoidCallback onTap;

  const CurvedStackButton({
    super.key,
    required this.label,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Stack(
        alignment: Alignment.center,
        children: [
          // 自定义弧形背景
          ClipPath(
            clipper: _ButtonCurveClipper(),
            child: Container(
              width: 220,
              height: 65,
              color: const Color(0xFF4A90E2),
            ),
          ),
          // 按钮文本
          Text(
            label,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 19,
              fontWeight: FontWeight.w600,
            ),
          ),
        ],
      ),
    );
  }
}

// 自定义裁剪器，绘制弧形轮廓
class _ButtonCurveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 起点：左上角
    path.moveTo(0, 0);
    // 右上角外凸弧形
    path.quadraticBezierTo(
      size.width,
      0,
      size.width - 25,
      size.height / 2,
    );
    // 右下角内凹弧形
    path.quadraticBezierTo(
      size.width,
      size.height,
      0,
      size.height,
    );
    // 闭合路径
    path.close();
    return path;
  }

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

// 调用示例
void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      backgroundColor: Colors.grey[100],
      body: Center(
        child: CurvedStackButton(
          label: "提交",
          onTap: () {},
        ),
      ),
    ),
  ));
}

关键说明 #

• ClipPath + CustomClipper 可以完全自定义按钮的弧形轮廓，灵活调整弧度、尺寸，无需图片；
• Stack 负责将弧形背景与按钮文本（或图标）叠加，通过alignment控制内容居中；
• 外层用InkWell替代GestureDetector，可以实现水波纹点击效果，更符合Material Design规范。

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