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.
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 = '';

