How do I tell when a NetworkImage has finished loading?
You can resolve
to get an ImageStream
and addListener
to the ImageStream
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatefulWidget {
State createState() => new MyAppState();
}
class MyAppState extends State<MyApp> {
Image _image = new Image.network(
'https://flutter.io/images/flutter-mark-square-100.png',
);
bool _loading = true;
@override
void initState() {
_image.image.resolve(new ImageConfiguration()).addListener((_, __) {
if (mounted) {
setState(() {
_loading = false;
});
}
});
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
body: new Center(
child: _loading ? new Text('Loading...') : _image,
),
),
);
}
}
2021 Update
_image.image.resolve(ImageConfiguration())
.addListener(ImageStreamListener((ImageInfo info, bool syncCall) {
// DO SOMETHING HERE
completer.complete();
});
I find this method in flutter official demo,wish help you.
import 'dart:async';
import 'package:flutter/material.dart';
void _imageLoad() async {
String imageName = "";
Image downloadImage = new Image.network(imageName);
final ImageStream stream = downloadImage.image.resolve(ImageConfiguration.empty);
final Completer<void> completer = Completer<void>();
stream.addListener((ImageInfo info, bool syncCall) => completer.complete());
await completer.future;
if (mounted) {
//do sth
}
}
You can do it, with an ImageStreamListener. The first Parameter of the ImageStreamListener is an ImageListener Callback which is called, when the image is fully loaded.
var _image = NetworkImage("URL");
_image.resolve(ImageConfiguration()).addListener(
ImageStreamListener(
(info, call) {
print('Networkimage is fully loaded and saved');
// do something
},
),
);