Sample Code for Using Signature Pad Doesn't Compile
I've been following the tutorial "
- The getter 'buffer' isn't defined for the type 'Future<ByteData?>'.
- The getter 'offsetInBytes' isn't defined for the type 'Future<ByteData?>'.
- The getter 'lengthInBytes' isn't defined for the type 'Future<ByteData?>'.
I'm still a noob at Flutter, and I know what the error is, but I can't figure out what to do to clear the error. Help please.
Your help is highly appreciated
Hi R,
We have prepared a sample using the SfSignaturePad with two buttons. One button is used to display the drawn path as an image in a new page using the toImage method of the SfSignaturePadState. The other button is used to clear the drawn path using the clear method of the SfSignaturePadState. We would like to inform you that the mentioned type error will occur when we try to access properties from a class in which the specified properties or getters were not defined or do not exist. In this case, since the mentioned getters are the properties of the ByteData class, which extends from the TypedData class, we recommend you access those properties using the ByteData? class instead of Future<ByteData?> to avoid the mentioned error, as shown in the code snippet below.
|
import 'dart:ui' as ui; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_signaturepad/signaturepad.dart';
void main() { return runApp(const SignaturePadApp()); }
class SignaturePadApp extends StatelessWidget { const SignaturePadApp({super.key});
@override Widget build(BuildContext context) { return const MaterialApp( debugShowCheckedModeBanner: false, title: 'SfSignaturePad Demo', home: _MyHomePage(), ); } }
class _MyHomePage extends StatefulWidget { const _MyHomePage({Key? key}) : super(key: key);
@override _MyHomePageState createState() => _MyHomePageState(); }
class _MyHomePageState extends State<_MyHomePage> { final GlobalKey<SfSignaturePadState> _signatureGlobalKey = GlobalKey();
// To clear the drawn path. void _handleClearButtonPressed() { _signatureGlobalKey.currentState!.clear(); }
// To save the drawn path as image and to display it in another page. void _handleSaveButtonPressed() async { final ui.Image image = await _signatureGlobalKey.currentState!.toImage(pixelRatio: 2.0); final ByteData? bytes = await image.toByteData(format: ui.ImageByteFormat.png); final Uint8List imageBytes = bytes!.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);
// You can access the below properties using the ByteData class. // bytes.buffer; // bytes.lengthInBytes; // bytes.offsetInBytes;
// ignore: use_build_context_synchronously await Navigator.of(context).push( MaterialPageRoute( builder: (BuildContext context) { return Scaffold( appBar: AppBar(), body: Center( child: Container( color: Colors.grey[300], child: Image.memory(imageBytes), ), ), ); }, ), ); }
@override Widget build(BuildContext context) { return Scaffold( body: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.all(10), child: Container( height: 300, width: 300, decoration: BoxDecoration( border: Border.all( color: Colors.grey, ), ), child: SfSignaturePad( key: _signatureGlobalKey, backgroundColor: Colors.white, strokeColor: Colors.black, minimumStrokeWidth: 1.0, maximumStrokeWidth: 4.0, ), ), ), const SizedBox(height: 10), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ TextButton( onPressed: _handleSaveButtonPressed, child: const Text('Display Image'), ), TextButton( onPressed: _handleClearButtonPressed, child: const Text('Clear'), ), ], ), ], ), ); } } |
Shared the User Guide Documentation link below regarding how to save signatures for your reference.
Also, attached the recording below for your reference and you can modify the shared code snippet according to your needs. If you have further queries, please get back to us.
Regards,
Hari Hara Sudhan. K.
Attachment: _185105_5e247271.zip
Thank you, Hariharasudhan.
Will try it out.
Thank you very much!
It's running fine now, but I haven't studied the code yet. :D
Hi R,
Most Welcome. Kindly check the code and get back to us if you have further queries. We are always happy to assist you.
Regards,
Preethika Selvam.
