Today we’ve got another shopping app UI, I know I already shared one less than a week ago but it seems that you like this kind of UIs so I am sharing another one again!

The format will be different this time, instead of talking about the whole app I will try to focus on 3 main custom widgets, hopefully giving you more value and useful information. So if you like it please let me know, if you hate it please let me know too.

Different format or not, these steps won’t change:

Get the source code: https://github.com/cybdom/shop_ui Pay me a coffee: https://www.buymeacoffee.com/bi3cp0Zk5 Follow me on twitter: https://twitter.com/cybdom RT – SHARE this tutorial.

Widgets:

Let’s fire this up with our first widget:

Profile Container:

Such a layout is very popular especially on social networking apps, it allows us to show a lot of information in a very compact form factor.

We start by creating a Container, and we give it a borderRadius as well as a linear gradient that is very suddle. Inside of it, we add a Column. The first thing usually do with Columns is that I set the crossAxisAlignment value to “start”, I wonder if it’s the same for you?

Our column has two children and both are Row.

The first Row has a CircleAvatar that contains our profile picture, but in order to achieve the white border, I decided to wrap it inside a container and give the later some padding, circle shape and obviously a white color.

The second row has some redundant children, I should’ve put them in a list or something instead of having four columns.

Categories list:

Fancy right? but not that complex to create using flutter.

Inside of a limited height Container, we put a ListView.builder and as a child/children, we use the SpecialCategoryItems widget.

The background rectangle is a Container that has some decorations such as a BorderRadius, BoxShadow and obviously a color that changes depending on if the item is active or not. However, we have to wrap it inside a Transform.Rotate widget in order to rotate it 45 degrees.

Now, on top of this container, we Align an Icon button and there you go.

Details Header:

In this one, I’d like to focus on the “fancybackground” widget, since this is just a Stack inside a Container that takes 1/3 of the screen height, other children of this Stack ar the “back button” and the Price tag.

Back to the FancyBackground! Actually it’s just another Container that takes an Image.network widget as a child, however we wrap this container inside a ClipPath and we use a CustomClipper in order to give it that styling.

class MyCustomClip extends CustomClipper<Path> { @override Path getClip(Size size) { var path = Path(); path.lineTo(0.0, size.height / 1.3); path.lineTo(size.width, size.height); path.lineTo(size.width, 0); path.close(); return path; } @override bool shouldReclip(CustomClipper<Path> oldClipper) => true; }

The custom clip is pretty straight forward however, I’ve set the shouldReclip to true in order to set the changes on Hot Reload for testing purposes.

Conclusion:

I think I went over most of the interesting parts of this app, I hope I gave you more information and thus more value for your time.

Do you like this new format? Please let me know down below, comments are the only way I can improve and deliver better content so please don’t hesitate it helps a lot!

Sharing and following me on Twitter helps too (As well as donating $$$ lol).