How to Add a Fade In Effect for Images in Flutter

Images are important components of a mobile app. It’s a bit abnormal when images appear plainly in your app. In this Flutter tutorial, we discuss how to add a fade-in effect for images. We also see how to add placeholders when an image is loading.

The FadeInImage widget is used to create a Fade in effect when an image appears. It is also helpful to show a placeholder. It shows the placeholder image until the main image gets loaded. You can use the FadeInImage widget as given below.

FadeInImage(
  // here `bytes` is a Uint8List containing the bytes for the in-memory image
  placeholder: MemoryImage(bytes),
  image: NetworkImage('https://backend.example.com/image.png'),
)

Now, let’s go to the Flutter image with a placeholder and fade-in effect example.

First of all, create assets/images folders in the root project folder. Then put your placeholder image in the images folder. Update your pubspec.yaml file with the image details by adding the following line. Here, I added a loading gif image named loading.gif.

assets:
    - assets/images/loading.gif

And the following is the main code.

import 'package:flutter/material.dart';

class FadeinImageExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorials',
      home: Main()
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class Main extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Fade in image effect Example'),
      ),
      body: Center(child:FadeInImage.assetNetwork(
            placeholder: 'assets/images/loading.gif',
            image: 'https://cdn.pixabay.com/photo/2020/02/04/16/00/cheetah-4818603_960_720.jpg',
          ),
      ),
    );
  }
}

Following is the output of the Flutter example.

I hope you liked this Flutter Image Fade In effect with placeholder tutorial.