Body Map Widget

I have Developed a custom widget so that users can draw on an image, which is working.

I am trying to find a way so that once the user has finished drawing they can use the action 'upload media to supabase' (preferably using the button shown in image). If anyone has any ideas on how to achieve this, would be greatly appreciated ๐Ÿ˜„

Here is the current code:

// Automatic FlutterFlow imports
import '/backend/supabase/supabase.dart';
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!

//Automatic Flutterflow Imports

import 'dart:io'; // Import for file operations
import 'package:image_painter/image_painter.dart'; // Import for image painting functionality

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

  final double? width;
  final double? height;

  @override
  State<Imagepainter> createState() => _ImagepainterState();
}

class _ImagepainterState extends State<Imagepainter> {
  final _imageKey =
      GlobalKey<ImagePainterState>(); // GlobalKey for ImagePainterState

  // Function to save the painted image

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Body Map"), // App bar title
      ),
      body: Stack(
        children: [
          Image.network(
            "https://bodyimagefromsupbase.jpg", // Network image as a background
            fit: BoxFit.cover,
            width: double.infinity,
            height: double.infinity,
          ),
          ImagePainter.network(
            "https://bodyimagefromsupbase.jpg", // Network image for painting
            key: _imageKey,
            scalable: true,
            initialStrokeWidth: 2,
            textDelegate: TextDelegate(), // Text delegate for painting text
            initialColor: Colors.red, // Initial color for painting
            initialPaintMode:
                PaintMode.circle, // Initial paint mode (circle in this case)
          ),
        ],
      ),
    );
  }
}
2
5 replies