Позиционированный виджет Flutter обрезает контент - PullRequest
1 голос
/ 20 июня 2020

Я пытаюсь создать виджет уведомлений с наложением цифр.

Я выполнил код здесь , чтобы создать виджет.

Используя этот код (без указания позиции), производит следующий виджет: Widget

Widget iconWidget() {
    return Stack(
      children: [
        Center(
            child: Container(
          child: Icon(
            icon,
            color: color,
          ),
        )),
        Positioned(
          child: CircleAvatar(
            child: Text('$count',
                style: TextStyle(fontSize: 12, color: Colors.white)),
            backgroundColor: count == 0 ? Colors.grey : Colors.black,
          ),
        )
      ],
    );
  }

However, as soon as I specify a position (right: 0), my widget gets gut off: введите описание изображения здесь

Widget iconWidget() {
    return Stack(
      children: <Widget>[
        Center(
            child: Container(
          child: Icon(
            icon,
            color: color,
          ),
        )),
        Positioned(
          right: 0,
          child: CircleAvatar(
            child: Text('$count',
                style: TextStyle(fontSize: 12, color: Colors.white)),
            backgroundColor: count == 0 ? Colors.grey : Colors.black,
          ),
        )
      ],
    );
  }

Мой виджет создается как значок в контроллере вкладок:

Tab(
  icon: IconWithCount(
          icon: FlutterIcons.heartbeat_faw5s,
          color: Colors.red,
          count: 5)
      .iconWidget(),
),

Полный класс, создающий виджет:

class IconWithCount {
  final IconData icon;
  final int count;
  final Color color;
  IconWithCount({
    this.icon,
    this.count,
    this.color,
  });

  Widget iconWidget() {
    return Stack(
      children: <Widget>[
        Center(
            child: Container(
          child: Icon(
            icon,
            color: color,
          ),
        )),
        Positioned(
          right: 0,
          child: CircleAvatar(
            child: Text('$count',
                style: TextStyle(fontSize: 12, color: Colors.white)),
            backgroundColor: count == 0 ? Colors.grey : Colors.black,
          ),
        )
      ],
    );
  }
}

1 Ответ

2 голосов
/ 20 июня 2020

Внутри стека просто добавьте это

overflow: Overflow.visible,
...