In my opinion, the most important thing about mobile app design is the UI/UX, I may be wrong, since I am just started in the journey, completely ok to be told that I am wrong about that.
In my learning of Flutter, I was given a small challenge to write the code to display the following. The whole challenge took me about 30 minutes, I was stuck at one area which I will point out later.
I use the flutter generator in the Android Studio to provide me with a working template, and remove most of the code in main.dart except line 1 to line 6.
The main widgets that I used in the challengewas MaterialApp, Scaffold, SafeArea, Row and Container.
The following is the minimised version of the code, I will show the meat of the code in the next screen shot.
A Scaffold widget get created with a background of teal and with the body of a SafeArea. Basically within the SafeArea, I created a Row child with 3 children widget, all are containers.
Within each of the 3 containers, it will draw a box of red color on the left of the screen, a blue box on the right of the screen with the center of two boxed of yellow and green color.
Within each of the container, the code are pretty simple, just define the width and also the background color of the container.
Line 22-25 is for the Left red color box.
Line 43-46 is for the Right blue color box.
Line 26-42 is the center with 2 separate boxes in the middle of the screen. Within this container, there will be a column child with 2 children, each children will be a container for the yellow and green box.
In order for the left panel, right panel and the center to be equally separated (same space in between), the mainAxisAlignment with spaceBetween was used.
I spent few minutes to figure out how to place the yellow and green box to the middle of the screen. In the column child, I just have to define the mainAxisAlignment to be center. Realized that I can overwrite the mainAxisAlignment from the parent widget, since it is a new widget.
This was a fun challenge to do. I am spending some additional time to experiment with rows and column before continue learning new stuff.
Onward, 1% better everyday.