Flutter: How to fit TextField inside row and container

Question

how to fit TextFiled inside row > container. i don't why TextField it goes beyond the container and also the height of the textField is not properly adjected. can anyone help...

 child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 30),
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.pink,
                    borderRadius: BorderRadius.circular(50)),
                child: Row(
                  children: [
                    Icon(Icons.verified_user_outlined),
                    SizedBox(width: 5),
                    Container(
                      width: 200,
                      height: 30,
                      color: Colors.orange,
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: 'Enter Your Mobile Number',
                          errorText: '',
                          fillColor: Colors.white,
                          border: OutlineInputBorder(),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            TextButton(onPressed: () => {}, child: Text("Continue")),
          ],[![enter image description here][1]][1]

score 0 · Answer 1 · answered May 09 '21 at 16:46

I thinks it's because that you hard coded your container's width and height. try not setting the width and height of the container which will dynamically change the container's width and height depending on it's child. for more information you can visit here dynamic container

score 0 · Answer 2 · answered May 09 '21 at 17:27

try using Expanded widget and flex on children

child: Row(
  children: [
    Expanded(
      flex: 1,
      child: Icon(Icons.verified_user_outlined)),
    Expanded(
      flex: 1,
      child: SizedBox(width: 5)),
    Expanded(
      flex: 4,
      child: Container(

Syed Ameenuddin · Answer 3 · 2021-11-09T19:30:43.600

0

Use SizedBox widget to your textfiled
Or use Expand widget with flex property

Eg:

SizedBox(
width:20.0,
heigh : 30.0,
child: //text field 
),

Expanded(
flex:1,
child: //text field 
),

edited Nov 09 '21 at 19:30

answered May 09 '21 at 18:05

Syed Ameenuddin

11
4

Flutter: How to fit TextField inside row and container

3 Answers3