RenderRepaintBoundary Exception to the TextField-CodePudding

I am new to flutter, and I am trying to create application which send OTP. When I am trying to add a TextField. The screen is going blank and if I remove the TextField all the over widgets are visible. Can some one explain me why is this happening and how to resolve it?

              Container(
            height: 55,
            decoration:  BoxDecoration(
              border: Border.all(
                width: 1,
                color: Colors.black,
              )
            ),

            child: Row(
              children: const [
                SizedBox(
                  width: 8,
                ),

                Text(
                  "  91 - ",
                  style: TextStyle(
                    fontSize: 30
                  ),
                ),

                
                // as soon as I add this TextField, the screen is going blank.
                TextField(
                  controller: phoneNumber,
                  keyboardType: TextInputType.number,
                ),
                
              ],
            ),

          ),

Exception:

The following assertion was thrown during paint(): RenderBox was not laid out: RenderRepaintBoundary#b54b1 relayoutBoundary=up3 NEEDS-PAINT 'package:flutter/src/rendering/box.dart': Failed assertion: line 2001 pos 12: 'hasSize'

CodePudding user response：

The Row doesn't know the width of the TextField, so you should wrap it either with SizedBox and give it some width (height is optional in this case):

SizedBox(
  width: 100,
  child: TextField(
    controller: phoneNumber,
    keyboardType: TextInputType.number,
  ),
)

or with Flexible or Expanded like:

Expanded( // or Flexible
  child: TextField(
    controller: phoneNumber,
    keyboardType: TextInputType.number,
  ),
)