CODEWITHSUNDEEP
dartflutterflutter-layout
ubernal
ubernal

Reputation: 83

Chop child view so it doesn't exceed the parent view

I need to rotate a text inside a card. What I would like to obtain is this: Desired result

But I don't know how can i do this with flutter. The problem I am facing is that the text view exceeds the card. enter image description here

Here is what I have so far:

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,
              ),
            ),
          ),
        ),

      ],
    ),
  ),
);
}

And here it's how it looks like: enter image description here

Thanks in advance

Upvotes: 0

Views: 174

Answers (1)

rmtmckenzie
rmtmckenzie

Reputation: 40433

The simplest way to make a banner is to use the Banner widget. However, it still paints outside the bounds of the item you're using, and unfortunately is not nearly as configurable as it could be (and doesn't handle things like longer text).

To fix the painting outside the bounds, all you need to do is add a ClipRect right under your card widget, and that should fix the overflow with the Banner widget or for what you're doing with the rotated box.

Depending on how configurable you need the banner to be, you could re-implement the Banner widget - using TextPainter you could figure out the length of the text and resize automatically based on it if need be (and to remove the dropshadow...)

Upvotes: 1

Related Questions