Блог

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

Вот мой код:

 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.

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

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

Просто добавляю 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

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

Оберните свой 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!"),
                          ),
                        ),
                      ),
                    ),
  

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

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