Stack and Positioned widget — Flutter

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Hi everybody!

In this post we are going to build a beautiful and delicious UI using mainly Stack and Positioned widget.

This design has few components: header/background, cupcake and desserts.

Ok, I’m hungry.

First step will be build each dessert which contain an image and section name with opacity background.

dessert_view.dart

In order to overlay an Image and Text we are going to need a Stack. According official documentation: This class is useful if you want to overlap several children in a simple way.

dessert_view.dart

Stack widget that positions its children relative to the edges of its box. Stack supports two type of widgets: positioned (wrapped in Positioned widget) or non-positioned (simple widget like Image).

In this case, I used a Stack with two non-positioned children because it was not necessary to use a Positioned child. If you want, you can use a Positioned to align text for example.

In addition, I used ClipRRect to make a circular border and Material for elevation property.

Second step will be mix AppBar with a background:

AppBar has a property called elevation set on 0 to remove AppBar shadow and set backgroundColor to Color.fromARGB(255, 254, 190, 120).

Scaffold and AppBar

Third step will be build body, I mean: cupcake and desserts.

Body is a Column scrollable, so SingleChildScrollView and a Column as a child.

Column has two Container as children. First Container is an image as background. Second Container has a decoration which make circular left and right top border.

This second Container has another Column as child. This column will have a beautiful cupcake and desserts.

Last step will be build a cupcake overlay between body and background.

build cupcake

In order to overlay two components we need to create a Stack with Positioned and move it bottom: 10.0. If you don’t add an empty Container with some height will fail because Positioned widget need some reference of size. And an important thing is set property clipBehavior on Clip.none then image will displayed complete. Otherwise, image will displayed cropped.

There are many ways to perform this design, try it out!

Full code is available on Github.

If you want, you can read my previous Flutter articles!.

That all folks!

Enjoy!

Enthusiastic of new things. Good places, good ideas.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store