Flutter Text Field allowed text format

1,838

Use Form widget and TextFormField so that you can validator in you TextFormField and add your condition inside. using key parameter in Form you can validate with the Button click.

var formkey = GlobalKey<FormState>();
Form(
        key: formkey,
        child: Column(children: [
          TextFormField(
            //controller: _disControllerF,
            textAlign: TextAlign.center,
            style: new TextStyle(
                fontWeight: FontWeight.w400,
                fontFamily: "SegoeUI",
                fontStyle: FontStyle.normal,
                fontSize: 16.0),
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
              LengthLimitingTextInputFormatter(4),
              WhitelistingTextInputFormatter.digitsOnly,
            ],
            validator: (value) {
              String errorString;
              if (int.parse(value) < 2200 && int.parse(value) > 1800) {
              } else {
                errorString = "Enter value between 1800 and 220";
              }
              return errorString;
            },
            decoration: InputDecoration(
              border: new OutlineInputBorder(),
              hintText: '1900',
              hintStyle: TextStyle(
                  fontWeight: FontWeight.w400,
                  fontFamily: "SegoeUI",
                  fontStyle: FontStyle.normal,
                  fontSize: 16.0),
              contentPadding: const EdgeInsets.symmetric(horizontal: 10.0),
            ),
          ),
          TextFormField(
            //controller: _disControllerR,
            textAlign: TextAlign.center,
            style: new TextStyle(
                fontWeight: FontWeight.w400,
                fontFamily: "SegoeUI",
                fontStyle: FontStyle.normal,
                fontSize: 16.0),
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
              LengthLimitingTextInputFormatter(3),
              WhitelistingTextInputFormatter(RegExp("[1-9.]")),
            ],
            validator: (value) {
              String errorString;
              if (double.parse(value) > 9.9 || double.parse(value) < 5) {
                errorString = "Enter inbetween 5 to 9.9";
              }
              return errorString;
            },
            decoration: InputDecoration(
              border: new OutlineInputBorder(),
              hintText: '6.5',
              hintStyle: TextStyle(
                  fontWeight: FontWeight.w400,
                  fontFamily: "SegoeUI",
                  fontStyle: FontStyle.normal,
                  fontSize: 16.0),
              contentPadding: const EdgeInsets.symmetric(horizontal: 10.0),
            ),
          ),
          RaisedButton(onPressed: () {
            if (formkey.currentState.validate()) {}
          })
        ]))
Share:
1,838
Lunedor
Author by

Lunedor

Updated on December 18, 2022

Comments

  • Lunedor
    Lunedor 6 minutes

    I have two text fields, one of them should be year so I want to allow only enter numbers between 1900 and 2020, second one for ratings and it should be 9.9 at most and it can be 5 or 5.5 etc, When I use below code, I can get 1800 or 3450 in year field and rating side can be 123 or anything has 3 digits. Is there any way to restrict them as just like I want?

    For years;

    new TextField(
                              controller: _disControllerF,
                              textAlign: TextAlign.center,
                              style: new TextStyle(
                                  fontWeight: FontWeight.w400,
                                  fontFamily: "SegoeUI",
                                  fontStyle: FontStyle.normal,
                                  fontSize: 16.0
                              ),
                              keyboardType: TextInputType.number,
                              inputFormatters:<TextInputFormatter>[
                                LengthLimitingTextInputFormatter(4),
                                WhitelistingTextInputFormatter.digitsOnly,
                              ],
                              decoration: InputDecoration(
                                border: new OutlineInputBorder(
                                ),
                                hintText: '1900',
                                hintStyle: TextStyle(
                                    fontWeight: FontWeight.w400,
                                    fontFamily: "SegoeUI",
                                    fontStyle: FontStyle.normal,
                                    fontSize: 16.0),
                                contentPadding: const EdgeInsets
                                    .symmetric(
                                    horizontal: 10.0),
                              ),),
    

    For ratings;

    new TextField(
                      controller: _disControllerR,
                      textAlign: TextAlign.center,
                      style: new TextStyle(
                          fontWeight: FontWeight.w400,
                          fontFamily: "SegoeUI",
                          fontStyle: FontStyle.normal,
                          fontSize: 16.0
                      ),
                      keyboardType: TextInputType.number,
                      inputFormatters:<TextInputFormatter>[
                        LengthLimitingTextInputFormatter(3),
                        WhitelistingTextInputFormatter(RegExp("[1-9.]")),
                      ],
                      decoration: InputDecoration(
                        border: new OutlineInputBorder(
                        ),
                        hintText: '6.5',
                        hintStyle: TextStyle(
                            fontWeight: FontWeight.w400,
                            fontFamily: "SegoeUI",
                            fontStyle: FontStyle.normal,
                            fontSize: 16.0),
                        contentPadding: const EdgeInsets
                            .symmetric(
                            horizontal: 10.0),
                      ),),
    
  • Lunedor
    Lunedor over 2 years
    Thanks. I though to use validator before but I can't be sure how can I use each data from validator, because I am using this data to make an api resquest url and using them like that "&rating=${_disControllerR.text}&firstyear=${_disControllerF‌​.text}&lastyear=${_d‌​isControllerL.text}"
  • Lunedor
    Lunedor over 2 years
    ok I figured out I need to use onSaved to name each textformfield, it is all good now, thanks a lot.