Position absolute for Flutter

Question

I am a newbie for Flutter who comes from Web Development side. Just for fun and practice for Flutter layout, I wanted to make a "drum kit" application. But the problem is, I can not set Drum Kit parts as it should be.

You know in web development, there is position absolute option for the elements on the webpage. Is there anything like that for Flutter?

I'd appreciate any answers. Thanks. :)

Let me show what I expected : Here it is

This is what I got as a result: Result

Answer 1

The Stack widget and Positioned widget helps you achieve this:

According to the official documentation:

A Stack is a widget that positions its children relative to the edges of its box. This class is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom.

A Positioned is a widget that controls where a child of a Stack is positioned.A Positioned widget must be a descendant of a Stack.

Read more about the Stack widget here: Stack Widget

Read more about the Positioned widget here: Positioned Widget

Taking your example, you will need to create a Stack widget and the children property of the Stack widget should be your drum parts wrapped in a Positioned widget. The Positioned widget should only be used in the Stack widget.