Flutter align two widgets in same position on stack

Question

I have 2 widget in stack. One of them is aligned in center. And the widget which is on the top is other stack. And I want show second widget with first widget's top and left position. Here is the explain:

The yellow area is my stack. And first widget is setted like Center(child: myFirstWidget). My second widget is referenced from here it's a resizable widget so it's an another stack and it's childs are "positioned". So I need to set top and left value for initialize. But my main stack filled page So when I set my second widget's top and left to 0. It's shown as below. But I want to show align it to centered child's top like:

My code snip:

child: Container(
          color: Colors.red,
          child: Stack(
            children: [
              Center(
                child: Image.file(
                  File("myfilepath"),
                ),
              ),
              ResizableWidget(
                child: Container(
                  color: Colors.blue,
                ),
              ),
            ],
          ),
        ),

score 0 · Answer 1 · answered Sep 30 '21 at 16:35

0

You can adjust the position of the widgets with the Position widget like this:

Positioned(
           child: ResizableWidget(
                    child: Container(
                           color: Colors.blue,
                           ),
                  ),
           top: 80,
           right: -5, 
),

The value of top and right are just random values, you should check what works for you!

answered Sep 30 '21 at 16:35

Máté P

5
2

But my main issue is I don't know what should be the top, left or right value? My top value should be first widget's top. But I can't know it's position due to it's centered. So I can't give manuel top or left values. – bsgal Sep 30 '21 at 16:41
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 30 '21 at 23:51

Tanguy · Answer 2 · 2021-10-01T08:59:59.887

0

You should make Center the parent of the Stack.

The Stack will be positioned at the center of its parent because of Center, it will get the dimensions of its biggest childs (height and width) and will position other childs according to the alignment value.

Edit : I modified the code to include a placeHolder image. Here I gave it a 6000x2000 size but you can change it to whatever value you want. Code is working as expected, see capture below.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Center(
      child: Stack(
        alignment: AlignmentDirectional.topStart,
        children: [
          Image.network('https://via.placeholder.com/6000x2000'),
          SizedBox(
              height: 50,
              width: 50,
              child: Container(
                color: Colors.green,
              ))
        ],
      ),
    ),
  );
}

edited Oct 01 '21 at 08:59

answered Sep 30 '21 at 16:37

Tanguy

838
4
15

My main issue is I don't know the size of image.file widgets. So I can't put it to "sized box". – bsgal Oct 01 '21 at 08:30
@bss Those SizedBox are only here for example. You can replace them with your Image widget and ResizableWidget. I’ll edit my answer. – Tanguy Oct 01 '21 at 08:35
I understand. When I put my image widget to stack directly, it's overflow so I need to wrap it with flexible. But when I covered it flexible it's covered all space. So this answer is not working in my case. – bsgal Oct 01 '21 at 08:39
I edited my answer to include an image. I gave it a really big size and it works as intended. If you have an overflow it means it's inside a Column or a Row with not enough constraints. That's another problem and I propose you ask another question if you need help on that. – Tanguy Oct 01 '21 at 09:01

Flutter align two widgets in same position on stack

2 Answers2