Flutter: Overlap Edge of Widget with second Widget

Question

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: () {},
  )
 ],
)

Answer 1

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.

Answer 2

As of November 2019 I'd like to add a second solution:

Using package: https://pub.dev/packages/assorted_layout_widgets

var widget1 = ...;
var widget2 = ...;

ColumnSuper(  
  children: [widget1, widget2],    
  innerDistance: -26,
  );

The difference from this solution to the one using Stack is that Positioned widgets in a Stack don't occupy vertical space. However, the ColumnSuper will have the size of all of its children widgets. Note I am the author of this package.