CODEWITHSUNDEEP
flutterflutter-layout
Chike
Chike

Reputation: 153

How to align two TextFormField properties beside each other in Flutter

I need help aligning two TextFormFields beside each other in Flutter instead of one above the other

I have tried using padding but it does not work.

             new TextFormField(
              autovalidate: true,
              keyboardType: TextInputType.numberWithOptions(),
              controller: today,
              //Reminder to write an if statement calling the controller
              //The validator receives the text that the user has entered.
              decoration: new InputDecoration(
                fillColor: Colors.white,
                border: new OutlineInputBorder(
                    borderRadius: new BorderRadius.circular(5.0),
                    borderSide: new BorderSide()
                ),
                labelText: 'Today', //Label is used so that the text can either float or remain in place
                labelStyle: TextStyle(
                  fontFamily: 'Lato',
                  fontWeight: FontWeight.normal,
                  fontSize: 14.0,
                  color: Colors.grey,
                ),
              ),
              inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
            ),

            SizedBox(height: 15.0),



            new TextFormField(
              autovalidate: true,
              keyboardType: TextInputType.numberWithOptions(),
              controller: tomorrow,

              //Reminder to write an if statement calling the controller
              //The validator receives the text that the user has entered.
              decoration: new InputDecoration(
                fillColor: Colors.white,
                border: new OutlineInputBorder(
                    borderRadius: new BorderRadius.circular(5.0),
                    borderSide: new BorderSide()
                ),
                labelText: 'Tomorrow', //Label is used so that the text can either float or remain in place
                labelStyle: TextStyle(
                  fontFamily: 'Lato',
                  fontWeight: FontWeight.normal,
                  fontSize: 14.0,
                  color: Colors.grey,
                ),
              ),
              inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
            ),

I expect the size of the forms to be smaller and aligned beside each other so that they can fit the screen.

Upvotes: 2

Views: 4949

Answers (1)

diegoveloper
diegoveloper

Reputation: 103561

Try using Row instead Column 

        Row(children: [
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(hintText: "TextField 1"),
                  ),
                ),
                SizedBox(
                  width: 20,
                ),
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(hintText: "TextField 2"),
                  ),
                )
              ])

More info here: https://medium.com/flutter-community/breaking-layouts-in-rows-and-columns-in-flutter-8ea1ce4c1316

Upvotes: 9

Related Questions