I was trying to make a complex layout. When I did below code, it's not showing the image and the text below it and there is no error.

so don't know, what's happening behind it.

Trying to make image over the appbar bottom, slight overlay and need to scroll the image and content.

I used Stack and I need to show the image, complete in height.

import 'package:flutter/material.dart';

class StackAppBarCheck extends StatelessWidget {
  const StackAppBarCheck({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Stack(
          children: [
            Container(
              height: kToolbarHeight,
              color: Colors.blue,
              child: Row(
                children: [
                  Text('This is appbar'),
                ],
              ),
            ),
            Positioned(
              left: 0,
              top: kToolbarHeight - 5,
              right: 0,
              bottom: 0,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Expanded(
                    child: SingleChildScrollView(
                      child: Column(
                        children: [
                          Stack(
                            children: [
                              Positioned(
                                left: 0,
                                right: 0,
                                top: kToolbarHeight,
                                child: Image.network(
                                    'https://cdn.pixabay.com/photo/2020/08/22/00/24/cyclist-5507225_1280.jpg'),
                              ),
                              Positioned(
                                child: Container(
                                  height: 500,
                                  width: double.infinity,
                                  decoration: BoxDecoration(
                                    color: Colors.red,
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                  Text('hi, hello,')
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

According to the

Below is the screenshot after of the app i removed the red container.

Here i moved the red container to the stack's first child

SizedBox(
                        height: MediaQuery.of(context).size.height / 2,
                        child: Stack(
                          children: [
                            Positioned(
                              child: Container(
                                height: 500,
                                width: double.infinity,
                                decoration: BoxDecoration(
                                  color: Colors.red,
                                  borderRadius: BorderRadius.circular(20),
                                ),
                              ),
                            ),
                            Positioned(
                              left: 0,
                              right: 0,
                              top: kToolbarHeight,
                              child: Image.network(
                                'https://cdn.pixabay.com/photo/2020/08/22/00/24/cyclist-5507225_1280.jpg',
                                fit: BoxFit.contain,
                                height: 400,
                              ),
                            ),
                          ],
                        ),
                      ),