Hi, Hashnode community and welcome to day 14 of my Flutter challenge! 👋
I'm back on track with my daily updates, thanks to my new schedule. Let me know in the comments if you are interested to know how I organise my day to be able to learn Flutter every day.
Now back to my learnings. I finished the “MDC-102 Flutter: Material Structure and Layout” codelab and watched the Flutter team doing another Material-related codelab on YouTube: Create simple, beautiful UI with Flutter.
Spacing
Today I've learned another way to set spacing values in Flutter: EdgeInsets.fromLTRB. This constructor creates insets from offsets from the left, top, right, and bottom (which is very familiar to me as a web developer).
const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0);
// similar to the following CSS:
padding: 16px, 12px, 16px, 8px;
For more ways to use EdgeInsets see day 5.
I noticed though that Flutter developers often use SizedBox instead of padding/margin to add white space. First of all, it reads better because you don't need to wrap your widget tree in Padding or Container. The Flutter team also mentioned that it's better from a performance standpoint.
const SizedBox(height: 8.0),
Another handle widget to manipulate white space in Rows and Columns is Spacer. I'm still finding my feet in Flatter's layout. Luckily, it's heavily inspired by Flexbox which I know well from my web experience.
All sizes that I configured so far in Flutter are fixed values like height: 8.0 in the example above. What is 8.0 here?
Logical vs physical pixels
The Flutter framework operates in logical pixels, which means my SizedBox is 8 logical pixels in height.
From api.flutter.dev/flutter/dart-ui/FlutterView..:
By definition, there are roughly 38 logical pixels per centimeter
So my SizedBox will take ~21mm of my device screen. Will it be approximately the same value across all device types? I haven't figured out yet.
Widget of the day - Semantics
I noticed very early that Flutter is serious about accessibility. Images and icons have semanticLabel property for screen readers. For more advanced cases there is a special widget Semantics which has more than 50 properties to describe the meaning of your widgets.
As usual, the Flutter team made it easy for developers to debug accessibility by providing showSemanticsDebugger property.
Summary
I continue learning Material Design basics in Flutter and investigate some interesting aspects of Flutter on my way such as accessiblity and logical pixels. Stay tuned and support me in comments! 😻