kmpdfkit_demo/lib/widgets/function/attrwidget/signature/attr_signature_edit_widget.dart

import 'package:flutter/material.dart';
import 'package:kmpdfkit_demo/widgets/function/attrwidget/attr_color_list_widget.dart';
import 'package:kmpdfkit_demo/widgets/function/attrwidget/base_slider_widget.dart';
import 'package:kmpdfkit_demo/widgets/util/signature_image_util.dart';
import 'package:syncfusion_flutter_signaturepad/signaturepad.dart';

class AttrSignatureEditWidget extends StatefulWidget {
  const AttrSignatureEditWidget({Key? key}) : super(key: key);

  @override
  State<AttrSignatureEditWidget> createState() =>
      _AttrSignatureEditWidgetState();
}

class _AttrSignatureEditWidgetState extends State<AttrSignatureEditWidget> {
  final GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();
  double strokeWidth = 5;
  Color strokeColor = Colors.red;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Create signature'),
        actions: [
          TextButton(
              onPressed: () async {
                String? path =
                await SignatureImageUtil.saveByteDataImage(await _signaturePadKey.currentState?.toImage());
                Navigator.pop(context, path);
              },
              child: const Text(
                'Done',
                style: TextStyle(color: Colors.white),
              ))
        ],
      ),
      body: Column(
        children: [
          ColorListWidget(
              color: strokeColor,
              colorOptionsCallback: (color) {
                setState(() {
                  strokeColor = color;
                });
              }),
          BaseSliderWidget(
              sliderCurrentValue: strokeWidth,
              sliderMinValue: 1,
              sliderMaxValue: 50,
              icon: Icons.line_weight,
              valueText: '${strokeWidth.round()}',
              valueShowType: ValueShowType.sourceValue,
              sliderValueCallback: (lineWidth) {
                setState(() {
                  strokeWidth = lineWidth;
                });
              }),
          Expanded(
            child: Stack(
              children: [
                Positioned(
                    child: SfSignaturePad(
                  key: _signaturePadKey,
                  minimumStrokeWidth: strokeWidth,
                  maximumStrokeWidth: strokeWidth,
                  backgroundColor: Colors.transparent,
                  strokeColor: strokeColor,
                )),
                Positioned(
                    bottom: 10,
                    right: 20,
                    child: IconButton(
                        onPressed: () {
                          _signaturePadKey.currentState?.clear();
                        },
                        icon: const Icon(Icons.delete)))
              ],
            ),
          )
        ],
      ),
    );
  }
}