Updated 27 April 2023


In this blog,we will implement Octo image package in flutter.

It uses an image library for showing placeholders , error widget and transform your image.

This package needs an Image Provider to show the image.We can either supply the widget with a placeholder or progress indicator , an imageBuilder and/or an error widget.

We will stepwise implement octo_image package.

You may also check our Flutter app development page.

Step1:-Add the plugin

Add the octo_image latest dependency in your pubspec.yaml file.

Run flutter pub get command in your terminal for importing the package.

Step2:-Import the plugin

import the plugin as shown above in your main.dart file.

Step3:-How to use?

We have created a method which will show a blurr placeholder till image is loading from network.

for showing image loading in circular avatar like social app.Add the below method

Now we have completed the code implementation.It’s time to check the output.


Let’s check the output of our implemented code.

alt=”” width=”250″ height=”513″>

you can see in above video that i have implemented the octo image package usage.It is very important to handle the view till image is loading from network.This gives a positive impact for our application.

Congratulations!!!! you have learned Implementation of Octo image package in flutter

For more details and methods you can refer to the official doc of flutter here.

For more interesting blogs check out here – https://mobikul.com/blog/

Hope this blog helped you with a better understanding in Implementation of Octo image package in flutter.

Thanks for reading.😇



. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home