Flutter Text Field allowed text format

user_12880676 0
Viewed 2225

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),
                  ),),
flutter textfield
1 Answers

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()) {}
          })
        ]))
user_62630150
Related