📱 9 / 100 Days Of Flutter, Kate's edition — text field validation and RotatedBox

Hi, Hashnode community and welcome to day 9 of my Flutter challenge! 👋

I keep working on a converter app. Today I figured out TextField validation.

Making a TextField to accept numbers only

The converter app works with numbers only, so I tuned my input field to only accept numbers.

The first step is to default the keyboard to numeric:

TextFormField(
          keyboardType: TextInputType.number,
),

When a user pastes text in the input field, only digits should be kept. FilteringTextInputFormatter.digitsOnly did the trick:

TextFormField(
          keyboardType: TextInputType.number,
          inputFormatters: [FilteringTextInputFormatter.digitsOnly],
),

As far as I understood, it's still not enough. We need to implement validation in case if a user somehow managed to input a non-digit:

 TextFormField(
          autovalidateMode: AutovalidateMode.onUserInteraction,
          validator: (String? value) {
            return (value != null && int.tryParse(value) == null) ? 'Please enter a number' : null;
          },
          keyboardType: TextInputType.number,
          inputFormatters: [FilteringTextInputFormatter.digitsOnly],
),

To make validator function work, I had to pass autovalidateMode. This is how the field looks if I try to type a letter:

Today I discovered a nice and simple way to rotate an icon - wrap it in the RotatedBox widget!

RotatedBox(
        quarterTurns: 1,
        child: Icon(Icons.compare_arrows, semanticLabel: 'Convert'),
);

quarterTurns param is the number of clockwise quarter turns the child should be rotated. Nice and easy.

Summary

Today I completed the form UI for my converter app. The next step is to make it calculate things but that's something for tomorrow 😴

📱 9 / 100 Days Of Flutter, Kate's edition — text field validation and RotatedBox

Making a TextField to accept numbers only

Widget of the day - RotatedBox

Summary