Flutter Progressive Image

A flutter widget which progressively loads large images using Low Quality Image Placeholders.


  1. Displays placeholder and thumbnail image until the target Image loads.

  2. Smooth Fade-in animations for preventing immediate image popups on load.

  3. Blur effect for low resolution thumbnail to prevent the pixelated view.

  4. Effectively resolves thumbnail image before the target image starts to fetch for quick first impression.

  5. Placeholder widgets instead of placeholder images can now be added in v2.0.0


Following steps will help you add this library as a dependency in your flutter project.

  1. In the pubspec.yaml file in the root of your project

    progressive_image: ^2.0.0
  2. Run the following command to get packages:

    $ flutter packages get
  3. Import the package in your project file:

    import 'package:progressive_image/progressive_image.dart';


For a more detailed look at how to use this library, there is a sweet project in the example directory and various examples can be found here

A simple example usage of the ProgressiveImage widget is shown below:

import 'package:flutter/material.dart';
import 'package:progressive_image/progressive_image.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
Widget build(BuildContext context) {
 return MaterialApp(
   home: Scaffold(
     appBar: AppBar(title: Text('Progressive Image Example')),
     body: ProgressiveImageExample(),

class ProgressiveImageExample extends StatelessWidget {
 Widget build(BuildContext context) {
     return Container(
         child: ProgressiveImage(
             placeholder: AssetImage('assets/placeholder.jpg'),
             // size: 1.87KB
             thumbnail: NetworkImage('https://i.imgur.com/7XL923M.jpg'),
             // size: 1.29MB
             image: NetworkImage('https://i.imgur.com/xVS07vQ.jpg'),
             height: 300,
             width: 500,


View Github