CODEWITHSUNDEEP
flutter
Coalery
Coalery

Reputation: 61

Flutter z-index in Column

I want to make shadow in the red circle in image.

image

My code:

  @override
  Widget build(BuildContext context) {
    print('Listing Card Unit Build');
    return Card(
      elevation: 5,
      margin: EdgeInsets.all(10),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          _buildUpperSpace(),
          _buildImageSpace(),
          _buildTextSpace(),
          _buildProductSpace(),
          _buildButtonSpace()
        ],
      )
    );
  }

In code, I want to add shadows between _buildUpperSpace() and _buildImageSpace(), and between all at below of _buildImageSpace() and _buildImageSpace().

So, _buildUpperSpace() have to be on _buildImageSpace(), and all at below of _buildImageSpace() have to be on _buildImageSpace().

Thanks.

Upvotes: 2

Views: 3878

Answers (3)

Maurice Raguse
Maurice Raguse

Reputation: 4567

use verticalDirection to reverse the order and manual reverse the children list like this:

before:

Column(      
  children:[A,B],
)

after:

Column(
  verticalDirection: VerticalDirection.up,
  children:[B,A],
)

Vertical column rendering is equal but z-order is reverse

Upvotes: 0

Lukas Pierce
Lukas Pierce

Reputation: 1291

Ok, this problem solved in elevated_flex package

ElevatedColumn(
  children: [
    SimpleChild(),
    Elevated(child: SimpleChild(shadow: true)),
    SimpleChild(),
  ],
)

Upvotes: 1

Crazzygamerr
Crazzygamerr

Reputation: 356

You can try wrapping _buildImageSpace() in a Card or Material widget. Both have the elevation property. That's what you are looking for.

Upvotes: 3

Related Questions