CODEWITHSUNDEEP
flutterflutter-layout
Faith
Faith

Reputation: 85

How to place two TextFields side by side

I am new to flutter and I am trying to place two text fields side by side like the image shown below.

Output I want to achieve

This is the code I have so far for the single-line text fields.

       Padding(
          padding: const EdgeInsets.symmetric(horizontal: 25.0),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.grey[200],
              border: Border.all(color: Colors.white),
              borderRadius: BorderRadius.circular(100),
            ),
            child: Padding(
              padding: const EdgeInsets.only(left: 20.0),
              child: TextField(
                decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: "Contact No",
                ),
              ),
            ),
          ),
        )

Upvotes: 0

Views: 594

Answers (2)

Vishal Zaveri
Vishal Zaveri

Reputation: 1557

You can simply put them inside a Row but you have to wrap each one of them with an Expanded widget like the following:

Row(
    children: [
        Expanded(child:,TextField()),
        SizedBox(width: 12), // Optional
        Expanded(child:,TextField()),
    ]
)

NOTE: The idea of wrapping TextField with an Expanded when using it inside a row is to allow Flutter to determine the correct render size of the field due to internal details in the Framework.

Upvotes: 2

Kaushik Chandru
Kaushik Chandru

Reputation: 17772

Create a row and add 2 textfields like written below


Row(
  children: [
   TextField(),
   TextField(),
  ]
)

Upvotes: 0

Related Questions