0

My requirement is to render images without distortion(The image is not drawn continuously, for example in the mobile image in the character m there are several gaps, I need to render without any break). I will be receiving base64-encoded images from different platforms, such as web applications and mobile applications, and need to render these images in my mobile application. The images should have a minimum width and height of 58 and 14, respectively. When I render the base64 image obtained from the web app, there is no distortion. However, when I render the image using data received from the mobile application, the images get distorted. I have attached a sample where the web image is stored in the webData variable and the mobile image is stored in the mobData variable. I have rendered the image using Image.memory. Despite trying several widgets, I have not been able to achieve my expectation. To replicate the image distortion, render the images in the mobile application, then take a screenshot and zoom in. Attached are images for this case.

web image

mob image

But when I increase the size like 150*50 for mob data, the distortion is not available, so I suspect, am doing something wrong while rendering those images. The data can be found here

Simple code snippet can be found below

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

import 'package:syncfusion_flutter_signaturepad/signaturepad.dart';

void main() {
  runApp(const SignaturePadApp());
}

///Renders the SignaturePad widget.
class SignaturePadApp extends StatelessWidget {
  const SignaturePadApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'SfSignaturePad Demo',
      home: _MyHomePage(),
    );
  }
}

class _MyHomePage extends StatefulWidget {
  const _MyHomePage();

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<_MyHomePage> {
  final GlobalKey<SfSignaturePadState> signatureGlobalKey = GlobalKey();

  String value = 'web';
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
                width: 487,
                height: 158,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.grey)),
                child: Center(
                  child: Image.memory(
                    base64Decode(value == 'web' ? webData : mobData),
                    isAntiAlias: true,
                    height: 14,
                    width: 58,
                    filterQuality: FilterQuality.high,
                  ),
                )),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextButton(
                  child: Text('Render Web Image'),
                  onPressed: () {
                    setState(() {
                      value = 'web';
                    });
                  },
                ),
                TextButton(
                  child: Text('Render Mobile Image'),
                  onPressed: () {
                    setState(() {
                      value = 'mob';
                    });
                  },
                ),
              ],
            )
          ],
        ),
      )),
    );
  }
}

String webData = '';

String mobData =  '';
3
  • I don't get your problem: What exactly do you mean with "distortion"? That you see artifacts in the image? That the width and height are not scaled proportional? Commented Oct 24, 2024 at 19:03
  • The image is not drawn continuously, for example in the mobile image in the character m there are several gaps, I need to render without any break Commented Oct 25, 2024 at 1:52
  • so you are not transferring the final bitmaps but "drawing instructions"? Commented Oct 25, 2024 at 11:00

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.