Widgets & Design
SN
Stefan Neidig

Use state or functions outside of a custom widget

Hi,

I am building a custom widget for storing signatures without the need of a firestore. I have a hard time doing it. I found a widget that works somwhere here in the forum. However, this widget creates two buttons with the signature that drives their behaviour (reset and store). I want to only have the signature and control the behaviour from outside of the custom widget. Here is the code

// Automatic FlutterFlow imports
import '/backend/schema/structs/index.dart';
import '/actions/actions.dart' as action_blocks;
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'dart:convert';
import 'package:signature/signature.dart';

class SignatureWidget extends StatefulWidget {
  const SignatureWidget({
    Key? key,
    this.width,
    this.height,
    required this.test,
  }) : super(key: key);

  final double? width;
  final double? height;
  final Future<dynamic> Function() test;

  @override
  _SignatureWidgetState createState() => _SignatureWidgetState();
}

class _SignatureWidgetState extends State<SignatureWidget> {
  final SignatureController _signatureController = SignatureController(
      penStrokeWidth: 5,
      penColor: Colors.black,
      exportBackgroundColor: Colors.white);

  @override
  void initState() {
    super.initState();
    _signatureController.addListener(handleDrawEnd);
  }

  @override
  void dispose() {
    _signatureController.removeListener(handleDrawEnd);
    _signatureController.dispose();

    super.dispose();
  }

  handleDrawEnd() async {
    final Uint8List? signatureBytes = await _signatureController.toPngBytes();

    if (signatureBytes != null) {
      String base64Signature = base64Encode(signatureBytes);
      FFAppState().tempSignatureBase64 = base64Signature;
    }
  }

  resetSignature() {
    // I want to call this from outside of the custom widget (i.e. a button call)
  }

  // I want to access this state outside of the custom widget somehow
  String signatureBase64 = "";

  
  getSignatureAsBase64() {
    // I want to call this from outside of the custom widget (i.e. a button call)
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        height: 300,
        width: widget.width ?? double.infinity,
        child: Signature(controller: _signatureController));
  }
}

I added two methods:

resetSignature and getSignatureAsBase64. How can I access them outside of this custom widget (i.e. in an action, custom action or in the flutterflow editor). Thanks for any help

4 replies