I am showing images on gridview but i have a problem. I want to make the image's height and width equal.
This is the picture and I want to make image on the right to the have same width and height like the left one.Or at least put a white cover to missing part.
child: Consumer<Images>(
builder: (ctx, titles, ch) => GridView.builder(
physics: ScrollPhysics(),
itemCount: titles.items.length,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: getSize(_currentSliderValue),
mainAxisSpacing: 50,
childAspectRatio: 115/162.05,
crossAxisSpacing: 5,
),
itemBuilder: (ctx, index) {
saveallimages(titles.items);
return GestureDetector(
onTap: () => add(titles.items[index].image),
//()=>add(titles.items[index].image),
child: selected.contains(titles
.items[index].image.path
.toString()) ?
Container(child: selectedimage(titles.items[index].image)) :
Container(child: nonselected(titles.items[index].image))
);
And this is my widget function:
Widget selectedimage(image) {
return Stack(children: <Widget>[
Image.file(image, fit: BoxFit.cover),
Positioned(
right: 12,
bottom: 10,
child: Image.asset("assets/images/selected.png", width: 26, height: 26),
)
]);
}
Widget nonselected(image) {
return Stack(children: <Widget>[
Image.file(image, fit: BoxFit.cover),
]);
}
selectedimage function is to put check icon when the image is selected.
Instead of use Image.file or Image.asset as a child you can try using AssetImage or FileImage inside Container decoration like :
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: FileImage(image),
fit: BoxFit.cover,
),
)
)