Home > Software design >  Flutter - How to adjust position of an image in a container with fit:boxfit.cover
Flutter - How to adjust position of an image in a container with fit:boxfit.cover

Time:06-12

so i have a container that displays an image, and the image fitted to the container with fit:BoxFit.cover, here is the code:

Container(
      width: 80,
      height: 80,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        image: DecorationImage(
          fit: BoxFit.cover,
          image: AssetImage(
              "assets/images/MojitoImage.png"),
        ),
      ),
    ),

the result of the code will looks like this

the result of the code

i just want to change the position of the image down a little bit to the bottom, so it can be looks like this (there is a little black space above the leaf)

the result i wanted

any solution how to do that?

CodePudding user response:

Try alignment: Alignment.topCenter

CodePudding user response:

You can simply position the image with Stack and Position widget like this:

 Container(
        color: Colors.grey,
        width: 80,
        height: 80,
        child: Stack(
          alignment: AlignmentDirectional.center,
          children: <Widget>[
            Positioned(
              bottom: 10.0,
              right: 10,
              left: 10,
              child: Icon(Icons.receipt,
                  size: 50.0, color: Colors.greenAccent[400]), //Icon
            ),
          ],
        ),
      ),
  • Related