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)),
      );
    }

Answer 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(...),
)

Answer 2

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