Flutter: Overlap Edge of Widget with second Widget

Issue

I want to overlap the bottom edge of a widget with another widget so that it looks like this:

I am using a stack to position the arrow button over the card. At the moment I just set the position with an invisible box above it. The issue is that this method only works for that exact resolution – it should be screen size independent.

The necessary code for the widget:

Stack(
 children: <Widget>[
  Container( //background
   height: 100,
   width: 100,
  ),
  FloatingActionButton(
   child: Icon(Icons.arrow_forward),
   onPressed: () {},
  )
 ],
)

Solution

Update – April 2021

You can no longer use the overflow property in a Stack widget as it has been deprecated. Use clipBehaviour instead. Source: Flutter docs

You can use the Stack and Positioned widget to achieve this UI.

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

Output:

Update – March 2022

The Area which is outside of Stack won’t be clickable due to the platform limitation, and that is how the Stack widget works.

You can learn more about the same in this issue.

Answered By – ibhavikmakwana

Answer Checked By – Mary Flores (FlutterFixes Volunteer)