Grid view image View difference Problem in Flutter?

Issue

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.

This is my code:

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.

Solution

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

Answered By – Kisame Hoshigaki

Answer Checked By – Marilyn (FlutterFixes Volunteer)