Guide to transforming an IdentityMap<String, dynamic> into a UInt8List

Question

Guide to transforming an IdentityMap<String, dynamic> into a UInt8List

I have a cloud function that generates a JavaScript Buffer object, which looks something like this:

functions
        .region("europe-west2")
        .runWith({ timeoutSeconds: 20, memory: "128MB", })
        .https
        .onCall(async (data, context) => {
           const buffer = await sharp(imagePath).toBuffer();
           return buffer;
        });

In my code repository, I interact with this cloud function in the following way:

  Future<Uint8List> resizeImage({required String fileName}) async {
    try {
      final result = await firebaseFunctions
          .httpsCallable('resizeImage')
          .call<dynamic>({'fileName': fileName});

      //printing result.data returns an IdentityMap<String, dynamic>.
    } on FirebaseFunctionsException catch (e) {
      //handle error
    }
  }

Whenever I print result.data.runtimeType, it shows as a map object with values like this :

{12: 239, 2938: 293}

How can I convert this map into a UInt8List?

typescript flutter dart

Answer 1

Answer №1

After some investigation, I realized that I needed to extract the values from the IdentityMap and convert them into a List.

The data returned wasn't {12: 239, 2938: 293}, but rather {0: 239, 1: 293, 2:382}, indicating it was index-based. To resolve this issue, I did the following:

      final bytes = List<int>.from(result.data.values);
      return Uint8List.fromList(bytes);

Answer 2

After some investigation, I realized that I needed to extract the values from the IdentityMap and convert them into a List.

The data returned wasn't {12: 239, 2938: 293}, but rather {0: 239, 1: 293, 2:382}, indicating it was index-based. To resolve this issue, I did the following:

      final bytes = List<int>.from(result.data.values);
      return Uint8List.fromList(bytes);

Answer 3

Answer №2

It is important to note that the order of values in a map is not guaranteed. Your approach may yield results depending on the implementation, but the following code does not rely on the assumption that the map's values will be iterated in the correct order:

Uint8List bytes = Uint8List(result.data.length);
for (var key in result.data.keys) {
  bytes[int.parse(key)] = result.data[key];
}

If the keys are not strings, there is no need to parse them into integers unless necessary, as was the case with mine.

Furthermore, it is worth mentioning that returning the buffer may work, but a more optimal solution would be to return base64 encoded bytes. This encoding leads to fewer bytes being transmitted over the network connection.

In the cloud function:

return buffer.toString('base64');

In the application:

Uint8List bytes = base64.decode(result.data);

Answer 4

It is important to note that the order of values in a map is not guaranteed. Your approach may yield results depending on the implementation, but the following code does not rely on the assumption that the map's values will be iterated in the correct order:

Uint8List bytes = Uint8List(result.data.length);
for (var key in result.data.keys) {
  bytes[int.parse(key)] = result.data[key];
}

If the keys are not strings, there is no need to parse them into integers unless necessary, as was the case with mine.

Furthermore, it is worth mentioning that returning the buffer may work, but a more optimal solution would be to return base64 encoded bytes. This encoding leads to fewer bytes being transmitted over the network connection.

In the cloud function:

return buffer.toString('base64');

In the application:

Uint8List bytes = base64.decode(result.data);

Guide to transforming an IdentityMap<String, dynamic> into a UInt8List

Answer №1

Answer №2

Similar questions

Ways to resolve the issue of incompatible parameters 'action' types in JavaScript

Exploring the world of mocking tests using Jest and inputs

The issue of "ReferenceError: Cannot access '<Entity>' before initialization" occurs when using a OneToMany relationship with TypeORM

Issue with OpenAI's Rate Limit 429 Restriction

I'm currently utilizing CSS GRID to create a map layout, but I'm encountering an issue where the layout is not filling the entire screen. I'm wondering how I can achieve this in Angular

How to implement and utilize a history-object interface in React with Typescript?

Rxjs error: The 'pipe' property is not found on the 'UnaryFunction<Observable<{}>, Observable<string | {}>>' type

Angular - Leveraging Jest and NgMocks to Mock Wrapper Components

Error: setPosition function only accepts values of type LatLng or LatLngLiteral. The property 'lat' must be a numerical value in agm-core agm-overlay

Did not adhere to regulations

Utilizing custom hooks for passing props in React Typescript

The 'target' property is not found on the type 'KeyboardEventHandler<HTMLInputElement>'

Tips for resolving the issue of 'defineExpose' method being undefined in Vue3

Is it possible to dynamically pass a component to a generic component in React?

Convert potentially undefined boolean into a boolean by utilizing "!!"

Nextjs 14 experiences full page loading due to the presence of multiple root layouts

What is the process for defining a global variable within a module in Typescript?

What is the best way to refresh or reload a child component in Angular?

Mastering Angular 2 Reactive Forms: Efficiently Binding Entire Objects in a Single Stroke

Utilizing TypeScript Generics for Creating Arrays of Objects with Inherited Type Definitions