How to add images to Excel worksheet programmatically in Flutter web platform?

Syncfusion Flutter XlsIO library is used to create and modify Excel documents. Using this library, you can add images like JPEG and PNG formats to an Excel worksheet using Flutter.

Steps to add images to Excel worksheet programmatically in Flutter Web platform.

Step 1: Create a new Flutter application project.

1. Open Visual Studio Code (After installing the Dart and Flutter extensions as stated in this setup editor page)
2. Click View -> Command Palette…

3. Type Flutter and choose Flutter: New Application Project.

4. Enter the project name and press the Enter button.
5. Now choose the location of the project.

Step 2: Add the following code in your pubspec.yaml file to install the syncfusion flutter xlsio package in your application. It will be automatically downloaded from the pub once you trigger the flutter pub get comment or Get packages option from the Visual Studio Code.

dependencies:
   syncfusion_flutter_xlsio: ^18.4.31-beta

Import the following package in your main.dart file.

import 'package:syncfusion_flutter_xlsio/xlsio.dart' ;

Step 3: Add the following code in the lib/main.dart file to create a simple button.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              child: const Text(
                'Generate Excel',
                style: TextStyle(color: Colors.white),
              ),
              color: Colors.blue,
              onPressed: _addFormulasToExcel,
            )
          ],
        ),
      ),
    );
  }

Step 4: Use the following code to load an image in the Flutter project.

1. Add the following code in your pubspec.yaml file.

   flutter:
     # To add assets to your application, add an assets section, like this:
     assets:
       - images/image.jpg
   

2. Import the following package in your main.dart file.

   import 'dart:convert';
   import 'package:flutter/services.dart';
   

3. Add the following code in lib/main.dart file to read an image.

   Future<List<int>> _readImageData(String name) async {
       final ByteData data = await rootBundle.load('images/$name');
       return data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);
     }
   

Step 5: Add the following code to the _addImageToExcel()  function to add Images to a Excel worksheet programmatically.

  Future<void> _addImageToExcel() async {
    //Create a Excel document.
    //Creating a workbook.
    final Workbook workbook = Workbook();
 
    //Accessing via index
    final Worksheet sheet = workbook.worksheets[0];
 
    final String image = base64.encode(await _readImageData('image.jpg'));
 
    // Add image to Excel worksheet.
    final Picture picture = sheet.pictures.addBase64(1, 1, image);
 
    // Re-size an image
    picture.height = 200;
    picture.width = 200;
 
    //Save and launch the excel.
    final List<int> bytes = workbook.saveAsStream();
 
    //Dispose the document.
    workbook.dispose();
 }

Step 6: Use the following code to download the generated Excel file in web platform.

1. Import the following packages in your main.dart file.

   import 'dart:convert';
   import 'dart:html';
   

2. Include the following code snippet in the _addImageToExcel() method to download the Excel document in the web application (any browser).

   //Download the output file
   AnchorElement(
       href:
           "data:application/octet-stream;charset=utf-16le;base64,${base64.encode(bytes)}")
     ..setAttribute("download", "ExcelImage.xlsx")
     ..click();
   

Step 7: To run the sample in web platform, follow the steps given in Building a web application with Flutter. Using the flutter run -d chrome command, launch the application in Chrome browser. This creates an Excel document with Image.

After the application launches, you will get the application preview and Excel document below.

Screenshot of the application.

Output Excel document created using XlsIO

You can download the complete work sample from add-image-to-excel.zip.

Take a moment to peruse the documentation for working with image, where you can find other options like inserting, re-sizing, flipping and rotating images in Excel. Also, find the features like charts, protect Excel documents, and more with code examples.