Custom progress indicator with GIF image

Question

I want to make a dialog for progress indicator. I want to use GIF file.

This is the gif image:

Solution

The best way is to display the gif within the dialog box. You can do something like this:

// Currently transparent, change this to your desired background color
var _backgroundColor = Colors.transparent;

showDialog(
  context: context,
  barrierColor: _backgroundColor,
  builder: (BuildContext dialogContext) {
    return AlertDialog(
      backgroundColor: _backgroundColor,
      content: Container(
        child: Center(
          child: Image.asset(
            'assets/test.gif', // Put your gif into the assets folder
            width: 100,
          ),
        ),
      ),
    );
  },
);

Just a quick note, the GIF you chose have a solid background color. If you want to only display the progress indicator, you have 3 options:

• Remove the background from the gif
• Choose a gif with transparent background
• Set the _backgroundColor to the same color as the background from the gif

P/s: Another options is to design an animation yourself using Flare/ Rive but it's a bit advance. You can read more here

Comments

[Balaji Venkatraman]

you can use the package from pub.dev or use the gif only