Image is not showing as I wrap the container with positioned Widget and give top any value as removed the value it is showing up. Why is that.

======================================================================================================================================================================================================================================================================================================================================================================================================== Here is the Code

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: MediaQuery.of(context).size.height * 2,
              child: Stack(
                children: [
                  Positioned(
                    top: 1,
                    child: Container(
                      // height: 30,
                      // color: Colors.red,
                      height: MediaQuery.of(context).size.height * 1 - 17,
                      decoration: const BoxDecoration(
                        image: DecorationImage(
                          image: AssetImage('home/h_intro-s1-l1.jpg'),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

// here you only give vertical dimensi
// but you didnt give any horizontal dimension. that caused
// the width of container will force into Positioned width, which is 0.

height: MediaQuery.of(context).size.height * 1 - 17,
width: any value.
decoration: const BoxDecoration(
    image: DecorationImage(
        image:AssetImage('home/h_intro-s1-l1.jpg')this,
        fit: BoxFit.fill,
      )
  ),

documentation Positioned: ...

Alternatively the width and height properties can be used to give the dimensions, with one corresponding position property

CodePudding user response：

You need to set left or right or both anchor too in order to use Positioned ,try this:

Positioned(
                    top: 1,
                    left:0,
                    right:0,
                    child: Container(
                      // height: 30,
                      // color: Colors.red,
                      height: MediaQuery.of(context).size.height * 1 - 17,
                      decoration: const BoxDecoration(
                        image: DecorationImage(
                          image: AssetImage('home/h_intro-s1-l1.jpg'),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),