Remember our lateral menu from this article? Yes, this one:
Pretty ugly isn’t it? Let’s make it fancier!
Center that list
Let’s start by removing one of the most limiting features, or, at least, change it: the list. We’ll change it to a Column and add the list as a child.
The list is now a child of the column, also we needed to set column’s height and set the list as
shrinkWrap (or the list would not render properly) and block it’s scrollable behavior. We are also centering our elements to achieve a cleaner look.
Round it up
Let’s now round our ugly squared white menu by wrapping our
Container into a ClipRRect and let’s give our menu some lovely curves!
Our menu now looks like this:
Half work done, let’s get to the meaty part now!
Let’s set a new look for our items, and let’s show which one is clicked.
Keeping the “rounded” tradition of the menu we will give all our buttons a new background using the
ClipRRect widget and a nice red color. We are adding a bit of complexity to our list item so we’ll make brand new
StatelessWidget with a calling function to maintain the page control on the main widget:
The final effect will be pretty nice:
Now we want to show one item different from all others by setting it as “selected”, so we’ll add a “selected” property which will tell our item to have an orange background instead of a red one:
Last, but not least, we will add a click effect to our item by using the
CupertinoButton widget. Again, we’ll use a custom widget with a
CupertinoButton inside. We’ll need to set the
minSize to 0 in order to let the button be as big as the child.
ListItem widget will look like this:
The end result will be like this, with a nice fading effect while clicking:
Way better now!
Our menu has a way better look than before, and it was relatively easy to do, don’t you think? You can customize your menu as you wish, but adding new animations or behaviors will require a complete change of code. We will save it for another time. Stay tuned!