1. Feedback
  2. Flutter
  3. 45723

Welcome to the Flutter feedback portal. We’re happy you’re here! If you have feedback on how to improve the Flutter, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

SfPdfViewer PdfSignatureFormFieldHelper should maintain aspect ratio of the signature field in the PDF

Currently a signature field is limited to what looks to be a 172x306 width x height box. This signature dialog should maintain the aspect ratio of the signature field in the pdf.


before:
Empty
after:
Empty

I have created a code snippet in the _showSignaturePadDialog() method of the syncfusion_flutter_pdfviewer/lib/src/form_field/pdf_signature.dart file.

/// Dialog view for signature pad
void _showSignaturePadDialog(
    BuildContext context, PdfSignatureFormFieldHelper signatureFieldHelper) {
  _addColors();
  _isSignatureDrawn = false;
  showDialog(
    barrierDismissible: false,
    context: context,
    builder: (BuildContext context) {
      var bounds = signatureFieldHelper.pdfField.bounds;
      var ratio = bounds.width / bounds.height;
      return StatefulBuilder(
        builder:
            (BuildContext context, void Function(void Function()) setState) {
          return AlertDialog(
            insetPadding: const EdgeInsets.all(12.0),
            title: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text('Draw your signature',
                    style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w500,
                        fontFamily: 'Roboto-Medium')),
                InkWell(
                  //ignore: sdk_version_set_literal
                  onTap: () {
                    Navigator.of(context).pop();
                    if (signatureFieldHelper.onFocusChange != null) {
                      signatureFieldHelper.onFocusChange!(
                          PdfFormFieldFocusChangeDetails(
                              signatureFieldHelper.signatureFormField, false));
                    }
                  },
                  child: const Icon(Icons.clear, size: 24.0),
                )
              ],
            ),
            titlePadding: const EdgeInsets.all(16.0),
            content: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  //  ******* Added this aspect ratio ********
                  AspectRatio(
                    aspectRatio: ratio,
                    // ******* Constrained box to maintain ratio when very wide
                    child: ConstrainedBox(
                      constraints:
                          BoxConstraints(minHeight: 125, maxHeight: 172),
                      child: Container(
                        height: 172,
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.grey[350]!),
                        ),
                        child: SfSignaturePad(
                          strokeColor: _strokeColor,
                          key: _signaturePadKey,
                          onDrawEnd: () {
                            if (!_isSignatureDrawn) {
                              setState(() => _isSignatureDrawn = true);
                            }
                          },
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(height: 24),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Text(
                        'Pen Color',
                        style: TextStyle(
                            fontWeight: FontWeight.w400,
                            fontFamily: 'Roboto-Regular'),
                      ),
                      SizedBox(
                        width: 124,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: _addStrokeColorPalettes(setState),
                        ),
                      )
                    ],
                  ),
                ],
              ),
            ),
            contentPadding: const EdgeInsets.symmetric(horizontal: 12.0),
            actionsPadding: const EdgeInsets.all(8.0),
            buttonPadding: EdgeInsets.zero,
            actions: [
              TextButton(
                onPressed: !_isSignatureDrawn
                    ? null
                    : () {
                        _handleSignatureClearButtonPressed();
                        setState(() {
                          _isSignatureDrawn = false;
                        });
                      },
                child: const Text(
                  'CLEAR',
                  style: TextStyle(
                      fontWeight: FontWeight.w500, fontFamily: 'Roboto-Medium'),
                ),
              ),
              const SizedBox(width: 8.0),
              TextButton(
                onPressed: !_isSignatureDrawn
                    ? null
                    : () {
                        _handleSignatureSaveButtonPressed(signatureFieldHelper);
                        Navigator.of(context).pop();
                        if (signatureFieldHelper.onFocusChange != null) {
                          signatureFieldHelper.onFocusChange!(
                              PdfFormFieldFocusChangeDetails(
                                  signatureFieldHelper.signatureFormField,
                                  false));
                        }
                      },
                child: const Text('SAVE',
                    style: TextStyle(
                        fontWeight: FontWeight.w500,
                        fontFamily: 'Roboto-Medium')),
              )
            ],
          );
        },
      );
    },
  );
}