Position absolute for Flutter

user_13533042 0
Viewed 3248

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

flutter-layout flutter
3 Answers

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.

user_134526400 
     Stack(
children: <Widget>[
  Positioned(
    top: 100,
    left: 0,
    right: 0,
    child: Text("Search",
          style: TextStyle(
              color: Color(0xff757575),
              fontWeight: FontWeight.w700,
              fontFamily: "Roboto",
              fontStyle: FontStyle.normal,
              fontSize: 56.0),
          textAlign: TextAlign.center),
  ),
 ]
 )

you can try this You can fix position in the screen

user_136541500

You can use Stack class, which will have a Positioned class

How does it help

  • Stack helps you have relative-layout
  • Positioned helps you adjust the item like absolute in web
user_53625830
Related