Home > Software engineering >  Flutter Stack Widget inside ListView widget?
Flutter Stack Widget inside ListView widget?

Time:06-30

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

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

CodePudding user response:

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()!,
      )
    ],
  ),
),
  • Related