Image is not showing with Positional widget

Shahryar Rafique 0
Viewed 32

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,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
position flutter-web flutter-layout dart flutter
2 Answers
// 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

pmatatias0

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,
                        ),
                      ),
                    ),
                  ),
eamirho3ein0
Related