Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024
Difficulty: Medium

Flutter OctoImage Widget

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

OctoImage is a multifunctional flutter image widget that is an image library for showing placeholders, error widgets, and transforming your image. We will learn about it in detail in the coming sections.

Flutter OctoImage Widget

ImageProvider is required for the OctoImage Widget to display images in an application. The images in the OctoImage widget are supplied with a  Progress indicator or a Placeholder for loading the Image in it. Octosets are used by an octoImage widget that combines predefined placeholders, imagebuildesr, and error widgets.

We can use the OctoImage widget in two ways:

1. Using OctoImage:

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

 

2. Using Octosets:

OctoImage.fromSet(
  fit: BoxFit.cover,
  image: NetworkImage(
    'url',
  ),
  octoSet: OctoSet.circleAvatar(
    backgroundColor: Colors.red,
    text: Text("M"),
  ),
);

We will learn about the OctoImage widget in detail by creating a simple application, and to build the application, we will be following these steps:

  • Adding the dependencies in the pubspec.yaml file.
  • Importing the dependencies to the main.dart file.
  • Using a StatelessWidget for giving structure to the application
  • Using the OctoImage widget for designing the body of the Application with Images
  • Adding a Progress Indicator, which will be used while loading the image
  • Adding an error widget to handle errors

 

Step 1: Adding the Dependency:

We can add the octo_image dependency to the pubspecy.yaml file as shown below:
 

Step 2: Importing the Dependency:

In this step, we have to add the octo_image dependency that can be imported into the main.dart file

import 'package:octo_image/octo_image.dart';

Step 3: Structuring the Application:

In this step, we are using a StatelessWidget to extend the structure of the application for adding an app bar(optional) and a body, as shown below:
 

class OctoImagePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Coding Ninjas'),
        backgroundColor: Colors.red,
      ),
      body: ListView(
        children: [
          _customImage(),
          SizedBox(height: 17),
          _simpleBlur(),
          SizedBox(height: 17),
          _circleAvatar(),
        ],
      ),
    );
  }

Step 4: Using the OctoImage Widget:

In this step, we are using the OctoImage widget as discussed above:

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

Now, let’s have a look at all the important placeholders and indicators:

 

Step 5: Handling Errors:

A simple way to handle errors in the OctoImage Widget is to make use of the error widget. These are shown when the ImageProvider throws an error because the image failed loading.  We can build our own custom widget, or we can also use the prebuild widgets:

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

Included error widgets are:

 

Example

import 'package:flutter/material.dart';
import 'package:octo_image/octo_image.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OctoImage',
      theme: ThemeData(),
      home: OctoImagePage(),
    );
  }
}
 
class OctoImagePage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Coding Ninjas'),
        backgroundColor: Colors.red,
      ),
      body: ListView(
        children: [
          _customImage(),
          SizedBox(height: 17),
          _simpleBlur(),
          SizedBox(height: 17),
          _circleAvatar(),
        ],
      ),
    );
  }
 
  // circularProgressIndicator
  Widget _customImage() {
    return SizedBox(
      height: 250,
      child: OctoImage(
        image: NetworkImage('image_link_here1'),
        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),
      ),
    );
  }
 
  
  Widget _simpleBlur() {
    return AspectRatio(
      aspectRatio: 268 / 174,
      child: OctoImage(
        image: NetworkImage(
            'image_link_here2'),
        placeholderBuilder: OctoPlaceholder.blurHash(
          'LEHV6nWB2yam9wo0adR*.7kCMdnj',
        ),
        errorBuilder: OctoError.icon(color: Colors.red),
        fit: BoxFit.cover,
      ),
    );
  }
 
  //circleAvtar
  Widget _circleAvatar() {
    return SizedBox(
      height: 250,
      child: OctoImage.fromSet(
        fit: BoxFit.cover,
        image: NetworkImage(
          'image_link_here3',
        ),
        octoSet: OctoSet.circleAvatar(
          backgroundColor: Colors.red,
          text: Text("Gal"),
        ),
      ),
    );
  }
}


Output: 

 

                    

 

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Frequently Asked Questions

What is Flutter used for?

Flutter is Google's free and open-source UI framework for creating native mobile applications. Released in 2017, Flutter allows developers to build mobile applications with a single codebase and programming language. This capability makes building both iOS and Android apps simpler and faster.

Can we use OctoImage with older versions of CachedNetworkImage?

It is recommended to use OctoImage with CachedNetworkImage version 2.2.0 or newer.

What is a widget and what are the types of widgets?

Each element on the screen of the Flutter app is a widget. The view of the screen completely depends upon the choice and sequence of the widgets used to build the app. And the structure of the code of an app is a tree of widgets. There are broadly two types of widgets in the flutter: Stateless Widget and Stateful Widget

Conclusion

In this article, we have discussed Flutter OctoImage Widget, we also discussed it by following a few simple steps and by creating a simple application.

To learn more, see Basics of C++ with Data StructureDBMSOperating System by Coding Ninjas, and keep practising on our platform Coding Ninjas Studio.

If you think you are ready for the tech giants company, check out the mock test series on code studio.

You can also refer to our Guided Path on Coding Ninjas Studio to upskill yourself in domains like Data Structures and AlgorithmsCompetitive ProgrammingAptitude, and many more!. You can also prepare for tech giants companies like Amazon, Microsoft, Uber, etc., by looking for the questions asked by them in recent interviews. If you want to prepare for placements, refer to the interview bundle. If you are nervous about your interviews, you can see interview experiences to get the ideas about questions that have been asked by these companies.

Do upvote if you find this blog helpful!

Be a Ninja

Happy Coding!

Topics covered
1.
Introduction
2.
Flutter OctoImage Widget
2.1.
Step 1: Adding the Dependency:
2.2.
Step 2: Importing the Dependency:
2.3.
Step 3: Structuring the Application:
2.4.
Step 4: Using the OctoImage Widget:
2.5.
Step 5: Handling Errors:
2.5.1.
Example
3.
Frequently Asked Questions
3.1.
What is Flutter used for?
3.2.
Can we use OctoImage with older versions of CachedNetworkImage?
3.3.
What is a widget and what are the types of widgets?
4.
Conclusion