Flutter banner does not fit

Question

I have a problem with banner widget. To demonstrate it I have made some demonstration code. What I want is to have a banner in the top right corner of a container, but it is ugly, as it overflows its child (pls. see the attached image).

Here is my code:

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Banner(
          message: "hello",
          location: BannerLocation.topEnd,
          color: Colors.red,
          child: Container(
            margin: const EdgeInsets.all(10.0),
            color: Colors.yellow,
            height: 100,
            child: Center(child: Text("Hello, banner!"),),
          ),
        ),
      ),
    );
  }
}

I tried to play with the margin, but I still have this behavior even if margin set to 0.

How can avoid this 'banner overflow'?

Thanks a lot!

Solution 1

Just adding ClipRect to Op's code

return Scaffold(
      body: Center(
        child: ClipRect(
          child: Banner(
            message: "hello",
            location: BannerLocation.topEnd,
            color: Colors.red,
            child: Container(
              margin: const EdgeInsets.all(10.0),
              color: Colors.yellow,
              height: 100,
              child: Center(child: Text("Hello, banner!"),),
            ),
          ),
        ),
      ),
    );

Inverting the container and the banner

return Scaffold(
      body: Center(
        child: Container(
          margin: const EdgeInsets.all(10.0),

          height: 100,
          color: Colors.yellow,
          child: Banner(
            message: "hello",
            location: BannerLocation.topEnd,
            color: Colors.red,
            child: Container(


              child: Center(child: Text("Hello, banner!"),),
            ),
          ),
        ),
      ),

Adding ClipRect to inverting Container and Banner

return Scaffold(
      body: Center(
        child: ClipRect(
        child: Container(
          margin: const EdgeInsets.all(10.0),

          height: 100,
          color: Colors.yellow,

            child: Banner(
              message: "hello",
              location: BannerLocation.topEnd,
              color: Colors.red,
              child: Container(


                child: Center(child: Text("Hello, banner!"),),
              ),
            ),
          ),
        ),
      ),
    );

https://docs.flutter.io/flutter/widgets/ClipRect-class.html

Since you took the time and posted both sample code and an image, I decided to return the favor.

Solution 2

Wrap your Banner inside ClipRect widget and remove the margin :

            ClipRect(
                      child: Banner(
                        message: "hello",
                        location: BannerLocation.topEnd,
                        color: Colors.red,
                        child: Container(
                          color: Colors.yellow,
                          height: 100,
                          child: Center(
                            child: Text("Hello, banner!"),
                          ),
                        ),
                      ),
                    ),

Solution 3

Consider swapping the Banner and its child, Container. In your code, the banner is placed on the container. Instead, place it on the card. It should look like this

Scaffold(
    body: Center(
      child: Container(
        margin: const EdgeInsets.all(10.0),
        color: Colors.yellow,
        height: 100,
        child: Banner(
          message: "hello",
          location: BannerLocation.topEnd,
          color: Colors.red,
          child: Center(child: Text("Hello, banner!"),),
        ),
      ),
    ),
  );

Comments

[Tom]

Thanks a lot for the detailed answer!

[user1462442]

Well, you made a moderately detailed question

[Deepak swain]

Adding ClipRRect does the trick. Thanks for the Answer