Remember the Cloud Storage Manager UI I built long ago? It was one of the most viewed tutorials at the time, today am sharing with you a similar one, however, this one is more dedicated to local storage.

As always this is where you get the source code for free: https://github.com/cybdom/storage_manager

Web hosting for this website is coming to an end. If you like the content please support me here to make it last: https://www.buymeacoffee.com/bi3cp0Zk5

Home:

Starting up with the simple stuff, down below we have a list of files in order to generate it we use a ListView.Builder in order to lazily build each child inside the list. Inside our item builder, we check for which type of file it is, then we choose the appropriate icon and container color for it.

“Progress Indicator”:

On top we have a stats container, it took required some trial and error to achieve this result. I’d like to know how you would’ve achieved the same result, especially for the multi-color progress indicator.

In my case, I used a Container I gave it height and a border-radius, as a child I used a LayoutBuilder and this will help us determine the exact width of this container, then what we do is that inside of a Row we add our “Progress Indicator Containers” each container has a specific color and a width percentage so what I do is that I take the main containers width that we got through the LayoutBuilder and multiply it by the percentage of the “progress” and I got this result.

Files types sizes:

Since we probably don’t know how many file types we may want to render, the best way here is to use a Wrap widget, it allows you to Stack widgets in a defined MainAxis until reaching a breakpoint and go to another line.

Am not the best at explaining stuff so here is the official doc:

A Wrap lays out each child and attempts to place the child adjacent to the previous child in the main axis, given by direction, leaving spacing space in between. If there is not enough space to fit the child, Wrap creates a new run adjacent to the existing children in the cross axis.

Again we wrap our Wrap widget inside a LayoutBuilder in order to know its width so that we can make sure each of its children takes exactly 1/3 of the “screen”.

Details Screen:

Sometimes we want to achieve that overlapping effect, where the white container has a border-radius and right below it we have that blue color, there are to ways to do that as far as I know.

The first is using a Stack, the second is by setting your Scaffold background color to the same blue as the AppBar and the First child of your column which is here a Container hosting the “Folder” Text widget.

Here in our list of folders, we do some checking too, using an Enum we set in our Global file every folder type that we need, then in our list of folders, we set its type to one of those enums. After that inside our ListView item builder, we check each value to see which icon to render.

THE END

This tutorial was pretty short even though I could’ve gone through much more detail.

I think in order to share more details I’d have to make video tutorials and for that, I need first more followers on my Twitter and second better hardware and that’s why I ask you if you could donate any amount at BuyMeCoffee I’d appreciate it.

Remember this is not my full-time job, so the code I am sharing and the articles I am writing are just to help people get started with flutter. Contributions are going to motivate me to make better quality tutorials and share more things with you so it’s a win-win!