Flutter Stacking children in a Stack

user_13634140 0
Viewed 415

Just a quick question, I've been having issue with stacking 2 different children one on top of the other, here is the test code. Basically

body: Stack(
          children: [
            
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: 150.0,
                  height: 150.0,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('assets/testlogo.png')),
                  ),
                )
              ],
            ),
            
            TabBarView(
              children: [
                _One(),
                _Two(),
                
                
              ],
            ),
          ],
        ),

But the issue I am getting is that the tabs overlap the Row with the Container, something like this:

enter image description here

Basically what I need is to have the Container (Row) with the image on top of the TabBarView, and then the One() and Two() tab bar below without them overlapping the image. I hope I'm clear with the question and that the answer is very simple, but I couldn't get it to work properly.

EDIT enter image description here

dart flutter
2 Answers

Try using Positioned widget as the child/children your Stack widget.

This is from the Stack widget API doc (emphasis added):

Each child of a Stack widget is either positioned or non-positioned. Positioned children are those wrapped in a Positioned widget that has at least one non-null property. The stack sizes itself to contain all the non-positioned children, which are positioned according to alignment (which defaults to the top-left corner in left-to-right environments and the top-right corner in right-to-left environments). The positioned children are then placed relative to the stack according to their top, right, bottom, and left properties.

Since you're only using alignment in one of your children (the Row), the other children are just laying based on the default behavior of the Stack widget. so you can wrap the child in a Positioned widget:

body: Stack(
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          width: 150.0,
          height: 150.0,
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage('assets/testlogo.png')),
          ),
        )
      ],
    ),
    // Update here: wrapped with Positioned
    Positioned(
      left: 24.0,
      child: TabBarView(
        children: [
          _One(),
          _Two(),
        ],
      ),
    ),
  ],
),

Alternatively you could wrap your children in an Align widget:

body: Stack(
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          width: 150.0,
          height: 150.0,
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage('assets/testlogo.png')),
          ),
        )
      ],
    ),
    // Update here: wrapped with Align
    Align(
      alignment: Alignment.topRight,
      child: TabBarView(
        children: [
          _One(),
          _Two(),
        ],
      ),
    ),
  ],
),
user_97274020

You need to position the children with Positioned(...) widget.

user_136482050
Related