Design beautiful UI for mobile app with Flutter : Calorie Plan
I like Flutter and I am a fan of converting beautiful UI designs into code using Dart and Flutter. The design that we will try to achieve today is inspired from the work of Akshay Devazya on Dribbble. You can find it here.
Please note that we are not going to implement the logic behind this design. Instead, we will only focus on how to choose the right widgets to achieve this design.
There are multiple ways that you can choose to accomplish this goal. So you may find a better way than me.
Let’s start by breaking down the UI into several sections (or layers) to make our task easier.
So we can see that we have four main sections : The app bar, the big picture, the meals and the bottom section with the horizontal scrolling list.
The app bar is the easiest one and is straight forward. It’s made up of the drawer icon and a centered title. Note that the drawer is not part of the AppBar widget but is a property of the Scaffold widget. We gave the app bar the same color as the Scaffold and the elevation is set to 0 to remove the shadow.
The second section contains two layers: the background image and the foreground texts and button. Fortunately we have the Stack widget to put widgets on top of each other. The texts and the button are vertically organized so we will obviously use the Column widget. You can always use the SizedBox widget for spacing between other widgets horizontally or vertically.
The GestureDetector widget can, well, detect gestures. We can use it for example to convert a widget (a Container in this case) into a button.
In a Column widget , use the mainAxisAlignment property to align the elements vertically and crossAxisAlignment property to align them horizontally. For a Row widget the functionalities are inverted.
Next, we will take a look at the third section. This one is also straightforward. A row with three items, each item is a column with three items. We used containers to control the style (color) and the alignment of the row items. The middle row item has a gradient color set inside the decoration property of the container.
Now for the fourth section we can see that we have a container with special decoration (rounded corners). Use borderRadius to set the roundness of each corner of a container.
The container contains a Column widget with three items. The first and third items are Rows and the second item is a ListView widget. You can add a scrollbar to any Scrollable widget using the Scrollbar widget (the green line in the picture above).
Use MediaQuery to get the current device information. For example, we use it here to set the width of the container to the width of the device.
In a real world app you get the ListView widget data from a local database like SQLite or from an API call to a remote server. In that case you will create data models and use template widgets to fill the ListView items.
Our code is not perfect. You can refactor it to make it more organized and eliminate some redundancy.
You can find the full source code here.
If you want to try it online, copy and past it in the DartPad Flutter editor and click on Run.
See also :
