RenderBox was not laid out: RenderRepaintBoundary#21325 NEEDS-LAYOUT NEEDS-PAINT

Question

I'm trying to create a text Field and every time when I run the code it shows the following renderBox error. Kindly help me get through this.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Row(
          children: <Widget>[
             Container(
                // padding: EdgeInsets.all(30),

                child: TextField(
                  style: TextStyle(
                    color: Colors.black,
                  ),
                  decoration: kCityTextFieldInputDecoration,
                ),
              ), 
          ],
        ),
      ),
    );
  }

And kCityTextFieldInputDecoration is

const kCityTextFieldInputDecoration = InputDecoration(
  filled: true,
  fillColor: Colors.white,
  icon: Icon(
    Icons.location_city,
    color: Colors.white,
  ),
  hintText: 'Enter city name',
  hintStyle: TextStyle(
    color: Colors.grey,
  ),
  border: OutlineInputBorder(
    borderRadius: BorderRadius.all(
      Radius.circular(10),
    ),
    borderSide: BorderSide.none,
  ),
);

Solution

It's an issue on getting infinite width. You can just wrap the Container with Expanded or provide width there.

 return Scaffold(
      body: SafeArea(
        child: Row(
          children: <Widget>[
            Expanded(
              child: Container(
                // padding: EdgeInsets.all(30),

                child: TextField(
                  style: TextStyle(
                    color: Colors.black,
                  ),
                   decoration: kCityTextFieldInputDecoration,
                ),
              ),
            )
          ],
        ),
      ),
    );

Comments

[Yeasin Sheikh]

Can you include kCityTextFieldInputDecoration, after running separately, do you get the same errors?

[Usama Bin Tahir]

After commenting the kCityTextFieldInputDecoration the error is gone.

[Usama Bin Tahir]

const kCityTextFieldInputDecoration = InputDecoration( filled: true, fillColor: Colors.white, icon: Icon( Icons.location_city, color: Colors.white, ), hintText: 'Enter city name', hintStyle: TextStyle( color: Colors.grey, ), border: OutlineInputBorder( borderRadius: BorderRadius.all( Radius.circular(10), ), borderSide: BorderSide.none, ), );

[Usama Bin Tahir]

Sorry i was mistaken removing the decoration didn't solved the problem.

[Usama Bin Tahir]

But Thankyou it's solved by adding Expanded widget,