Today am back with a Shopping App UI that is pretty unconventional. You will see how easy it is to create such a layout using flutter.

In fact, this project took me: 2h18min, for an app UI that works just as good on Android and IOS, that means less money spent, more control over your brand since both apps look exactly the same on both devices, and easier maintainability since one team takes care of the project.

By the way, if you want to hire me for your project you can contact me anytime on Twitter, or by Email: [email protected]

Now let’s get the source code from my Github, and let’s get started!

If you want to contribute to making this blog better buy me a coffee at https://www.buymeacoffee.com/bi3cp0Zk5

Global.dart: Defining most of our variables:

In this file, I defined my color variables, list of brands, and list of products for one of the brands. Of course, you can add more variables like your theme data and other things.

Widgets: Product_Container:

This widget will hold the product information on our home page, it takes an ID as a named argument, we will use it later to get the product info.

The container itself takes 1/3 of the screen to achieve it we use:

height: MediaQuery.of(context).size.height / 3,

We also add some padding and margin, along with a BoxDecoration as follows:

margin: EdgeInsets.symmetric(vertical: 15.0, horizontal: 13.0), padding: EdgeInsets.all(15.0), decoration: BoxDecoration( borderRadius: BorderRadius.circular(35.0), color: _containerColor, ),

The container color is different for each product, so we have to get it from our product map.

The first child of the container is a Stack as we need the item’s image to be in the background and add some text in the foreground.

So the image be like:

Positioned.fill( child: Image.network( adidas_products[id]["product_image"], ), ),

And the text be like:

Align( alignment: Alignment.topLeft, child: Padding( padding: const EdgeInsets.all(9.0), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( "${adidas_products[id]["product_name"]}", style: TextStyle(color: Colors.white, fontSize: 21), ), Text( "${adidas_products[id]["product_price"]}", style: TextStyle(color: Colors.white, fontSize: 21), ), ], ), ), Icon(Icons.chevron_right) ], ), ), )

Home:

Please let me know how you would’ve achieved this layout in the comment section or DM me on Twitter.

This is how I did it:

The body of the Scaffold is a Row, the first child is the navigation on the left for that I used a container with a fixed width and gave it a blue color. Then I added a Column that will hold the Menu Icon button and an Expanded Column that will hold the brands.

Since I already have the list of brands in the global file, I used List.generate to generate the children of this column.

Each brand is actually a -90° Column that holds a Text with the name of the brand, and a container used to mark the selected one.

Since different brands have different sizes I used a FittedBox to avoid overlapping.

Wrap everything in a GestureDetector, give it an onTap function to setState of the selected item and you got yourself working navigation.

Do you remember the Row on top? It has another child! It’s called an expanded Column, and it hosts a right-aligned shopping cart icon button, as well as a NetworkImage of the selected brand logo and lastly an expanded vertical scroll direction ListView.builder that displays our products using the Widget we made in the beginning!

That’s it for today, next time we will finish this Shopping App UI by adding a product details screen.

Follow me on Twitter to be notified when this