Stack within ListView fails Flutter

Question

I am trying to add a Stack within a ListView in a SafeArea. However, there is a runtime exception as seen below:

BoxConstraints forces an infinite height.
I/flutter (18717): These invalid constraints were provided to RenderConstrainedBox's layout() function by the following
I/flutter (18717): function, which probably computed the invalid constraints in question:
I/flutter (18717):   RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:259:13)
I/flutter (18717): The offending constraints were:
I/flutter (18717):   BoxConstraints(w=411.4, h=Infinity)

My code:

    @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);

    return new Scaffold(
        body: SafeArea(
            top: true,
            child: ListView(  shrinkWrap: true,
        children: <Widget>[_buildFrostedRow(context)])));
  }


  Stack _buildFrostedRow(BuildContext context) {
    return Stack(
    children: <Widget>[
      new ConstrainedBox(
          constraints: const BoxConstraints.expand(), child: _showCardRow()),
      new Center(
        child: new ClipRect(
          child: new BackdropFilter(
            filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
            child: new Container(
              width: SizeConfig.safeBlockHorizontal * 90,
              height: SizeConfig.safeBlockVertical * 20,
              decoration: new BoxDecoration(
                  color: Colors.grey.shade200.withOpacity(0.5)),
              child: new Center(
                child: new Text('Frosted',
                    style: Theme.of(context).textTheme.display3),
              ),
            ),
          ),
        ),
      ),
    ],
  );
  }

What am I missing here?

You need to limit height to Stack (put it into Container and set height or something like that). Because if you didn't, the ListView cannot calculate layout. — Phat Huynh
– Phat Huynh, Commented Sep 30, 2019 at 6:36
ohh jeez that worked! If you can add a answer, I will accept it and close this. :) — user2511882
– user2511882, Commented Sep 30, 2019 at 6:39

Phat Huynh · Accepted Answer · 2019-09-30 06:42:23Z

3

You need to limit height to Stack (put it into Container and set height or something like that). Because if you didn't, the ListView cannot calculate layout.

return new Scaffold(
        body: SafeArea(
            top: true,
            child: ListView(  shrinkWrap: true,
        children: <Widget>[Container(height:200, // can change
                           child: _buildFrostedRow(context))])));

answered Sep 30, 2019 at 6:42

Phat Huynh

9126 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Er. Divyesh Shani · Accepted Answer · 2019-09-30 06:48:39Z

0

Just wrap your Stack with Constrained box or Fixed Heigh Container. Because, Listview and Stack has infinite height

answered Sep 30, 2019 at 6:48

Er. Divyesh Shani

861 silver badge6 bronze badges

Collectives™ on Stack Overflow

Stack within ListView fails Flutter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related