Today we are building a cloud storage app UI, it’s going to look really nice as you can see on the design.

Grab the source code from https://github.com/cybdom/cloud_storage

And Follow along!

Home Screen:

I structured the home.dart file a bit differently this time, I tried to keep it as small as possible and use separate widget files as frequently as possible.

TopBar:

If you are familiar with my “tutorials” you’d know that am not a big fan of the AppBar widget, instead, I use a Row.

Here we have a Row, with three children, first being a search bar

TextField( decoration: InputDecoration( border: InputBorder.none, hintText: "Search", prefixIcon: Icon(Icons.search), ), ),

Second is the Upgrade button which is just a RaisedButton.Icon widget with some rounded corners

RaisedButton.icon( color: Color(0xfffff0dc), label: Text("Upgrade", style: TextStyle(color: Color(0xffd1922f))), icon: Icon( Icons.star, color: Color(0xffd1922f), ), shape: RoundedRectangleBorder( borderRadius: new BorderRadius.circular(9.0), ), onPressed: () {}, ),

Lastly, we have an IconButton for the profile screen that doesn’t exist yet.

Horizontal Files List:

As always when you want to use a List you probably want to put it inside a fixed height container, children of this List are Containers with a nice borderRadius and a clean color. The container icon takes most of the space, then below that we have a Row with the folder name and a Lock Icon that appears only if the folder is locked.

Vertical files list:

This time around am again using a ListView.builder however I didn’t put it inside a limited height container. The reason for this is that this is a vertical list and I made sure that the shrinkWrap property is set to true, meaning that the list will only take the minimum space possible.

Children of this list are ListTile(s), and this is probably one of the widgets I use the most frequently because of the multiple use cases it offers.

First, the leading is a Container which has again a Color that is determined by the type of the file and a borderRadius, as a child it takes an Icon that represents the file type.

Then we have the title and subhead which are distinctly the file name and the file creation date.

To finish up with this widget we have the trailing property of the ListTile which is just an IconButton.

Details Screen:

On this screen, I will only go over one widget that I am really happy with, and it’s the Bar charts with the icons below.

So first things first since we have a lot of stats probably more than what our screen can show we need a scrollable list view, and since it’s a horizontal list we have to put it in a Container and set its height. Once that done we can generate our list view children, each child is a LayoutBuilder that gives us the exact size of our main Container, with that info we can set our Bar height by multiplying the percentage by the container height.

return LayoutBuilder( builder: (ctx, constraints) { return Container( alignment: Alignment.bottomCenter, child: Container( alignment: Alignment.bottomCenter, padding: EdgeInsets.all(5.0), margin: EdgeInsets.symmetric(horizontal: 15.0), width: MediaQuery.of(context).size.width / 10, height: constraints.maxHeight * stats[i]['progress'], decoration: BoxDecoration( borderRadius: BorderRadius.circular(15.0), color: Color(0xff2c3948), ), child: Icon(stats[i]['icon'], color: Colors.black54), ), ); }, );

As you can see we have two containers, the reason for that is if we only had one container and we set its height it wouldn’t take it into consideration and it will still fill its parent. There is probably another way to fix this but this is the solution I found and it works pretty well for me!

THE END

I could go over more details but what I suggest if you really want to learn is to take the source code and experiment by your self, change values, remove widgets and add others. I believe this is the best way to learn and this is why I don’t make step by step tutorials where you will end up copy and pasting everything.

If you are like me and you enjoy learning by doing and you think this blog is valuable then you can help me by donating on my BuyMeACofffee page.