Start a Project

OCTO IMAGE PACKAGE IN FLUTTER

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.

Step4:-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.😇

References

https://pub.dev/packages/octo_image

Exit mobile version