RenderFlex children have non-zero flex but incoming height constraints are unbounded have tried for flexible and expanded does not work

Question

I have below codes. I have google around

e.g. TextField inside of Row causes layout exception: Unable to calculate size. The issue is in my case is this

TextFormField( onChanged: (value) => contactNo = value,

I have tried expanded, I have tried flexible etc all does not work and gives me error. What else should I fix in this case ? I have tried adding this child: SingleChildScrollView( and even this mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, Yet the same errors.

Widget _createForm(BuildContext context) {    
      return Scaffold(      
      key: _scaffoldKey,
      resizeToAvoidBottomInset: true,
      resizeToAvoidBottomPadding: false,
      backgroundColor: pagebackgroundColor,
      appBar: appBar(),
      drawer: Theme(
          data: Theme.of(context).copyWith(canvasColor: Colors.white),
          child: new ReusableWidgets().getDrawer('Sum',context)
      ),
        body: SafeArea(
                child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    SizedBox(
                      height: 20.0,
                    ),

                    Row(
                      children: <Widget>[
                        RoundedCardDataNoColor(

                          child: Row( 
                            //mainAxisSize: MainAxisSize.min,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[              
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                        Row(
                                          crossAxisAlignment: CrossAxisAlignment.center,
                                          mainAxisAlignment: MainAxisAlignment.center,
                                          children: <Widget>[                            
                                            SizedBox(width: 5,),
                                            Text(
                                              "Total",
                                              style: plateStyle,
                                            ),

                                          ],
                                        ),

                                        SizedBox(height: 5,),

                                        Expanded(
                                          child:
                                          Row(
                                            crossAxisAlignment: CrossAxisAlignment.center,
                                            children: <Widget>[
                                                  TextFormField(
                                                  onChanged: (value) => contactNo = value,
                                                  keyboardType: TextInputType.phone,
                                                  validator: validateMobile,
                                                  maxLength: 10,
                                                  decoration: InputDecoration(
                                                    labelText: 'Contact No.',
                                                    //errorText: "Enter First Name",
                                                  ),
                                                ), 

                                            ],
                                           ),
                                        )
                                      ],
                              ),
                            ]
                          )
                        ),
                      ]
                    ),

Here is the full errors.

RenderFlex children have non-zero flex but incoming width constraints are unbounded. The relevant error-causing widget was Row RenderBox was not laid out: RenderFlex#03f25 relayoutBoundary=up16 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize' The relevant error-causing widget was Column RenderBox was not laid out: RenderFlex#adff1 relayoutBoundary=up15 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize' The relevant error-causing widget was Row

From here onwards it pointing to my round_card_data_nocolor widget which I have created

RenderBox was not laid out: RenderFlex#6e81b relayoutBoundary=up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize' The relevant error-causing widget was Container RenderBox was not laid out: RenderPadding#88382 relayoutBoundary=up13 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize' The relevant error-causing widget was Container RenderBox was not laid out: RenderDecoratedBox#f5086 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize' The relevant error-causing widget was Row RenderBox was not laid out: RenderFlex#72dfe relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize' The relevant error-causing widget was Card RenderBox was not laid out: RenderSemanticsAnnotations#16c58 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize' The relevant error-causing widget was Padding

Here is the full codes for the widget RoundedCardDataNoColor:


    class RoundedCardDataNoColor extends StatelessWidget {
      // ---- props -----
      final Widget child;


      // --- constant view settings ----
      static const double radius = 10.0;
      static const double elevation = 5.0;
      static const innerPadding = const EdgeInsets.all(8.0);
      static const innerPaddingColor = const EdgeInsets.all(0.0);
      static const outerPadding = const EdgeInsets.all(0.0);
      static const margin = const EdgeInsets.fromLTRB(10, 5, 0, 5);

      const RoundedCardDataNoColor({
        Key key,
        this.child,
      }) : super(key: key);

      @override
      Widget build(BuildContext context) {
        return Padding(
          padding: outerPadding,
          child: Card(
            margin: margin,
            elevation: elevation,
            clipBehavior: Clip.antiAlias,
            shape: roundShape,
            child: Row(children: <Widget>[
              new Container(
              padding: innerPadding,
              decoration: roundDecor,
              child: child ,
              ),
            ],)


          ),
        );
      }


      static const roundShape = const RoundedRectangleBorder(
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(radius),
          bottomLeft: Radius.circular(radius),
        ),
      );

      static const roundDecor = const BoxDecoration(
        color: Colors.white,
        borderRadius: const BorderRadius.only(
            topLeft: const Radius.circular(radius),
            bottomLeft: const Radius.circular(radius)),
      );
    }

score 5 · Accepted Answer · answered Dec 11 '19 at 19:58

5

A ScrollView doesn't define a height constraint, only a width constraint. Inside your second Column it looks like you're defining an Expanded, which means that widget will try and expand vertically "unbounded" by a height constraint. You can try removing the Expanded and see if that does it or adding a fixed height to RoundedCardDataNoColor

answered Dec 11 '19 at 19:58

Nolence

1,835
13
23

I tried removing the expanded no it does not help. I don't know what height to set for my RoundedCardDataNoColor. I tried removing everything and put a container with fix height looks OK but its not able to take full space. What dynamic solution can I work on? – newbie Dec 11 '19 at 20:42
Another issue I've previously had is putting `TextField`s inside Rows without adding an `Expanded` (or any Flex widget) as their parent. (That or try removing the Row above the TextFormField altogether.) I don't think they have an implicit max width constraint and have a similar issue to Expandeds inside Scrollviews – Nolence Dec 11 '19 at 21:08
I dont quite get you on this you mean just leave with expanded but no row is it ? – newbie Dec 12 '19 at 10:41
Sorry, I don't think I explained myself too well. Take a look at this [SO answer](https://stackoverflow.com/a/45990477/8213910). Essentially just wrap your TextFormField in an Expanded if you want to keep on using it in a row – Nolence Dec 12 '19 at 14:36
@Nolene no I tried that answer before posting here in my case it does not work. I get this error The method '>' was called on null. .. – newbie Dec 12 '19 at 17:23
I'm really embarrassed to have posted the same stack overflow answer! If you could, please add the full error stack trace to your question – Nolence Dec 12 '19 at 17:26
@Nolene no issue dont be embarrassed. I have updated my question with all the details and the full error. I have given the codes for my RoundedCardDataNoColor which is a widget I customised could be that also is an issue thats what I am seeing the errors too? – newbie Dec 12 '19 at 17:45

score 1 · Answer 2 · answered Jan 20 '21 at 06:04

In certain situations, the constraint that is given to a box is unbounded, or infinite. This means that either the maximum width or the maximum height is set to double.INFINITY.

A box that tries to be as big as possible won’t function usefully when given an unbounded constraint and, in debug mode, such a combination throws an exception that points to this file.

The most common cases where a render box finds itself with unbounded constraints are within flex boxes (Row and Column), and within scrollable regions (ListView and other ScrollView subclasses).

In particular, ListView tries to expand to fit the space available in its cross-direction (for example, if it’s a vertically-scrolling block, it tries to be as wide as its parent). If you nest a vertically scrolling ListView inside a horizontally scrolling ListView, the inner one tries to be as wide as possible, which is infinitely wide, since the outer one is scrollable in that direction.

Yes, its needs width somehow directly or indirectly – Paresh Mangukiya Jan 23 '21 at 02:30 — Paresh Mangukiya, Jan 23 '21 at 02:30

score 1 · Answer 3 · answered Jan 03 '22 at 07:26

1

Wrap your Column inside an Expanded or SizedBox (with some height) like below:

Expanded(
  child: Column(...)
)

Or

SizedBox(
  height: 150, // give height
  child: Column(...),
)

answered Jan 03 '22 at 07:26

Hardik Hirpara

1,727
16
27

RenderFlex children have non-zero flex but incoming height constraints are unbounded have tried for flexible and expanded does not work

3 Answers3