Why do i get errors when i place TextField inside In Row

Question

I am trying to put a Two Textfields on a row so that they align in one row but i seem to be getting the below error,i cant seem to get what i am doing wrong here.Help apreciated.

import "package:flutter/material.dart";

void main(){
  runApp(
      MaterialApp(
          title: 'Planet',
          home:Home()
      )
  );
}

class Home extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return HomeState();
  }

}


class HomeState extends State<Home>{

  @override
  Widget build(BuildContext context){

    return Scaffold(
      appBar: AppBar(
        title: Text(
            'Weight on Planet x',
        ),
        centerTitle: true,
      ),
      body:Container(
        alignment: Alignment.topCenter,
        child: ListView(
          padding: const EdgeInsets.all(2.5),
          children: <Widget>[
            Image.asset('images/planet.png',height: 133.0,width: 200.0,),
            Container(
              margin: const EdgeInsets.all(3.0),
              child: Row(
                children: <Widget>[
                  TextField(
                    controller: null,
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                        labelText: 'Your weight on Earth',
                        hintText: 'In Pounds',
                        icon: Icon(Icons.person_outline)
                    ),
                  ),
                  TextField(
                    controller: null,
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                        labelText: 'Your weight on Earth',
                        hintText: 'In Pounds',
                        icon: Icon(Icons.person_outline)
                    ),
                  )
                ],
              ),

            )
          ],
        ),
      )
    );
  }

I get the following error

Another exception was thrown: RenderBox was not laid out: _RenderDecoration#3373c relayoutBoundary=up10 NEEDS-PAINT

Answer 1

I propose you to use Expanded to inform the horizontal size (maximum available).

             Expanded(
              child: Row(
                children: <Widget>[
                  TextField(
                    controller: null,
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                        labelText: 'Your weight on Earth',
                        hintText: 'In Pounds',
                        icon: Icon(Icons.person_outline)),
                  ),
                  TextField(
                    controller: null,
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                        labelText: 'Your weight on Earth',
                        hintText: 'In Pounds',
                        icon: Icon(Icons.person_outline)),
                  )
                ],
              ),
            );

Answer 2

Try giving some finite width to the TextField parent Container. By default TextFields occupy the entire space made available by their parent which is in this case infinite.

Or, you can use individual Containers for each TextField if you want them to have custom widths.