Check image is loaded in Image.network widget in flutter

Question

I am new to Flutter. I try to load network image using image.network widget. it\'s work fine but sometimes it\'s take time to load.I added tap listener to ima

Answer 1

You could use a FadeInImage with a placeholder to do it

When displaying images using the default Image widget, you might notice they simply pop onto the screen as they’re loaded. This might feel visually jarring to your users.

Instead, wouldn’t it be nice to display a placeholder at first, and images would fade in as they’re loaded? Use the FadeInImage widget for exactly this purpose.

FadeInImage works with images of any type: in-memory, local assets, or images from the internet.

You can also consider using local assets for placeholders. First, add the asset to the project’s pubspec.yaml file (for more details, see Adding assets and images):

Complete example

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Fade in images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: FadeInImage.assetNetwork(
            placeholder: 'assets/loading.gif',
            image: 'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}