Flutter定位的小部件会切断内容

Question

我正在尝试创建一个带有数字覆盖的通知小部件。

我已经按照代码here制作了窗口小部件。

使用此代码（未指定位置），将产生以下窗口小部件：

Widget iconWidget() {
    return Stack(
      children: <Widget>[
        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,
          ),
        )
      ],
    );
  }

但是，一旦我指定了位置（右：0），我的小部件就会掉线：

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

Answer 1

在堆栈内部，只需添加

overflow: Overflow.visible,

已编辑：

已弃用{@ 1}下面的@CopsOnRoad。改为使用：

overflow

Answer 2

overflow已过时。使用这个：

Stack(
  clipBehavior: Clip.none, // <---
  children: [],
)

Answer 3

在android { ... compileOptions { sourceCompatibility = JavaVersion.VERSION_11 targetCompatibility = JavaVersion.VERSION_11 } kotlinOptions { jvmTarget = "11" } } 内使用Stack

ConstrainedBox