Flutter – OctoImage Widget
Last Updated :
28 Feb, 2025
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, imagebuilder, 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.circularProgressIndicator()
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:
dependencies:
octo_image: ^1.0.0
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 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(),
],
),
);
}
Using the OctoImage Widget:
A simple way to use the OctoImage widget as discussed above is as follows:
Dart
OctoImage(
image: NetworkImage('IMAGE URL'),
placeholderBuilder: OctoPlaceholder.frame(),
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:
- frame: It shows the frame of the image while it’s loading and can be used as shown below:
Dart
Widget _simpleFrame() {
return AspectRatio(
aspectRatio: 269 / 173,
child: OctoImage(
image: NetworkImage('IMAGE URL'),
placeholderBuilder: OctoPlaceholder.frame(),
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"),
),
),
);
}
}
Handling Errors:
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: (main.dart)
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(),
debugShowCheckedModeBanner: false,
home: OctoImagePage(),
);
}
}
// Octoimage extension to StatelessWidget
class OctoImagePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GeeksForGeeks'),
foregroundColor: Colors.white,
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://wallpapercat.com/w/full/0/a/8/319915-3840x2160-desktop-4k-iron-man-background.jpg'),
progressIndicatorBuilder: (context, progress) {
double value = 0.0;
if (progress != null && progress.expectedTotalBytes != null) {
value = progress.cumulativeBytesLoaded / (progress.expectedTotalBytes ?? 1);
}
return CircularProgressIndicator(value: value);
},
errorBuilder: (context, error, stacktrace) => Icon(Icons.error),),
);
}
//blusrHash
Widget _simpleFrame() {
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.frame(),
errorBuilder: OctoError.icon(color: Colors.red),
fit: BoxFit.cover,
),
);
}
//circleAvatar
Widget _circleAvatar() {
return SizedBox(
height: 200,
child: OctoImage.fromSet(
fit: BoxFit.cover,
image: NetworkImage(
'https://4kwallpapers.com/images/walls/thumbs_2t/13495.jpg',
),
octoSet: OctoSet.circleAvatar(
backgroundColor: Colors.red,
text: Text("Gal"),
),
),
);
}
}
Output:
Similar Reads
OffStage Widget in Flutter
Flutter provides an inbuilt widget called “Offstageâ€, which is been used to hide or show any widget programmatically depending on user action/event. Offstage Widget is a widget that lays the child out as if it was in the tree, but without painting anything, without making the child available for hit
4 min read
Flutter - TabView Widget
There are lots of apps where you often have come across tabs. Tabs are a common pattern in the apps. They are situated at top of the app below the App bar. So today we are going to create our own app with tabs. Table of Contents:Project SetupCodeConclusionProject Setup: You can either create a new p
4 min read
Flutter - ImageFiltered Widget
In Flutter it's straightforward to blur the background image using Image Filtered Widget. A filter operation is used to scan the image. ImageFiltered is a widget that applies ImageFilter to its children to blur the image. ImageFilter Constructorconst ImageFiltered({ Key? key, required this.imageFilt
3 min read
Flutter - Stateful Widget
A Stateful Widget has states in it. To understand a Stateful Widget, you need to have a clear understanding of widgets and state management. A state can be defined as "an imperative changing of the user interface," and a widget is "an immutable description of the part of the user interface". To lear
4 min read
Flutter - Stack Widget
The Stack widget in Flutter is a powerful tool that allows for the layering of multiple widgets on top of each other. While layouts like Row and Column arrange widgets horizontally and vertically, respectively, Stack provides a solution when you need to overlay widgets. For instance, if you want to
6 min read
PageView Widget in Flutter
The PageView widget allows the user to transition between different screens in their flutter application. All you need to set it up are a PageViewController and a PageView. Constructor of PageView class:Syntax: PageView({Key key, Axis scrollDirection, bool reverse, PageController controller, ScrollP
3 min read
Flutter - GridPaper Widget
A grid paper is a paper that has a grid on it with divisions and subdivisions, for example, graph paper. We may use grid paper in creating the graphs in our flutter application. A sample image is given below to get an idea about what we are going to do in this article. How to use it?[GFGTABS] Dart G
3 min read
Flutter - Transform Widget
The Transform widget in Flutter is used to apply various transformations to its child widget, such as rotation, translation (positioning), scaling, and skewing. In this article, we are going to implement all transformations such as rotation, translation (positioning), scaling, and skewing made by th
6 min read
Flutter - InkWell Widget
InkWell is the material widget in flutter. It responds to the touch action as performed by the user. Inkwell will respond when the user clicks the button. There are so many gestures like double-tap, long press, tap down, etc. Below are the so many properties of this widget. We can set the radius of
2 min read
Flutter - Padding Widget
Padding widget in flutter does exactly what its name says, it adds padding or empty space around a widget or a bunch of widgets. We can apply padding around any widget by placing it as the child of the Padding widget. The size of the child widget inside padding is constrained by how much space is re
3 min read