Flutter overflowed positioned Button is not clickable

Question

I have a stack widget parenting a Positioned widget like this:

Stack(
        overflow: Overflow.visible,
        children: [
          Container(
            width: 150,
            height: 150,
          ),
          Positioned(
            child: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {
                print('FAB tapped!');
              },
              backgroundColor: Colors.blueGrey,
            ),
            right: 0,
            left: 0,
            bottom: -26,
          ),
        ],
      ),

That part of the fab which is placed outside the container is not clickable, what is the solution? and here is a screenshot:

Answer 1

try this :

      Stack(
        overflow: Overflow.visible,
        children: [
          Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>
            [
              Container(width: 150, height: 150, color: Colors.yellow),
              Container(width: 150, height: 28, color: Colors.transparent),
            ],
          ),
          Positioned(
            child: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {
                print('FAB tapped!');
              },
              backgroundColor: Colors.blueGrey,
            ),
            right: 0,
            left: 0,
            bottom: 0,
          ),
        ],
      )

you should keep button inside of stack if you want it to stay clickable

Answer 2

Providing an updated answer since overflow specification is deprecated after v1.22.0-12.0.pre. clipBehavior is the replacing property:

  Stack(
    clipBehavior: Clip.none,
    children: [
      Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>
        [
          Container(width: 150, height: 150, color: Colors.yellow),
          Container(width: 150, height: 28, color: Colors.transparent),
        ],
      ),
      Positioned(
        child: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            print('FAB tapped!');
          },
          backgroundColor: Colors.blueGrey,
        ),
        right: 0,
        left: 0,
        bottom: 0,
      ),
    ],
  )

Note: credits to @Amir's answer