Flutter Stack widget for smart design. Veg, non veg icons and other layouts.

I believe you’ve stumbled on to this article either by chance or you’re aware what you wanted to get out of this article. Whatever the case may be, you’re in safe hands now :)

In this article we try to explore a new way of design thinking, when approaching problems pertaining to flutter layouts and icons. Stack widget class, as we all know can be a very powerful tool when we need to design flutter layouts, we can in fact add Stack widgets in many more aspects of our UI screen. For example, I found it very cumbersome and inefficient at times to download a whole icon pack for using just one icon from that icon pack. The standard flutter icon pack does not have veg or non veg icon symbol, and as a developer we all know it’s a standard icon. There are other cases where we need to design an aesthetically pleasing UI screen, and the wireframe sent across to us by the design team seems like a far fetched dream. No worries, Stack class is here.

First off we’ll try to design a veg/non-veg icon. The way we can achieve this is quite simple and intuitive. We can stack circle icon over a square icon, and Voila! we have our desired icon.

Next, we try to mimic a design wherein info button has to be placed at a certain position with respect to the circular container. This, whole widget we refer to as a score indicator. Again it is achieved using stack class, with little help from Positioned() widget, which we can use to anchor the position of icon within the container.

Last, we try to use a combination of containers and image asset to create aesthetic and material themed UI.

So as we can see, usage of stacks and other widget combinations unlocks a lot of possibilities to build a stunning UI. If used properly we can get great results from this widget family. I’ll attach the link to git repo, so that you can pull the project and run it on your machine to get a better understanding of the code.

git repo: https://github.com/rohan1311/demo_app

Cheers! Until next time.