RenderRepaintBoundary Exception to the TextField

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’

>Solution :

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