How can I fix a Positioned Position in Flutter?

[Dominik Springer]

I've been trying for a long time to find out how I can fix my layout problem.

Overview

I use three Positioned in my body to layout the content of the app, to put it simply it is a profile information screen. The first Positioned shows the user profile information, like profile picture and profile name. The second shows pictures from the user in a GridView and the last the bottom navigation in my flutter app.

The Problem

The second Positioned loads the images on the top and conceals the first Positioned, so you can't really see the profile information. But when I try to give the second Positioned the value top: 150; it works only on a hot reload. When I run or switch to another screen and then back, the app shows me no images.

body: Container(
    color: Colors.white,
    child: SafeArea(
      child: Stack(
        //alignment: Alignment.centerLeft,
        children: [
          Positioned(..), //This is the part with profile picture etc.
          Positioned(
            top: 150, //This works only on hot reload
            child: Stack( 
              children: [
                images.length == 0
                    ? Center(
                        child: Text("No Data..."),
                      )
                    : GridView.builder(
                        controller: _scrollController,
                        gridDelegate:
                            SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 2,
                          crossAxisSpacing: 5.0,
                          mainAxisSpacing: 5.0,
                        ),
                        itemCount: images.length,
                        itemBuilder: (context, index) {
                          return ImageService.loadImage(
                              images[index].data['path']);
                        },
                      ),
                isLoading
                    ? Container(
                        width: MediaQuery.of(context).size.width,
                        padding: EdgeInsets.all(5),
                        color: Colors.grey,
                        child: Text(
                          'Loading',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      )
                    : Container(),
              ],
            ),
          ),
          Positioned(..), //Here is the bottom navigation
       ],
      ),
    ),
  ),
);

[Bened]

suggestion : put a colour to the container when is loading is false :

: Container(),

May it simply return this container. you will know it if there is no image but a coloured container.

[Dominik Springer]

Yes very good suggestion! Now the Container shows "Loading" . 

[Dominik Springer]

But why "Loading"? I have only added top: 150;

Am Samstag, 1. Februar 2020 01:40:54 UTC+1 schrieb Bened:

[Bened]

The code is read from top to bottom by the engine(computer)

Try to tell the story of your request:

1..

2..

3..

4..

Maybe changing the order of your requests could be a solution. I do not think your problem has something to do with the position