Flutterexperts

OctoImage is a multifunctional flutter picture widget that is a picture library for showing placeholders, error widgets, and changing your picture.

In this blog, we will explore Octo Image In Flutter. We will also implement a demo program, and learn how to use octo images using the octo_image package in your flutter applications.

octo_image | Flutter Package
An image library for showing placeholders, error widgets, and transforming your image. Recommended using with…pub.dev

If you’re looking for the best flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

---

Table Of Contents::

Introduction

How to use

Implementation

Code Implement

Code File

Conclusion

---

---

Introduction:

The OctoImage widget in flutter requires an ImageProvider to show pictures in an application. The pictures in the OctoImage widget can be provided with a progress indicator and a placeholder for loading the Picture in it.

An OctoImage widget utilizes the Octosets which are only a mix of predefined placeholders, imagebuilders, and error widgets.

Demo Module ::

This demo video shows how to use octo images in a flutter and shows how an Octo Image will work using the octo_image package in your flutter applications. We will show a user different types of images with blur, placeholder, and progress indicators will be shown on your devices.

OctoImage Uses:

There are two ways to use the OctoImage widget as shown below:

• > Using OctoImage:

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

• > Using Octosets:

OctoImage.fromSet(
  fit: BoxFit.cover,
  image: NetworkImage(
    'YOUR IMAGE URL',
  ),
  octoSet: OctoSet.circleAvatar(
    backgroundColor: Colors.red,
    text: Text("Your Text"),
  ),
);

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:
  flutter:
    sdk: flutter
  octo_image: ^1.0.2

Step 2: Import

import 'package:octo_image/octo_image.dart';

Step 3: Run flutter packages get in the root directory of your app.

How to implement code in dart file :

You need to implement it in your code respectively:

We will create a class OctoImageDemo extend with StatelessWidget. We will add an appbar and body. In the body, we will add three widgets _image(), _blurImage(), and _circleAvatarImage().

class OctoImageDemo extends StatelessWidget {
  const OctoImageDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Octo Image Demo'),
        backgroundColor: Colors.cyan,
        automaticallyImplyLeading: false,
        centerTitle: true,
      ),
      body: ListView(
        children: [
          _image(),
          const SizedBox(height: 10),
          _blurImage(),
          const SizedBox(height: 10),
          _circleAvatarImage(),
        ],
      ),
    );
  }
}

First, we will define _image() widget are:

In this widget, we will return SizedBox with a height was 220 and its child OctoImage(). In this OctoImage, we will add an image, progressIndicatorBuilder, and errorBuilder. When the user runs the code first CircularProgressIndicator will run until the image shows.

Widget _image() {
  return SizedBox(
    height: 220,
    child: OctoImage(
      image: const NetworkImage(
          'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHRlY2huaWNhbHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=400&q=60'),
      progressIndicatorBuilder: (context, progress) {
        double? value;
        if (progress != null && progress.expectedTotalBytes != null) {
          value =
              progress.cumulativeBytesLoaded / progress.expectedTotalBytes!;
        }
        return CircularProgressIndicator(value: value);
      },
      errorBuilder: (context, error, stacktrace) => const Icon(Icons.error),
    ),
  );
}

Now, we will define _blurImage() widget are:

In this widget, we will blur the image while it’s loading. We will return an AspectRatio was 268 / 173.

Widget _blurImage() {
  return AspectRatio(
    aspectRatio: 268 / 173,
    child: OctoImage(
      image: const NetworkImage(
          'https://images.unsplash.com/photo-1619551964399-dad708b59b8b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHRlY2huaWNhbHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=400&q=60'),
      placeholderBuilder: OctoPlaceholder.blurHash(
        'LEHV6nWB2yam9wo0adR*.7kCMdnj',
      ),
      errorBuilder: OctoError.icon(color: Colors.red),
      fit: BoxFit.cover,
    ),
  );
}

Last, we will define _circleAvatarImage() widget are:

In this widget, we will create a circular avatar to which custom text can be added while it’s loading and can be used as follows.

Widget _circleAvatarImage() {
  return SizedBox(
    height: 220,
    child: OctoImage.fromSet(
      fit: BoxFit.cover,
      image: const NetworkImage(
        'https://images.unsplash.com/photo-1579445710183-f9a816f5da05?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YXZlbmdlcnN8ZW58MHx8MHx8&auto=format&fit=crop&w=400&q=60',
      ),
      octoSet: OctoSet.circleAvatar(
        backgroundColor: Colors.red,
        text: const Text("Flutter"),
      ),
    ),
  );
}

Handling Errors:

A basic method for dealing with mistakes in the OctoImage Widget is to utilize the error widget. These are shown when the ImageProvider throws an error because the picture neglected to stack.

We can construct our custom widget, or we can likewise utilize the prebuild widgets:

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


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

When we run the application, we ought to get the screen’s output like the underneath screen capture.

---

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_octo_image_demo/splash_screen.dart';
import 'package:octo_image/octo_image.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      home: const Splash(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class OctoImageDemo extends StatelessWidget {
  const OctoImageDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Octo Image Demo'),
        backgroundColor: Colors.cyan,
        automaticallyImplyLeading: false,
        centerTitle: true,
      ),
      body: ListView(
        children: [
          _image(),
          const SizedBox(height: 10),
          _blurImage(),
          const SizedBox(height: 10),
          _circleAvatarImage(),
        ],
      ),
    );
  }

  Widget _image() {
    return SizedBox(
      height: 220,
      child: OctoImage(
        image: const NetworkImage(
            'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHRlY2huaWNhbHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=400&q=60'),
        progressIndicatorBuilder: (context, progress) {
          double? value;
          if (progress != null && progress.expectedTotalBytes != null) {
            value =
                progress.cumulativeBytesLoaded / progress.expectedTotalBytes!;
          }
          return CircularProgressIndicator(value: value);
        },
        errorBuilder: (context, error, stacktrace) => const Icon(Icons.error),
      ),
    );
  }

  Widget _blurImage() {
    return AspectRatio(
      aspectRatio: 268 / 173,
      child: OctoImage(
        image: const NetworkImage(
            'https://images.unsplash.com/photo-1619551964399-dad708b59b8b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHRlY2huaWNhbHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=400&q=60'),
        placeholderBuilder: OctoPlaceholder.blurHash(
          'LEHV6nWB2yam9wo0adR*.7kCMdnj',
        ),
        errorBuilder: OctoError.icon(color: Colors.red),
        fit: BoxFit.cover,
      ),
    );
  }

  Widget _circleAvatarImage() {
    return SizedBox(
      height: 220,
      child: OctoImage.fromSet(
        fit: BoxFit.cover,
        image: const NetworkImage(
          'https://images.unsplash.com/photo-1579445710183-f9a816f5da05?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YXZlbmdlcnN8ZW58MHx8MHx8&auto=format&fit=crop&w=400&q=60',
        ),
        octoSet: OctoSet.circleAvatar(
          backgroundColor: Colors.red,
          text: const Text("Flutter"),
        ),
      ),
    );
  }
}

---

Conclusion:

In the article, I have explained Octo Image’s basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Octo Image On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the Octo Image in your flutter projects. We will show you what the Introduction is. Make a demo program for working with Octo Image and you’ve learned how to use Octo Image using the octo_image package in your flutter applications. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---