I'm trying to read photos from my iphone device, but the loading takes too much time. I know it could be because of the number of photos thats need to be loaded. I'm using the photo_gallery dependency. So how can I effectively read the photos on my real device without too long loading time?.
With that said, the loading time on my IOS emulator has no problem with the loading time, but it only load 6 images.
Here is my reading function, where the future '_promptPermissionSetting' is checking for permission on the device.
returnImages() {
return _memoizer2!.runOnce(() async {
if (await _promptPermissionSetting()) {
List<Album> albums =
await PhotoGallery.listAlbums(mediumType: MediumType.image);
mediaPage = await albums[0].listMedia();
imageOnFocus = mediaPage.items[0];
return mediaPage.items;
} else {
return [];
}
});
}
And the below code it's my Futurebuilder, which hold some of the layout that's need to shown on the screen, when the Future is done executing. The design looks like this: design
FutureBuilder<List<Medium>>(
future: returnImages(),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return Center(
child: CircularProgressIndicator(),
);
default:
if (snapshot.hasError) {
return Text('Error: ${snapshot.error} nr. 1');
} else {
return NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
collapsedHeight: 0,
toolbarHeight: 0,
// floating: false,
elevation: 0.0,
pinned: true,
primary: true,
expandedHeight:
MediaQuery.of(context).size.height * .45,
backgroundColor: Colors.transparent,
flexibleSpace: imageOnFocus == null
? Container()
: FlexibleSpaceBar(
background: FadeInImage(
placeholder:
MemoryImage(kTransparentImage),
image: ThumbnailProvider(
mediumId: imageOnFocus!.id,
mediumType: imageOnFocus!.mediumType,
highQuality: true,
),
)))
];
},
body: SafeArea(
child: Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: Color.fromRGBO(47, 47, 48, .1),
))),
child: Column(children: [
Container(
height:
MediaQuery.of(context).size.height * .08,
decoration: BoxDecoration(
color: Color.fromRGBO(245, 245, 246, 1)),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Container(
margin: EdgeInsets.only(left: 20),
child: GestureDetector(
child: Text(
"Seneste",
style: TextStyle(
color:
Color.fromRGBO(47, 47, 48, 1),
fontWeight: FontWeight.normal,
fontSize: 18),
),
),
),
Container(
margin: EdgeInsets.only(right: 20),
child: GestureDetector(
onTap: () {},
child: Row(
children: [
Text(
"Se alle",
style: TextStyle(
color: Color.fromRGBO(
47, 47, 48, 1),
fontWeight:
FontWeight.normal,
fontSize: 18),
),
Icon(
Icons.arrow_forward_ios,
color: Color.fromRGBO(
47, 47, 48, 1),
size: 20,
)
],
)),
)
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: Color.fromRGBO(47, 47, 48, .1),
))),
child: GridView
.count(crossAxisCount: 3, children: [
...snapshot.data!.map((media) =>
GestureDetector(
onTap: () =>
handleChangeOfMainPicture(
media),
child: Container(
margin: EdgeInsets.all(.5),
child: FadeInImage(
fit: BoxFit.cover,
placeholder: MemoryImage(
kTransparentImage),
image: ThumbnailProvider(
mediumId: media.id,
mediumType:
media.mediumType,
highQuality: true,
),
),
)))
])))
])),
));
}
}
},
)
Any tips, help or guide is appreciated, Thanks!