Boxdecoration fit parent height

Issue

I need to make a container with background image and background color in the bottom 30 pixels, but I need the layout to look like this:

SizedBox(
            height: 540,
            child: Container(
              width: 392.7,
              height: 510,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.grey[300],
                borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(25),
                    bottomRight: Radius.circular(25)),
                image: DecorationImage(
                    image: Image.network(
                      'https://ak.picdn.net/shutterstock/videos/8258557/thumb/1.jpg',
                    ).image,
                    fit: BoxFit.cover)

Solution

as per your ui I think u have to use stack instead of column use stack and it will provide your desire output

Here is code example:-

SizedBox(
      height: 540,
      child: Stack(
        children: [ 
          Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                  image:

                  /// your image
                  fit: BoxFit.fill,
                )),
          ),
          Positioned(
              bottom: 0.0,
              child: Container(
                height: 30,
                // set color and border radius as u need 
              )),
        ],
      ),
    );

Answered By - Dipak Ramoliya