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

Question

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

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)

any solution how to do that?

It depends on image, You can check about [`BoxFit`](https://api.flutter.dev/flutter/painting/BoxFit.html) and also contianer `alignment`. — Md. Yeasin Sheikh, Jun 11 '22 at 13:52

score 4 · Answer 1 · answered Jun 11 '22 at 10:35

4

Try alignment: Alignment.topCenter

answered Jun 11 '22 at 10:35

Kaushik Chandru

15,510
2
12
30

score 1 · Answer 2 · answered Jun 12 '22 at 09:56

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

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

2 Answers2