Images are major to each application. They can give urgent data by filling in as visual guides or just working on the stylish of your application. There are numerous ways of adding an image to your Flutter application.
At the point when you make an application in Flutter, it incorporates both code and resources (assets). An asset is a document, which is packaged and sent with the application and is open at runtime. Showing pictures is the major idea of most versatile applications.
This blog will explore the Rendering Image From Byte Buffer/Int8List In Flutter. We will see how to implement a demo program. We are going to learn about how we can render an image in your flutter applications.
Table Of Contents::
Introduction:
Perusing byte data from a given URL of an image and you can change this move to suit what is happening, like getting byte data from a file or a database Utilizing Image. memory to render the image from byte data.
Demo Module :
The above demo video shows how to render an image in a flutter. It shows how rendering an image from a byte will work in your flutter applications. It shows an image with its URL instead of the detour of getting its bytes from the URL and then using this byte list to display the image. It will be shown on your device.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In Flutter, you can render a picture from an Int8List of bytes by utilizing the Image. memory constructor like:
Image.memory(Uint8List.fromList(myBytes));Assuming that what you have are byte buffers, utilize this:
Image.memory(Uint8List.fromList(myBuffer.asInt8List()));In the main. dart file, we will create a HomeScreen class. In this class, first, we will add Int8List byte data that will be used to render the image.
Int8List? _bytes;
Now, we will create a _getBytes() method. In this method, we will get byte data from an image URL. Inside, we will add the final ByteData data is equal to the NetworkAssetBundle(). We will add _bytes is equal to the data.buffer.asInt8List().
void _getBytes(imageUrl) async {
final ByteData data =
await NetworkAssetBundle(Uri.parse(imageUrl)).load(imageUrl);
setState(() {
_bytes = data.buffer.asInt8List();
print(_bytes);
});
}
Now, we will create an initState() method. In this method, we will add _getBytes(Your Url’).
@override
void initState() {
// call the _getBytes() function
_getBytes(
'https://upwork-usw2-prod-assets-static.s3.us-west-2.amazonaws.com/org-logo/425220847461273600');
super.initState();
}
In the body, we will add the Center widget. In this widget, we will add _bytes is equal-equal to null then, show CircularProgressIndicator. Else, show an Image.memory(). Inside this function, we will add Uint8List.fromList(_bytes!), width, height, and fit is equal to BoxFit.contain.
Center(
child: _bytes == null
? const CircularProgressIndicator()
: Image.memory(
Uint8List.fromList(_bytes!),
width: 250,
height: 250,
fit: BoxFit.contain,
)),
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/services.dart';
import 'dart:typed_data';
import 'package:flutter_rendering_image/splash_screen.dart';
void main() async {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: const Splash(),
);
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
Int8List? _bytes;
void _getBytes(imageUrl) async {
final ByteData data =
await NetworkAssetBundle(Uri.parse(imageUrl)).load(imageUrl);
setState(() {
_bytes = data.buffer.asInt8List();
print(_bytes);
});
}
@override
void initState() {
_getBytes(
'https://upwork-usw2-prod-assets-static.s3.us-west-2.amazonaws.com/org-logo/425220847461273600');
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'Flutter Rendering Image From Byte Buffer/Int8List',
style: TextStyle(fontSize: 16.5),
),
centerTitle: true,
automaticallyImplyLeading: false,
),
body: Center(
child: _bytes == null
? const CircularProgressIndicator()
: Image.memory(
Uint8List.fromList(_bytes!),
width: 250,
height: 250,
fit: BoxFit.contain,
)),
);
}
}
Conclusion:
In the article, I have explained the Rendering Image From Byte Buffer/Int8List basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Rendering Image From Byte Buffer/Int8List 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 Rendering Image From Byte Buffer/Int8List in your flutter projects. We will show you what the Introduction is. Make a demo program for working with rendering an image from Int8List 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.
From Our Parent Company Aeologic
Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.
Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.
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 that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
