'GridView builder are rendering images from sqflite database very ugly in flutter

I created a database using sqflite and I am rendering images from database with ImagePicker in a Staggered Grid View Builder and also on another tab with Grid View Builder. When I tap on a container, as you see, I load the images from that container.

The images are loaded after a few miliseconds, even if I am using loading bool variables. The problem is appearing when I switch the tabs, or when I enter in a container as you see below.

enter image description here

I dunno where is the problem, because the Grid View is created only after the images are loaded in a variable.

The code I think it's relevant:

@override
void initState() {
 super.initState();
 db = CleverClosetDatabase.instance;
 refreshClosetOrganizer();
 refreshImagesFromToBuy();
 _tabController = TabController(length: 3, vsync: this, initialIndex: 0);
 _tabController.addListener(_handleTabChange);
}
Future refreshClosetOrganizer() async {
 setState(() => isLoadingClosetOrganizer = true);
 cleverClosetOrganizer = await db.readAllClosetOrganizer();
 setState(() => isLoadingClosetOrganizer = false);
}
Future refreshImagesFromClosetOrganizer(String closetOrganizer) async {
 setState(() => isLoadingMyClosetAfterTap = true);
 myClosetOrganizerTappedImages = await db.readAllCleverCloset(1, closetOrganizer);
 setState(() => isLoadingMyClosetAfterTap = false);
}
TabBarView(
        controller: _tabController,
        children:[
          isLoadingClosetOrganizer
              ? const Center(child: CircularProgressIndicator(
            backgroundColor: Color(0xff393432),
            valueColor: AlwaysStoppedAnimation(Color(0xffE4BCB4)),
            strokeWidth: 6,
          ))
              : !isClosetOrganizerTapped ? myClosetFirstPage() : isLoadingMyClosetAfterTap ?
          const Center(child: CircularProgressIndicator(
            backgroundColor: Color(0xff393432),
            valueColor: AlwaysStoppedAnimation(Color(0xffE4BCB4)),
            strokeWidth: 6,
          ))
              : myClosetSecondPage(),
          isLoadingToBuy ? const Center(child: CircularProgressIndicator(
            backgroundColor: Color(0xff393432),
            valueColor: AlwaysStoppedAnimation(Color(0xffE4BCB4)),
            strokeWidth: 6,
          )) :
              toBuyWidgetPage(),
          isLoadingOutfitPlanner ? const Center(child: CircularProgressIndicator(
            backgroundColor: Color(0xff393432),
            valueColor: AlwaysStoppedAnimation(Color(0xffE4BCB4)),
            strokeWidth: 6,
          )) :
          const Text("A"),
        ]
    ),
  Widget myClosetSecondPage() {
return myClosetOrganizerTappedImages.isNotEmpty ? Container(
  margin: const EdgeInsets.fromLTRB(10, 65, 10, 10),
  child: GridView.builder(
    clipBehavior: Clip.none,
    physics: const ScrollPhysics(),
    shrinkWrap: true,
    gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
      crossAxisSpacing: 5,
    mainAxisSpacing: 5,
    maxCrossAxisExtent: SizeConfig.screenWidth!/2,),
    itemCount: myClosetOrganizerTappedImages.length,
    itemBuilder: (BuildContext ctx, index) {
      return Container(
        decoration: const BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20))
        ),
        width: SizeConfig.screenWidth!/4,
        height: SizeConfig.screenWidth!/4,
        child: FittedBox(
          child: CleverCloset.imageFromBase64String(myClosetOrganizerTappedImages[index].getImage!),
          fit: BoxFit.fill,
        ),
      );
    }
  ),
) :  Container();
}

  Widget toBuyWidgetPage() {
return imagesFromToBuy.isNotEmpty ? Container(
  margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
  child: GridView.builder(
      clipBehavior: Clip.none,
      physics: const ScrollPhysics(),
      shrinkWrap: true,
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        crossAxisSpacing: 5,
        mainAxisSpacing: 5,
        maxCrossAxisExtent: SizeConfig.screenWidth!/2,),
      itemCount: imagesFromToBuy.length,
      itemBuilder: (BuildContext ctx, index) {
        return Container(
          decoration: const BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(20))
          ),
          width: SizeConfig.screenWidth!/4,
          height: SizeConfig.screenWidth!/4,
          child: FittedBox(
            child: CleverCloset.imageFromBase64String(imagesFromToBuy[index].getImage!),
            fit: BoxFit.fill,
          ),
        );
      }
  ),
) :  Container();
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source