Flutter: How to use Stack Widget in Listview

Question

Stack Widget in Listview, Unable to display completely, here is my code

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('test stack'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(20),
        children: [
          Container(height: 100, color: Colors.greenAccent),
          const SizedBox(height: 20),
          _getItem(),
        ],
      ),
    );
  }

  _getItem() {
    return Stack(
      children: [
        Positioned(
          top: 20,
          left: 0,
          right: 0,
          child: Container(
            height: 200,
            color: Colors.purple,
          ),
        ),
        Align(
          alignment: Alignment.topCenter,
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
            color: Colors.amber,
            child: const Text('title'),
          ),
        )
      ],
    );
  }
}

here is result

as you see, The purple view is not fully displayed

The reason for this is that the size of the stack is determined by the noposition widget, so the size of the stack is the size of the amber widget.

However, the content of the amber widget is uncertain. I want the amber widget to be displayed completely. What should I do?

Answer 1

If I understood your question correctly, replace _getItem() with the following:

_getItem() {
  return Stack(
    children: [
      Container(
        height: 200,
        margin: const EdgeInsets.only(top: 20),
        color: Colors.purple,
      ),
      Align(
        alignment: Alignment.topCenter,
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
          color: Colors.amber,
          child: const Text('title'),
        ),
      )
    ],
  );
}

Output: