Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter positioned widget cuts off content

I'm attempting to create a notification widget with a number overlay.

I've followed the code here to make the widget.

Using this code (not specifying a position), produces the following widget: Widget

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

However, as soon as I specify a position (right: 0), my widget gets gut off: enter image description here

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

My widget is being created as an icon within a tab controller:

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

Full class creating the widget:

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,
          ),
        )
      ],
    );
  }
}
like image 998
Duncan Pullen Avatar asked Jun 20 '20 10:06

Duncan Pullen


2 Answers

overflow is Deprecated. Use this:

Stack(
  clipBehavior: Clip.none, // <---
  children: [],
)
like image 56
CopsOnRoad Avatar answered Nov 01 '22 05:11

CopsOnRoad


Inside the stack , just add this

overflow: Overflow.visible,
like image 23
Anas Mohammed Avatar answered Nov 01 '22 05:11

Anas Mohammed