如何在Flutter UI中添加3D标签？是否有可用的相关插件包？

• 插件方案

  • 可以试试flutter_corner_tag插件，它支持自定义角落标签的样式、位置、颜色，还能通过阴影效果模拟3D感，引入后简单配置就能生成类似效果。
  • 另外badges插件也能实现类似功能，虽然它主打各类徽章，但调整位置、角度和阴影参数后，也能做出带3D感的角落标签。

• 自定义实现（无需插件）
  如果找不到完全匹配的插件，用Flutter自带组件也能快速实现：

  1. 用Stack组件将标签叠加在目标Widget上层
  2. 通过Transform.rotate给标签添加倾斜角度，模拟3D透视效果
  3. 给标签容器设置BoxShadow实现立体阴影
  4. 将标签背景色设为红色，调整位置到角落即可

以下是一个简单的代码示例：

import 'dart:math' as math;
import 'package:flutter/material.dart';

class Corner3DTag extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 替换成你的目标UI组件
        Container(
          width: 200,
          height: 200,
          color: Colors.white,
          border: Border.all(color: Colors.grey.shade300),
        ),
        // 角落3D标签
        Positioned(
          top: 0,
          right: 0,
          child: Transform.rotate(
            angle: math.pi / 4,
            origin: const Offset(12, -12),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 22, vertical: 6),
              color: Colors.red.shade600,
              child: const Text(
                "NEW",
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 12,
                ),
              ),
              decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.shade600,
                    offset: const Offset(3, 3),
                    blurRadius: 4,
                  )
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

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