Are you a fan of plants? Because today we will replicate a minimalist Plant shop UI that looks really great.

You may want to get the source code from Github in order to follow along.

Now that you have the code it could be the right time to head to my BuyMeACoffee Page.

Now that you proved how generous you are, we can get started!

Small tip:

I noticed that every time I start a new flutter project I have pretty much the same file/folder architecture, so I created this small bash script to automate the process.

mkdir ui cd ui mkdir widgets mkdir screens cd .. type NUL > global.dart type NUL > ui/screens/screens.dart type NUL > ui/widgets/widgets.dart

So what this script does is creating a UI folder inside of which it creates the Widgets and Screens folder. Then it goes back to create a global file where you can store your global variables, and then it creates the screens and widgets export files. (when you have multiple widgets/screen files it may be useful to create one file to export all of them)

Of course, you can adapt this script to your use case.

Global.dart

This project’s global code isn’t much different than the others except in one way, I created a String class and that can prove to be very useful when you need to display the same text in different places across your app. The same thing applies to colors too.

Home page:

There is not much happening here, we’ve got a white background for both the scaffold and the app bar. The most “interesting” part is the ProductList widget.

The widget itself is a PageView Builder I made it Stateful to be able to set the state when the user changes the page. Now that we have the ability to track the active page we can change the Color of our container and display the purchase button only on the active “page” (Page here refers to the Product Container).

These are the 4 widgets that compose our Product container:

A Stack that contains all of the children. The green container positioned at a distance of 25 (to be honest I don’t know whats the measuring unit in flutter, you may tell me in the comments) from the bottom that contains the product image. A top-right positioned column for the price We display the circle-shaped black container that has an IconButton child if the “page” is active.

Out of this Stack we also have a description area.

Because all of this is already inside a Column we just have to add the Text widgets with the appropriate text.

Details Page:

Alright, now you may think this is a really simple page to build but you would be partly wrong.

First, we achieve the two-color background by using two expanded containers inside a column.

The second container (the one in the bottom) has a Border radius only on the top right and top left corners, doing that won’t work unless you set your scaffold color to the color of the top container.

Now that we have our background how do we put our content on top of it? This is where stack comes handy

The first child of the stack is our Column and the second is our content.

This time I didn’t want to use an AppBar so I used a Row with mainAxisAlignment set to spaceBetween.

The first child is the obvious back arrow. second one is a bit more complex…

I wanted to display the number of items the user has inside his cart so I used a Stack again.

InkWell( onTap: () {}, child: Stack( children: <Widget>[ Container( margin: EdgeInsets.only(top: 11, right: 5), decoration: BoxDecoration( color: Colors.white24, shape: BoxShape.circle, ), padding: EdgeInsets.all(11.0), child: Icon( Icons.shopping_cart, color: Colors.white, ), ), Positioned( right: 0, top: 0, child: Container( decoration: BoxDecoration( color: Colors.white, shape: BoxShape.circle, ), child: Text( "3", style: TextStyle( color: MyColors.greenActive, fontSize: 19, ), ), padding: EdgeInsets.all(5.0), ), ), ], ), )

As you can see we have a circle-shaped container with a 24% transparent white and that container our shopping cart icon. The container is positioned with a slight margin from the top right corner in order to have an overlapping effect with the second child.

The second child of the stack is again a circle-shaped container with an opaque white and this time the child is a text widget with the same color as our green background in order to achieve a transparent effect. This child is positioned at the top right corner.

Now we have finished with the “AppBar” we add some spacing using a SizedBox and we move on to the next section.

Obviously this is a row, with two expanded children, first is a column with all of our product information and buy button and, the second is an Image.network widget.

Below all of this, we have a part I am not really proud of, I didn’t really test it if it works on all devices but on mine, it works just fine.

I wanted to have this part exactly in the second half of the screen meaning on the white side of the background so I have set its the height to half the screen size minus the margins. I am sure there is a much better way to achieve this but that’s how I did it.

THE END!

Congratulations if you made it this far, you may want to share this tutorial if you liked it. Comment if you have suggestions. DM me on twitter if you have a project and you want me to work with you.

I am also thinking about streaming my coding sessions but it’s not feasible yet with my current laptop so if you want that you can donate on my Buy Me A Coffee Page. Thank you for your support!