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

Code Implement

Code File

Conclusion

GitHub Link

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.

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

Hi everyone, In this article, you will learn how to implement the ML-Kit text recognition in your app.

What is ML-Kit?

Implementation

Step 1: Add Firebase to Flutter

Add Firebase to your Flutter app | Firebase
Follow this guide to add Firebase products to a Flutter app. Firebase supports frameworks like Flutter on a best-effort…firebase.google.com

Step 2: Add the dependencies

Add dependencies to pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter

  firebase_ml_vision: "<newest version>"
  camera: "<newest version>"

firebase_ml_vision uses the ML Kit Vision for Firebase API for flutter that is built by the Flutter team.
We also need the camera plugin to scan the text.

Step 3: Initialize the camera

CameraController _camera;

@override
void initState() {
  super.initState();
  _initializeCamera();
}

void _initializeCamera() async {
  final CameraDescription description =
   await ScannerUtils.getCamera(_direction);

  _camera = CameraController(
    description,
    ResolutionPreset.high,
  );

  await _camera.initialize();

  _camera.startImageStream((CameraImage image) {

    // Here we will scan the text from the image 
    // which we are getting from the camera.

  });
}

We will be using a prewritten class by Flutter Team in their Demo which has some utility method to scan and detect the image from Firebase Ml-kit.

https://gist.github.com/ashishrawat2911/07c53c9a8eb16d36889ff8382dedbfae#file-scanner_utils-dart

Step 4: Scan the image

When we get the Image from the camera and scan it will we get the VisionText .

VisionText _textScanResults; 

TextRecognizer _textRecognizer = FirebaseVision.instance.textRecognizer();

https://gist.github.com/ashishrawat2911/b721a8e2312644767ac64be92e2f0796#file-camera_scan-dart

Step 5: Get the result

Now _textScanResults will have the result.

If you see VisionText , we can get the whole text, block, lines, and words also.

They are dependent on our choices that what type of result we want.

To get the

Text block :

List<TextBlock> blocks = _textScanResults.blocks;

Text Lines:

List<TextLine> lines = block .lines;

Text words :

List<TextElement> words = line.elements;

Step 6: Build the UI

To show the image result we just need to have the CameraPreview and pass the CameraController object.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      fit: StackFit.expand,
      children: <Widget>[

      _camera == null
            ? Container(
          color: Colors.black,
        )
            : Container(
            height: MediaQuery
                .of(context)
                .size
                .height - 150,
            child: CameraPreview(_camera)),
      ],
    ),
  );
}

Show scanned text outlines

To show the outline we can draw them by using CustomPainter because of the VisionText parameters provide the TextContainer and we can find the coordinates and draw on it.

https://gist.github.com/ashishrawat2911/03e14dd6ec2252384ddccab70862781b#file-text_detector_painter-dart

Widget _buildResults(VisionText scanResults) {
  CustomPainter painter;
  // print(scanResults);
  if (scanResults != null) {
    final Size imageSize = Size(
      _camera.value.previewSize.height - 100,
      _camera.value.previewSize.width,
    );
    painter = TextDetectorPainter(imageSize, scanResults);
    getWords(scanResults);

    return CustomPaint(
      painter: painter,
    );
  } else {
    return Container();
  }
}

https://gist.github.com/ashishrawat2911/167a980ce78726bf428eede41ab381d0#file-outline-dart

Now if we see the app.

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.

Connect with me on Linkedin and Github

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! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.

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.

Related: Flutter Text To Speech

Related: Flutter Speech Recognition

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.