cloudsolutions-atoms/lib/views/widgets/e_signature/e_signature.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:signature/signature.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';

import '../loaders/image_loader.dart';

class ESignature extends StatefulWidget {
  final String oldSignature;
  final Uint8List newSignature;
  final Function(Uint8List) onSaved;
  final Function(Uint8List) onChange;
  final String title;
  const ESignature({Key key, this.title, this.oldSignature, this.onSaved, this.onChange, this.newSignature}) : super(key: key);

  @override
  State<ESignature> createState() => _ESignatureState();
}

class _ESignatureState extends State<ESignature> {
  // Initialise a controller. It will contains signature points, stroke width and pen color.
  final SignatureController _controller = SignatureController(
    penStrokeWidth: 2,
    penColor: Colors.black,
    exportBackgroundColor: Colors.white,
  );

  Uint8List signature;

  bool _editable = false;

  @override
  void initState() {
    if (widget.newSignature != null) {
      signature = widget.newSignature;
    }
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FormField<String>(onSaved: (_) async {
      widget.onSaved(signature);
    }, builder: (FormFieldState<String> state) {
      return Column(
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth, vertical: 8.toScreenHeight),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: _editable ? const BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)) : BorderRadius.circular(10),
              boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10)],
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    widget.title.tinyFont(context).paddingOnly(top: 8),
                    (!_editable
                            ? "edit".toSvgAsset(width: 48).paddingOnly(top: 8)
                            : Container(
                                width: 48.toScreenWidth,
                                height: 48.toScreenWidth,
                                decoration: BoxDecoration(borderRadius: BorderRadius.circular(100), border: Border.all(color: AppColor.neutral30)),
                                padding: const EdgeInsets.all(11),
                                margin: const EdgeInsets.only(top: 8),
                                child: "done".toSvgAsset(width: 26),
                              ))
                        .onPress(() async {
                      if (_editable) {
                        signature = await _controller.toPngBytes();
                        if (widget.onChange != null) {
                          widget.onChange(signature);
                        }
                      }
                      _editable = !_editable;
                      setState(() {});
                    }),
                  ],
                ),
                (widget.oldSignature != null || signature != null || !_editable)
                    ? Container(
                        height: 135.toScreenHeight,
                        width: MediaQuery.of(context).size.width,
                        padding: const EdgeInsets.only(bottom: 8),
                        child: signature != null ? Image.memory(signature) : ImageLoader(boxFit: BoxFit.contain, url: widget.oldSignature),
                      )
                    : AbsorbPointer(
                        absorbing: !_editable,
                        child: Signature(
                          controller: _controller,
                          height: 135.toScreenHeight,
                          width: MediaQuery.of(context).size.width - 64.toScreenWidth,
                          backgroundColor: Colors.transparent,
                        ),
                      ),
              ],
            ),
          ),
          if (_editable)
            Container(
              decoration: const BoxDecoration(
                color: AppColor.neutral30,
                borderRadius: BorderRadius.only(bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)),
              ),
              child: Row(
                children: [
                  "clear".toSvgAsset(width: 14).paddingOnly(start: 16).onPress(() {
                    _controller.clear();
                  }),
                  35.width,
                  "back".toSvgAsset(width: 17).onPress(() {
                    _controller.undo();
                  }),
                  27.width,
                  "redo".toSvgAsset(width: 17).onPress(() {
                    _controller.redo();
                  }),
                  // IconButton(
                  //     onPressed: () {
                  //       _unpaint = !_unpaint;
                  //       setState(() {});
                  //     },
                  //     icon: Icon(
                  //       _unpaint ? Icons.draw : Icons.ac_unit,
                  //       color: _unpaint ? AColors.orange : null,
                  //     )),
                  // const Spacer(),
                  // IconButton(
                  //     onPressed: () async {
                  //       signature = await _controller.toPngBytes();
                  //       if (widget.onChange != null) {
                  //         widget.onChange(signature);
                  //       }
                  //       setState(() {});
                  //     },
                  //     icon: const Icon(Icons.check)),
                ],
              ).paddingOnly(top: 12, bottom: 12),
            )
        ],
      );
    });
  }
}