Boxdecoration fit parent height-CodePudding

I need to make a container with background image and background color in bottom 30 pixels, help, please.

but i need layout like this enter image description here

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)

CodePudding user response：

You can simply use Column to and use another Container or Material... widget to provide extra 30px border.

  SizedBox(
              height: 540,
              child: Column(
                children: [
                  Container(
                    width: 392.7,
                    height: 510,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: Colors.grey[300],
                      borderRadius: const 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),
                    ),
                  ),
                  Container(
                    color: Colors.deepPurple,
                    height: 30.0,
                    width: 392.7,
                  )
                ],
              ),
            )

But For background cases you can use Stack for it.

  SizedBox(
              height: 540,
              width: 392.7,
              child: Stack(
                children: [
                  Container(
                    color: Colors.deepPurple,
                  ),
                  Container(
                    width: 392.7,
                    height: 510,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: Colors.grey[300],
                      borderRadius: const 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),
                    ),
                  ),
                ],
              ),
            )

More about Stack

CodePudding user response：

Try this code below and let me know if change required.

SizedBox(
      height: 540,
      child: Column(
        children: [
          Expanded(
              child: Container(
            decoration: BoxDecoration(
                image: DecorationImage(
              image: NetworkImage(
                "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
              ),
              fit: BoxFit.fill,
            )),
          )),
          Container(
            height: 30,
            color: Colors.red,
          )
        ],
      ),
    )

CodePudding user response：

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