2

I have next flutter/dart code for make in one line 4 text field:

Container(
            margin: EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Container(
                    width: 100.0,
                    child: TextField(
                      maxLength: 2,
                      onChanged: (value) {
                        card.expMonth = int.parse(value);
                      },
                      keyboardType: TextInputType.number,
                      textAlign: TextAlign.center,
                      decoration: InputDecoration(
                          border: InputBorder.none, hintText: 'month'),
                    )),
                Text("/",
                    style: TextStyle(fontSize: 36),
                    textAlign: TextAlign.center),
                Container(
                    width: 100.0,
                    child: TextField(
                      maxLength: 2,
                      onChanged: (value) {
                        card.expYear = int.parse(value);
                      },
                      keyboardType: TextInputType.number,
                      textAlign: TextAlign.center,
                      decoration: InputDecoration(
                          border: InputBorder.none, hintText: 'year'),
                    )),
                Container(
                    padding: EdgeInsets.only(left: 80.0),
                    width: 180.0,
                    child: TextField(
                      maxLength: 3,
                      onChanged: (value) {
                        card.cvc = int.parse(value);
                      },
                      keyboardType: TextInputType.number,
                      textAlign: TextAlign.center,
                      decoration: InputDecoration(
                          border: InputBorder.none, hintText: 'cvc'),
                    )),
              ],
            ),
          )

and he see this: enter image description here

How make all text fields in one line. In android app i simple use guideline or other simple paths. And here i smash with flutter reality where different textfields have different visibility with the same, at first glance, the parameters

UPD.: I make crutch solution:

Padding(
                  padding: EdgeInsets.only(bottom: 20),
                  child: Text("/",
                      style: TextStyle(fontSize: 36),
                      textAlign: TextAlign.center),
                ),

but it's stupid how i think

1 Answer 1

2

This is how I would do it:

Row(children: <Widget>[
            Expanded(
                child: TextField(
                  inputFormatters: [LengthLimitingTextInputFormatter(2)],
                  keyboardType: TextInputType.number,
                  textAlign: TextAlign.center,
                  decoration: InputDecoration(
                      border: InputBorder.none, hintText: 'month'),
                )),
            Expanded(
                child: Text("/",
                    style: TextStyle(fontSize: 36),
                    textAlign: TextAlign.center)),
            Expanded(
                child: TextField(
                  inputFormatters: [LengthLimitingTextInputFormatter(2)],
                  keyboardType: TextInputType.number,
                  textAlign: TextAlign.center,
                  decoration: InputDecoration(
                      border: InputBorder.none, hintText: 'year'),
                )),
            Expanded(
                child: TextField(
                  inputFormatters: [LengthLimitingTextInputFormatter(3)],
                  keyboardType: TextInputType.number,
                  textAlign: TextAlign.center,
                  decoration: InputDecoration(
                      border: InputBorder.none, hintText: 'cvc'),
                )),
        ])

Which produces this:

enter image description here

I used inputFormatters: [LengthLimitingTextInputFormatter(2)] instead of maxLength so that the user is still only able to enter in a limited length but you don't get the counter below the TextField as it looks neater.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.