'Flutter overflowed positioned Button is not clickable

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:

enter image description here

flutterdartc++gcccachingoptimizationg++


Solution 1:[1]

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

Solution 2:[2]

Container(
        width: 150,
        height: 180,
        child: Stack(
          children: [
            Container(
                width: double.infinity,
                height: 150,
               child: Image.asset('assets/images/image.jpg', fit: BoxFit.cover,)
            ),
            Container(
              alignment: Alignment.bottomCenter,
              child: FloatingActionButton(
                child: Icon(Icons.add),
                onPressed: () {
                  print('FAB tapped!');
                },
                backgroundColor: Colors.blueGrey,
              ),
            ),
          ],
        ),
      ),

Fab button is not clickable because it renders outside of stack as you have given -ve bottom, Ideally, you should have parent container and inside it has all stack widget you should render it. Here I have used hardcoded values, but you should use media query as per your requirement

Like:

Container(
        width: MediaQuery.of(context).size.width * 0.3,
        height: MediaQuery.of(context).size.height * 0.3,
        child: Stack(
          children: [
            Container(
                width: double.infinity,
                height: MediaQuery.of(context).size.height * 0.26,
               child: Image.asset('assets/images/jitesh.jpg', fit: BoxFit.cover,)
            ),
            Container(
              alignment: Alignment.bottomCenter,
              child: FloatingActionButton(
                child: Icon(Icons.add),
                onPressed: () {
                  print('FAB tapped!');
                },
                backgroundColor: Colors.blueGrey,
              ),
            ),
          ],
        ),
      ),

Solution 3:[3]

The problem is when a child overflows on Stack that has Clip.none behavior, the part that is outside of Stack would not be recognized to be clicked.

Solution :

Wrap the Stack with Column and add the space you want to be outside of Stack :

final _clipSpace = 30;
Stack(
  clipBehavior: Clip.none,
  children: [
    Column(
      children: [
        DecoratedBox(
          decoration: const BoxDecoration(// decorate the box //
           ),
          child: Column(
            children: [
              // column's children
                ],
              )
            ],
          ),
        ),
         // clip space
        const SizedBox(height: _clipSpace,)
      ],
    ),
    const Positioned(
      child: _ActionButton(),
      left: 0,
      right: 0,
      bottom: 0,
    ),
  ],
);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Jitesh Mohite
Solution 3 Vahid Rajabi

Related Questions