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

Question

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.
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();
}