Image not displaying in flutter?

Question

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.

The following assertion was thrown during performLayout():
'package:flutter/src/rendering/stack.dart': Failed assertion: line 588 pos 12: 'size.isFinite': is
not true.

Either the assertion indicates an error in the framework itself, or we should provide substantially
more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

The relevant error-causing widget was:
  Stack Stack:file:///D:/1.freelance/1allex/stackoverflow_check/lib/stack_appbar.dart:38:27

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: [
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: 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: Container(
                                  height: 300,
                                  child: Image.network(
                                      'https://cdn.pixabay.com/photo/2020/08/22/00/24/cyclist-5507225_1280.jpg'),
                                ),
                              ),
                              Positioned(
                                bottom: kToolbarHeight - 5,
                                child: Container(
                                  height: 500,
                                  width: double.infinity,
                                  decoration: BoxDecoration(
                                    color: Colors.red,
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                  Text('hi, hello,')
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

I think you covered the image with the red container in the stack. Move red container as the first child of stack children.

I changed the height of the blue container to 500

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,
                              ),
                            ),
                          ],
                        ),
                      ),