CODEWITHSUNDEEP
dartflutterflutter-layout
Rafal
Rafal

Reputation: 105

Stack inside Stack in flutter

I want to place Stack inside Stack in flutter, it dosen't work if I change position of inner Stack's positioned widgets.

works:

Stack(
    children: [
      Positioned(
        top: 150.0,
        child: Text("Text#1"),
      ),
      Positioned(
        top: 100.0,
        child: Stack(
          children: [
            Positioned(
              child: Text("Text#2"),
            )
          ],
        ),
      )
    ],
  )

If I add "top: 200.0" inside inner Stack's positioned, inner Stack disappears and flutter throws error 

Stack(
    children: [
      Positioned(
        top: 150.0,
        child: Text("Text#1"),
      ),
      Positioned(
        top: 100.0,
        child: Stack(
          children: [
            Positioned(
              top:200.0,
              child: Text("Text#2"),
            )
          ],
        ),
      )
    ],

Upvotes: 16

Views: 9691

Answers (1)

Viren V Varasadiya
Viren V Varasadiya

Reputation: 27137

you can wrap your second Stack With Container with height and width property.

Stack fill height and width of parent widget but in your case height and width of parent widget is not define as it is a Stack Widget. if you define the size of parent widget so that stack widget can Positioned their child widget from their start point.

  Stack(
    children: [
      Positioned(
        top: 350.0,
        child: Text("Text#1"),
      ),
      Positioned(
        top: 100.0,
        child: Container(
          height: mediaQueryData.size.height,
          width: mediaQueryData.size.width,
          child: Stack(
            children: [
              Positioned(
                top:200.0,
                child: Text("Text#2"),
              )
            ],
          ),
        ),
      )
    ],
  ),

Upvotes: 31

Related Questions