简体   繁体   中英

How to set text in one line for flutter

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: 在此处输入图片说明

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

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:

在此处输入图片说明

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM