No access to widget state from my custom widget in the ff editor?

Hey I'm new to both Flutter and Flutterflow and set out to develop an app to test it out. Now I know how to code in Python on a moderate level as my app api is build in FastAPI and I'm using lots of Python Packages for it.

I can't get a hang of why I can't access my widget state defined in a custom widget within the ff editor now?

My custom Widget (-Boilerplate):

class ImageFrameSelector extends StatefulWidget {
  const ImageFrameSelector({
    Key? key,
    this.width,
    this.height,
    this.imagePath,
  }) : super(key: key);

  final double? width;
  final double? height;
  final String? imagePath;

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

class _ImageFrameSelectorState extends State<ImageFrameSelector> {
  Offset _startPosition = Offset(0, 0);
  Rect _selectionRect = Rect.zero;
  double _paddingTop = 0;
  double _paddingBottom = 0;
  double _paddingLeft = 0;
  double _paddingRight = 0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanStart: (details) {
        RenderBox? renderBox = context.findRenderObject() as RenderBox?;
        if (renderBox != null) {
          _startPosition = renderBox.globalToLocal(details.globalPosition);
          setState(() {
            _selectionRect = Rect.fromPoints(_startPosition, _startPosition);
            calculatePadding();
          });
        }
      },
      onPanUpdate: (details) {
        RenderBox? renderBox = context.findRenderObject() as RenderBox?;
        if (renderBox != null) {
          final endPosition = renderBox.globalToLocal(details.globalPosition);
          setState(() {
            _selectionRect = Rect.fromPoints(_startPosition, endPosition);
            calculatePadding();
          });
        }
      },
      onPanEnd: (_) {
        // You can perform any final actions here if needed
      },
      child: Stack(
        children: [
          Container(
            width: widget.width ?? 300,
            height: widget.height ?? 300,
            child: Image.network(widget.imagePath ?? ''),
          ),
          CustomPaint(
            painter: SelectionPainter(
              selectionRect: _selectionRect,
            ),
          ),
        ],
      ),
    );
  }

  void calculatePadding() {
    _paddingTop = _selectionRect.top;
    _paddingBottom = widget.height! - _selectionRect.bottom;
    _paddingLeft = _selectionRect.left;
    _paddingRight = widget.width! - _selectionRect.right;
  }
}

class SelectionPainter extends CustomPainter {
  final Rect selectionRect;

  SelectionPainter({required this.selectionRect});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Color(0x7DE5F04A) // Use the desired color here
      ..style = PaintingStyle.fill;

    canvas.drawRect(selectionRect, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

// Create a GlobalKey to access the widget state
GlobalKey<_ImageFrameSelectorState> imageFrameSelectorKey =
    GlobalKey<_ImageFrameSelectorState>();
3
3 replies