砍掉子视图，使其不超过父视图

Question

我需要旋转卡内的文本。我想获得的是：

但是我不知道该如何应对。我面临的问题是文本视图超出了卡片。

这是我到目前为止所拥有的：

Widget cardDetails(String title, String imgPath) {
return Material(
  elevation: 8.0,
  borderRadius: BorderRadius.circular(15.0),
  child: Container(
    height: 135.0,
    width: 135.0,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0), color: Colors.white),
    child: Stack(
      alignment: Alignment.topLeft,
      children: <Widget>[
        Transform.rotate(
          angle: -pi / 4,
          child: Container(
            height: 15.0,
            width: 55.0,
            alignment: Alignment.topCenter,
            color: const Color(0xFFFFd77B),
            child: Text(
              title,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 12.0,
              ),
            ),
          ),
        ),

      ],
    ),
  ),
);
}

这是它的样子：

预先感谢

Answer 1

制作横幅的最简单方法是使用Banner widget。但是，它仍然在您正在使用的项目的边界之外进行绘制，不幸的是，它的可配置性不如它可能配置的那样（并且无法处理较长的文本）。

要修复绘画的边界，您需要做的就是在card小部件的正下方添加一个ClipRect，这应该使用Banner小部件或您对旋转框的操作来解决溢出问题。

根据横幅广告的可配置性，您可以重新实现Banner widget-使用TextPainter，您可以确定文本的长度，并根据需要自动调整其大小（并删除阴影...）