I am making a flutter app and I am using the same image in two places. The first place is a carousel and the second is a Full size Container. The image in the carousel is being cut and I want to shift it slightly to the right so that it does not get cut from the text area.
Currently this is how it looks
I want to ensure that the box with the text is not cropped.
Below is the image for reference
This is the code I am using
child: Card(
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
margin: const EdgeInsets.all(24),
child: ClipRRect(
borderRadius: BorderRadius.circular(
12.0),
child: Image.asset(
imageName,
fit: BoxFit.cover,
width: double.infinity,
height: double.infinity,
),
),
),
You can utilize the alignment property within the Image.asset
widget.
To align it from the left, simply assign alignment as Alignment.centerLeft
.
For more customization, you can set it from Alignment(-1.0, 0.0)
, which represents Alignment.centerLeft
, to Alignment(0.0, 0.0)
, representing Alignment.center
.
For example:
child: Image.asset(
imageName,
fit: BoxFit.cover,
alignment: Alignment.centerLeft,
width: double.infinity,
height: double.infinity,
),