Help with getting ProImageEditor working in FlutterFlow

[BobRupholdt]

I'll start with a disclaimer: I barely know what I'm doing and that might an overstatement...

I'm attempting to add a custom component in FlutterFlow but I get this error:

The method 'network' isn't defined for the type 'ProImageEditor'

Since this is used throughout the examples, I have to assume there is something I should know that I simply don't.
There is no mention of FlutterFlow here in the discussions.

Can anyone point me somewhere that might help?

[hm21]

It is difficult to identify the exact problem without reviewing the code for your custom widget. It would be helpful if you could share the code for your custom widget so that we can examine it further.

Based on the description, it seems possible that the issue is related to an incorrect installation of the ProImageEditor, resulting in that issue. Alternatively, it could be due to a wrong import.

[BobRupholdt]

Installing in FlutterFlow is as simple as adding a dependency

I copied and pasted code from the examples. Everything tells me the same "The method 'network' isn't defined for the type 'ProImageEditor'" error.

Here is the current code which the compiler thinks is OK but that doesn't mean its right.

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/backend/schema/enums/enums.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!

import 'package:pro_image_editor/pro_image_editor.dart';

class ProImageEditor extends StatefulWidget {
  const ProImageEditor({
    super.key,
    this.width,
    this.height,
  });

  final double? width;
  final double? height;

  @override
  State<ProImageEditor> createState() => _ProImageEditorState();
}

class _ProImageEditorState extends State<ProImageEditor> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: ProImageEditor.network(
      'https://picsum.photos/id/237/2000',
      callbacks: ProImageEditorCallbacks(
        onImageEditingComplete: (Uint8List bytes) async {
          /*
            Your code to handle the edited image. Upload it to your server as an example.
            You can choose to use await, so that the loading-dialog remains visible until your code is ready, or no async, so that the loading-dialog closes immediately.
            By default, the bytes are in `jpg` format.
            */
          Navigator.pop(context);
        },
      ),
    ),
  );
}

[hm21]

Thank you for sharing your code. The issue arises because you have created a widget with the same name as ProImageEditor. This is why you encounter the issue “The method 'network' isn't defined”. To resolve this, you can simply rename your custom widget as shown below:

// Automatic FlutterFlow imports

import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/backend/schema/enums/enums.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!

import 'package:pro_image_editor/pro_image_editor.dart';
import 'dart:typed_data';

/// Rename below
class ImageEditor extends StatefulWidget {
  const ImageEditor({
    super.key,
    this.width,
    this.height,
  });

  final double? width;
  final double? height;

  @override
  State<ImageEditor> createState() => _ImageEditorState();
}

/// Rename below
class _ImageEditorState extends State<ImageEditor> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ProImageEditor.network(
        'https://picsum.photos/id/237/2000',
        callbacks: ProImageEditorCallbacks(
          onImageEditingComplete: (Uint8List bytes) async {
            /*
            Your code to handle the edited image. Upload it to your server as an example.
            You can choose to use await, so that the loading-dialog remains visible until your code is ready, or no async, so that the loading-dialog closes immediately.
            By default, the bytes are in `jpg` format.
            */
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

[BobRupholdt]

Thank you! I'd thought of that and tried renaming it but when I did, I'd also renamed the line that needed to stay ProImageEditor. It's finally working so now I can see if I can stumble my way through getting it working. I know you know but this is an awesome widget!