Flutter – OctoImage Widget

17 Dec, 2021
The OctoImage widget in Flutter requires an ImageProvider to display images in an application. The images in the OctoImage widget can be supplied with a Progress indicator or a Place holder for loading the Image in it. An OctoImage widget makes use of the Octosets which are nothing but the combination of predefined placeholders, imagebuildesr, and error widgets. There are two ways to use the OctoImage widget as shown below:
1. Using OctoImage:
OctoImage(
  image: NetworkImage(
      'IMAGE URL'),
  placeholderBuilder: OctoPlaceholder.blurHash(
    'PLACEHOLDER',
  ),
  errorBuilder: OctoError.icon(color: Colors.red),
  fit: BoxFit.cover,
);
2. Using Octosets:
OctoImage.fromSet(
  fit: BoxFit.cover,
  image: NetworkImage(
    'IMAGE URL',
  ),
  octoSet: OctoSet.circleAvatar(
    backgroundColor: Colors.red,
    text: Text("M"),
  ),
);
In this article, we will explore the OctoImage widget in detail using a simple application. To build the application follow the below steps:
Add the dependency into the pubspec.yaml file.
Import the dependency to the main.dart file.
Use a StatelessWidget to give structure to the application
Use the OctoImage widget  to design the body of the Application with Images
Add a Progress Indicator to use while loading the image
Add an error widget to handle errors
Now, let’s explore these steps in detail.
Add the octo_image dependency to the pubspecy.yaml file as shown below:
The octo_image dependency can be imported into the main.dart file as shown below:
import 'package:octo_image/octo_image.dart';
Use a StatelessWidget to extend the structure of the application to add an appbar and a body as shown below:
Dart
class OctoImagePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('GeeksForGeeks'),        backgroundColor: Colors.green,      ),      body: ListView(        children: [          _customImage(),          SizedBox(height: 16),          _simpleBlur(),          SizedBox(height: 16),          _circleAvatar(),        ],      ),    );  }
A simple way to use the OctoImage widget as discussed above is as follows: 
Dart
OctoImage(  image: NetworkImage(      'IMAGE URL'),  placeholderBuilder: OctoPlaceholder.blurHash(    'PLACEHOLDER',  ),  errorBuilder: OctoError.icon(color: Colors.red),  fit: BoxFit.cover,);
 We will be adding three different Network Images to depict the use of three different Progress indicator provided by the OctoImage widget: 
blurHash: It blurs the image while it’s loading and can be used as shown below:
Dart
Widget _simpleBlur() {  return AspectRatio(    aspectRatio: 269 / 173,    child: OctoImage(      image: NetworkImage(          'IMAGE URL'),      placeholderBuilder: OctoPlaceholder.blurHash(        'PLACE HOLDER',      ),      errorBuilder: OctoError.icon(color: Colors.red),      fit: BoxFit.cover,    ),  );}
circularProgressIndicator: As the name suggests it shown a circular indicator while loading an image and can be used as follows:
Dart
Widget _customImage() {  return SizedBox(    height: 200,    child: OctoImage(      image: NetworkImage('IMAGE URL'),      progressIndicatorBuilder: (context, progress) {        double value;        if (progress != null && progress.expectedTotalBytes != null) {          value =              progress.cumulativeBytesLoaded / progress.expectedTotalBytes;        }        return CircularProgressIndicator(value: value);      },      errorBuilder: (context, error, stacktrace) => Icon(Icons.error),    ),  );}
circleAvatar: This indicator creates a circular avatar to which a custom text can be added while it’s loading and can be used as follows:
Dart
  Widget _circleAvatar() {    return SizedBox(      height: 200,      child: OctoImage.fromSet(        fit: BoxFit.cover,        image: NetworkImage(          'IMAGE URL',        ),        octoSet: OctoSet.circleAvatar(          backgroundColor: Colors.red,          text: Text("CUSTOM TEXT WHILE LOADING IMAGE"),        ),      ),    );  }}
A simple way to handle error in the OctoImage Widget is to make use of the error widget as shown below: 
Dart
OctoImage(  image: image,  errorBuilder: (context, error, stacktrace) =>    const Icon(Icons.error),);
 Or the following way can also be used without the need for a OctoError as shown below: 
Dart
OctoImage(  image: image,  errorBuilder: OctoError.icon(),),
Example:
Dart
import 'package:flutter/material.dart';import 'package:octo_image/octo_image.dart'; void main() {  runApp(MyApp());} class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'OctoImage',      theme: ThemeData(),      home: OctoImagePage(),    );  }} // Octoimage extension to StatelessWidgetclass OctoImagePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('GeeksForGeeks'),        backgroundColor: Colors.green,      ),      body: ListView(        children: [          _customImage(),          SizedBox(height: 16),          _simpleBlur(),          SizedBox(height: 16),          _circleAvatar(),        ],      ),    );  }   // circularProgressIndicator  Widget _customImage() {    return SizedBox(      height: 200,      child: OctoImage(        image: NetworkImage('https://www.irishtimes.com/polopoly_fs/1.4109315.1575891315!/image/image.jpg_gen/derivatives/box_620_330/image.jpg'),        progressIndicatorBuilder: (context, progress) {          double value;          if (progress != null && progress.expectedTotalBytes != null) {            value =                progress.cumulativeBytesLoaded / progress.expectedTotalBytes;          }          return CircularProgressIndicator(value: value);        },        errorBuilder: (context, error, stacktrace) => Icon(Icons.error),      ),    );  }   //blusrHash  Widget _simpleBlur() {    return AspectRatio(      aspectRatio: 269 / 173,      child: OctoImage(        image: NetworkImage(            'https://english.cdn.zeenews.com/sites/default/files/2019/12/10/834702-gal-gadot-news.jpg'),        placeholderBuilder: OctoPlaceholder.blurHash(          'LEHV6nWB2yk8pyo0adR*.7kCMdnj',        ),        errorBuilder: OctoError.icon(color: Colors.red),        fit: BoxFit.cover,      ),    );  }   //circleAvtar  Widget _circleAvatar() {    return SizedBox(      height: 200,      child: OctoImage.fromSet(        fit: BoxFit.cover,        image: NetworkImage(          'https://i.pinimg.com/564x/f6/1a/5f/f61a5f7e90f0ba4f3eda751f6ebc6f46.jpg',        ),        octoSet: OctoSet.circleAvatar(          backgroundColor: Colors.red,          text: Text("Gal"),        ),      ),    );  }}
Output: 
 
surinderdawra388
clintra
android
Flutter
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - Search Bar
Flutter - FutureBuilder Widget
Flutter - Flexible Widget
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Search Bar
Flutter - Flexible Widget
Flutter - FutureBuilder Widget