Related Articles

Related Articles

Flutter – OctoImage Widget
  • Last Updated : 23 Oct, 2020

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.



Adding the Dependency:

Add the octo_image dependency to the pubspecy.yaml file as shown below:

dependency

Importing the Dependency:

The octo_image dependency can be imported into the main.dart file as shown below:

import 'package:octo_image/octo_image.dart';

Structuring the Application:

Use a StatelessWidget to extend the structure of thye application to add an appbar and a body as shown below:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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(),
        ],
      ),
    );
  }

chevron_right


Using the OctoImage Widget:

A simple way to use the OctoImage widget as discussed above is as following:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

OctoImage(
  image: NetworkImage(
      'IMAGE URL'),
  placeholderBuilder: OctoPlaceholder.blurHash(
    'PLACEHOLDER',
  ),
  errorBuilder: OctoError.icon(color: Colors.red),
  fit: BoxFit.cover,
);

chevron_right


We will be adding three different Network Images to depict the use of three differet Progress indicator provided by the OctoImage widget:



  • blurHash: It blurs the image while it’s loading and can be used as shown below:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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,
    ),
  );
}

chevron_right


  • circularProgressIndicator: As the name suggest it shown a circular indicator while loading an image and can be used as following:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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),
    ),
  );
}

chevron_right


  • circleAvtar: This indicator creates a circular avator to which a custom text can be added while it’s loading and can be used as followingh:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

  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"),
        ),
      ),
    );
  }
}

chevron_right


Handiling Errors:

A simple way to handle error in the OctoImage Widget is to make use of the error widget as shown below:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

OctoImage(
  image: image,
  errorBuilder: (context, error, stacktrace) =>
    const Icon(Icons.error),
);

chevron_right


Or the following way can also be used without the need for a OctoError as shown below:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

OctoImage(
  image: image,
  errorBuilder: OctoError.icon(),
),

chevron_right


Example:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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 extenstion to StatelessWidget
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(),
        ],
      ),
    );
  }
  
  // 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(
        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(
        ),
        octoSet: OctoSet.circleAvatar(
          backgroundColor: Colors.red,
          text: Text("Gal"),
        ),
      ),
    );
  }
}

chevron_right


Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :