如何在Flutter中实现带边框的菱形按钮？

实现思路 #

通过两个核心能力组合实现需求：

• 用Transform.rotate将正方形组件旋转45度得到基础菱形结构
• 基础边框需求直接通过Container的decoration属性即可实现，需要渐变、虚线等高自定义边框的场景，推荐配合CustomPaint自定义绘制

完整示例代码 #

import 'package:flutter/material.dart';

class DiamondBorderButton extends StatelessWidget {
  // 可自定义参数
  final double size; // 按钮尺寸
  final Color borderColor; // 边框颜色
  final double borderWidth; // 边框宽度
  final Color? backgroundColor; // 按钮背景色
  final Widget? child; // 内部内容（图标、文字等）
  final VoidCallback? onTap; // 点击回调

  const DiamondBorderButton({
    super.key,
    this.size = 80,
    required this.borderColor,
    this.borderWidth = 2,
    this.backgroundColor,
    this.child,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Transform.rotate(
        // 旋转45度得到菱形外形
        angle: 45 * 3.1415926 / 180,
        child: Container(
          width: size,
          height: size,
          decoration: BoxDecoration(
            color: backgroundColor,
            border: Border.all(color: borderColor, width: borderWidth),
            // 需要圆角菱形的话打开下方注释，调整圆角数值即可
            // borderRadius: BorderRadius.circular(8),
          ),
          // 内部内容反向旋转45度，保证内容显示方向正常
          child: Transform.rotate(
            angle: -45 * 3.1415926 / 180,
            child: Center(child: child),
          ),
        ),
      ),
    );
  }
}

// 调用示例
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: DiamondBorderButton(
          borderColor: Colors.blueAccent,
          backgroundColor: Colors.white,
          onTap: () => print("菱形按钮被点击"),
          child: const Icon(Icons.add, color: Colors.blueAccent, size: 30),
        ),
      ),
    ),
  ));
}

可选优化 #

• 需要点击水波纹效果的话，把GestureDetector换成InkWell，外层套Material组件即可保证水波纹正常渲染
• 虚线、渐变等特殊边框需求，替换Container的decoration属性，改用CustomPaint自定义绘制边框逻辑即可

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