Флаттер баннер не подходит

Question

У меня проблема с виджетом баннера.Чтобы продемонстрировать это, я сделал демонстрационный код.Я хочу иметь баннер в верхнем правом углу контейнера, но он уродлив, поскольку переполняет его дочерний элемент (пожалуйста, см. Прикрепленное изображение).

Вот мой код:

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!"),),
          ),
        ),
      ),
    );
  }
}

Я пытался играть с полем, но у меня все еще есть такое поведение, даже если поле установлено на 0.

Как можноизбежать этого «переполнения баннера»?

Большое спасибо!

Answer 1

Просто добавление ClipRect к коду Op

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!"),),
            ),
          ),
        ),
      ),
    );

Инвертирование контейнера и баннера

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

Добавление ClipRect к инвертирующему контейнеру и баннеру

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

Поскольку вы потратили время и разместили как образец кода, так и изображение, я решил вернуть услугу.

Answer 2

Оберните ваш Banner внутри ClipRect виджета и удалите поле:

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

Answer 3

Подумайте об обмене Баннером и его дочерним элементом, Контейнером. В вашем коде баннер размещен на контейнере. Вместо этого поместите это в карту. Это должно выглядеть так

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!"),),
        ),
      ),
    ),
  );