Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Flutter Stack Widget inside ListView widget?

I am using the Stack widget in my app and it is working great but now I have a problem with wrapping this Stack widget inside ListView Widget.

I am getting error

RenderBox was not laid out: RenderPointerListener#20d10 relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

My Stack Widget is

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Widget? stackW() {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Positioned(
          top: 70,
          width: MediaQuery.of(context).size.width * .9,
          height: 150,
          child: Center(
            child: Container(
              width: MediaQuery.of(context).size.width * .9,
              decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.circular(15)),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text(
                    "Product Designer",
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                 
                ],
              ),
            ),
          ),
        ),
        Positioned(
          top: 30,
          left: MediaQuery.of(context).size.width / 2.5,
          width: 80,
          height: 80,
          child: CircleAvatar(
            backgroundColor: Colors.white,
            child: CircleAvatar(
              backgroundColor: Colors.green[100],
              radius: 35,
              child: const FaIcon(
                FontAwesomeIcons.apple,
                size: 30,
                color: Colors.black,
              ),
            ),
          ),
        ),
      ],
    );
  }

When I am passing stackWidget directly in body then it is working fine but after wrapping inside ListView, it is creating problem.

so Please guide me to achieve my listview data with Stack Widget.

 body: stackW()!,  //working
body: ListView(
        scrollDirection: Axis.vertical,
        children: [
          stackW()!,
        ],
      ),
``` //not working

>Solution :

Both widgets are getting infinite height, you can wrap stackW() with SizedBox widget.

body: LayoutBuilder(
  builder: (context, constraints) => ListView(
    scrollDirection: Axis.vertical,
    children: [
      SizedBox(
        height: constraints.maxHeight,
        width: constraints.maxWidth,
        child: stackW()!,
      )
    ],
  ),
),
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading