CODEWITHSUNDEEP
flutter
Marco Zielbauer
Marco Zielbauer

Reputation: 525

Flutter: Overlap Edge of Widget with second Widget

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

expected result

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

Upvotes: 8

Views: 8436

Answers (3)

JakesMD
JakesMD

Reputation: 2166

You could try my package (signed_spacing_flex). It's exactly the same as a normal Column (or Row and Flex). But it lets you set negative spacing which causes its children to overlap. You can also set which children should be on top when they overlap.

In your case it would be something like:

SignedSpacingColumn(
  spacing: -16.0,
  stackingOrder: StackingOrder.lastOnTop,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.red,
    ),
    FloatingActionButton(
      child: const Icon(Icons.arrow_forward),
      onPressed: () {},
    )
  ],
)

It works with expanded children if you need.

Upvotes: 0

ibhavikmakwana
ibhavikmakwana

Reputation: 10101

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:

enter image description here

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.

Upvotes: 21

Marcelo Glasberg
Marcelo Glasberg

Reputation: 30879

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.

Upvotes: 1

Related Questions