How to show images upon app start in flutter? - flutter

Question

My app, when opened, doesn't show images stored on the Hive DB. After I upload a new one, it shows up and keeps showing fine.
If the app gets close, it won't show it again until it gets uploaded again
I tried to use listenable, and setStates(), and nothing worked, or I implemented it wrong.
import "dart:io";
import "package:flutter/material.dart";
import "package:flutter_speed_dial/flutter_speed_dial.dart";
import "package:hive_flutter/adapters.dart";
import "package:image_picker/image_picker.dart";
import "package:vortexcdl/model/incident_model.dart";
import "package:vortexcdl/widget/constants.dart";
import "../boxes.dart";
late Box boxImg;
class ImagesPage extends StatefulWidget {
ImagesPage({Key? key}) : super(key: key);
State<ImagesPage> createState() => _ImagesPageState();
}
class _ImagesPageState extends State<ImagesPage> {
//Variables
List? allImages = [];
List? pickedImages;
ImagesToSend imageObj = ImagesToSend();
///Get selection o fimages from Adnroid gallery
getImagesFromHive() async {
if (boxImg.containsKey("images_box")) {
// print(" BOX FOUND");
imageObj.images = await boxImg.getAt(0).images;
} else {
// print("Box does not exist...");
// imageObj.images = []; //Prevents null error;
}
}
Future pickImage(source) async {
final pickedImages = await source;
// print(pickedImages.length);
// print("%%%%%%%%%%%%%%%%");
if (pickedImages == null) return;
if (pickedImages is XFile) {
allImages!.add(pickedImages);
// print("############ Yes");
} else {
allImages!.addAll(pickedImages);
}
getImagesFromHive();
for (var i in allImages!)
imageObj.images.add(File(i.path).readAsBytesSync());
allImages = []; //Prevents deleted images to come back
boxImg.put("0", imageObj); //Save images in Hive
setState(() {});
}
//################### BUILD ##############################
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Images of the accident")),
body: _mainWidget(),
floatingActionButton: SpeedDial(
icon: Icons.collections,
backgroundColor: mainColor(),
children: [
SpeedDialChild(
child: Icon(
Icons.photo,
color: Colors.white,
),
backgroundColor: mainColor(),
label: "Gallery",
onTap: () async {
pickImage(ImagePicker().pickMultiImage());
},
),
SpeedDialChild(
child: Icon(
Icons.camera,
color: Colors.white,
),
backgroundColor: mainColor(),
label: "Camera",
onTap: () async {
pickImage(ImagePicker().pickImage(source: ImageSource.camera));
}),
],
),
);
}
Widget _mainWidget() {
return Column(children: [
ElevatedButton(
onPressed: () {
boxImg.clear();
setState(() {});
},
child: Text("Erase DB")),
Expanded(
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
itemCount: imageObj.images.length,
itemBuilder: (BuildContext context, int index) {
return generateGallery(index);
}))
]);
}
Widget generateGallery(index) {
getImagesFromHive();
return listenImages(Stack(
fit: StackFit.loose,
alignment: AlignmentDirectional.topEnd,
children: [
RawMaterialButton(
onPressed: () {},
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Image.memory(
imageObj.images[index],
width: 200,
height: 200,
fit: BoxFit.cover,
// child: Image.memory(
// boxImg.getAt(0).images[index],
// width: 200,
// height: 200,
// fit: BoxFit.cover,
))),
Padding(
padding: EdgeInsets.fromLTRB(0, 10, 10, 0),
child: ClipOval(
child: Container(
height: 40,
width: 40,
color: Colors.black.withAlpha(100),
child: IconButton(
onPressed: () {
setState(() {
imageObj.images.removeAt(index);
boxImg.put("0", imageObj);
});
},
icon: Icon(
Icons.close,
size: 20,
color: Colors.white,
)))))
]));
}
Widget listenImages(Widget w) {
return ValueListenableBuilder<Box<ImagesToSend>>(
valueListenable: BoxesImg.getImages().listenable(),
builder: (context, box, _) {
// print("####### LISTENING TO BOX IMAGES");
// setState(() {});
return w;
},
);
}
}
I tried multiple modifications and I was not able to solve this