It happened! I made it to day 10!
Even if I stop right now, I've learned a lot!
✅ I feel much more comfortable in Android Studio
✅ I can make simple code changes in Flutter apps
✅ I understand the idea of Flutter widgets and know a few most popular ones
✅ I'm comfortable with Dart
✅ I'm part of the community in Discord and Slack
...but of course, I won't stop! 🎸
My goal as defined on day 1 is:
I want to reach the point where I'm comfortable with mobile development and can build and publish simple apps in Apple App Store and Google Play Store.
There is much more to do to meet it so stay tuned or follow along if you are just starting with Flutter too! I'm @kalabro on Discord, Slack and Twitter if you want to say hi 👋
Make form elements interactive
Yesterday I built a converter app form with some dummy data. Today I've implemented the logic of the form: when all necessary fields are provided, the app prints the converted number.
Each form field has an onChanged callback in which I recalculate the converted value and update the state. Below is the final code of the input text field:
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(borderRadius: BorderRadius.circular(0)),
label: const Text('Input', style: TextStyle(fontSize: 20)),
),
onChanged: (String value) => setState(() {
_inputValue = value;
_outputController.text = convert(_inputValue, _inputUnit, _outputUnit);
}),
validator: (String? value) {
return (value != null && int.tryParse(value) == null)
? 'Please enter a number'
: null;
},
keyboardType: TextInputType.number,
inputFormatters: [FilteringTextInputFormatter.digitsOnly],
),
The output value is displayed in another text field that is marked as read-only. This way a user can copy the value from the field.
Alternatively, I could “fake” input by rendering the InputDecorator widget instead of TextFormField.
Another observation is how the default Form widget works. Originally I wanted to implement only one onChanged callback on the form level and call my convert() function from there but it turned out there is no access to the latest form values in the form's onChanged callback 🤷♀️
Widget of the day - SingleChildScrollView
When I rotated my app in the simulator, I noticed a warning from Flutter:
How did I solve it? Right, there is a widget for that! I simply wrapped the form with SingleChildScrollView.
SingleChildScrollView(
child: ConverterRoute(units: units, color: color)
),
In the coming days, I will improve the horizontal layout of the app by rendering fields in 2 columns.
Summary
Flutter is a very enjoyable technology to use. Regardless of a busy calendar, I'm waiting for a spare hour to play with it and continue my 100 Days Of Flutter challenge! If you have any cool tutorials or practical courses, please share them in the comments. There are tons of learning materials, but not everything will work for my learning style & time available.