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.
|
1 |
octo_image: ^1.0.2 |
Run flutter pub get command in your terminal for importing the package.
Step2:-Import the plugin
|
1 2 |
import 'package:flutter/material.dart'; import 'package:octo_image/octo_image.dart'; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Widget _simpleBlur() { return AspectRatio( aspectRatio: 269 / 173, child: OctoImage( image: const NetworkImage('https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?cs=srgb&dl=pexels-anjana-c-674010.jpg&fm=jpg'), placeholderBuilder: OctoPlaceholder.blurHash( 'LEHV6nWB2yk8pyo0adR*.7kCMdnj', ), errorBuilder: OctoError.icon(color: Colors.red), fit: BoxFit.cover, ), ); } |
for showing image loading in circular avatar like social app.Add the below method
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Widget _circleAvatar() { return SizedBox( height: 75, child: OctoImage.fromSet( fit: BoxFit.cover, image: const NetworkImage( 'https://thumbs.dreamstime.com/b/d-image-abstract-tunnel-diagonal-black-white-stripes-optical-illusion-168695979.jpg', ), octoSet: OctoSet.circleAvatar( backgroundColor: Colors.red, text: const Text("M"), ), ), ); } |
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.😇