Flutter Stack widget not sizing correctly when used in a ListView

Question

I'm trying to build a List of Card's that contain a Stack widget, the Card + Stack Widget works just fine until I make it the child of a list view, and then the Stack no longer sizes automatically to its largest child. This is causing my view that should be aligned to the bottom right to only be right aligned instead since the bottom of the Stack isn't sized correctly.

I've tried wrapping all the children of the Stack with an Align, but that didn't help either. Positioned has the same results as Align.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stack Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        body: ListView(
          children: <Widget>[
            _buildCard(context),
            _buildCard(context),
            _buildCard(context),
            _buildCard(context),
            _buildCard(context),
            _buildCard(context),
          ],
        ),
      );

  Widget _buildCard(BuildContext context) => Card(
        child: Stack(
          children: <Widget>[
            SizedBox(
              height: 200,
              child: Container(
                color: Colors.black,
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: SizedBox(
                height: 50,
                width: 50,
                child: Container(
                  color: Colors.red,
                ),
              ),
            ),
          ],
        ),
      );
}

What I'd expect to happen, is the Stack would size correctly around the black container allowing the red container to be positioned at the bottom right of the card.

Wrap your Stack inside a Container with the height you defined for the Stack, let me know if it works? — fayeed
That won't work, unfortunately. The black box needs to autosize and fill out the Stack. I ended up making the black view a box decoration because it worked for my use case. I was loading an image from the network. — Chris

hafidzaini hafidzaini · Accepted Answer · 2019-07-11T19:38:15

try to set the alignment on the stack too

alignment: AlignmentDirectional.bottomEnd,

like this one

Widget _buildCard(BuildContext context) => Card(
    child: Stack(
      alignment: AlignmentDirectional.bottomEnd,
      children: <Widget>[
        SizedBox(
          height: 200,
          child: Container(
            color: Colors.black,
          ),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: SizedBox(
            height: 50,
            width: 50,
            child: Container(
              color: Colors.red,
            ),
          ),
        ),
      ],
    ),
  );

screenshot

Flutter Stack widget not sizing correctly when used in a ListView

1 Answers