Custom widget compiler throws "Unknown error compiling custom code. A common cause is a custom widget or action whose name in the code does not match the name provided in the editor."

[AnirudhGoel]

Can we access your project?

• [X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

I'm trying to build a custom widget for thermal printing of order receipts for my food delivery app. I'm using this flutter package - https://pub.dev/packages/flutter_thermal_printer/.

This is the code that I've written-

// 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:flutter/services.dart';
import 'package:flutter_thermal_printer/flutter_thermal_printer.dart';
import 'package:flutter_thermal_printer/utils/printer.dart';

class OrderReceiptPrint extends StatefulWidget {
  const OrderReceiptPrint({
    super.key,
    this.width,
    this.height,
    required this.order,
    required this.restaurant,
    required this.user,
  });

  final double? width;
  final double? height;
  final OrdersRecord order;
  final RestaurantsRecord restaurant;
  final UsersRecord user;

  @override
  State<OrderReceiptPrint> createState() => _OrderReceiptPrintState();
}

class _OrderReceiptPrintState extends State<OrderReceiptPrint> {
  final _flutterThermalPrinterPlugin = FlutterThermalPrinter.instance;

  List<Printer> printers = [];

  StreamSubscription<List<Printer>>? _devicesStreamSubscription;

  // Get Printer List
  void startScan() async {
    _devicesStreamSubscription?.cancel();
    await _flutterThermalPrinterPlugin.getPrinters(connectionTypes: [
      ConnectionType.USB,
    ]);
    _devicesStreamSubscription = _flutterThermalPrinterPlugin.devicesStream
        .listen((List<Printer> event) {
      print(event.map((e) => e.name).toList().toString());
      setState(() {
        printers = event;
        printers
            .removeWhere((element) => element.name == null || element.name == ''
                //  ||
                // !element.name!.toLowerCase().contains('print')
                );
      });
    });
  }

  stopScan() {
    _devicesStreamSubscription?.cancel();
    _flutterThermalPrinterPlugin.stopScan();
  }

  void getUsbDevices() async {
    await _flutterThermalPrinterPlugin.getUsbDevices();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
          systemOverlayStyle: const SystemUiOverlayStyle(
            statusBarColor: Colors.transparent,
          ),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // startScan();
                startScan();
              },
              child: const Text('Get Printers'),
            ),
            ElevatedButton(
              onPressed: () {
                // startScan();
                stopScan();
              },
              child: const Text('Stop Scan'),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: printers.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    onTap: () async {
                      if (printers[index].isConnected ?? false) {
                        await _flutterThermalPrinterPlugin
                            .disconnect(printers[index]);
                      } else {
                        final isConnected = await _flutterThermalPrinterPlugin
                            .connect(printers[index]);
                        print("Devices: $isConnected");
                      }
                    },
                    title: Text(printers[index].name ?? 'No Name'),
                    subtitle: Text("Connected: ${printers[index].isConnected}"),
                    trailing: IconButton(
                      icon: const Icon(Icons.connect_without_contact),
                      onPressed: () async {
                        final profile = await CapabilityProfile.load();
                        final generator = Generator(PaperSize.mm80, profile);
                        List<int> bytes = [];
                        bytes += generator.text(
                          "Sunil Kumar",
                          styles: const PosStyles(
                            bold: true,
                            height: PosTextSize.size3,
                            width: PosTextSize.size3,
                          ),
                        );
                        bytes += generator.cut();
                        await _flutterThermalPrinterPlugin.printData(
                          printers[index],
                          bytes,
                          longData: true,
                        );
                      },
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

The flutterflow compiler doesn't throw any specific errors but just says "Unknown error compiling custom code. A common cause is a custom widget or action whose name in the code does not match the name provided in the editor."

I've already checked that the name of the widget and the one provided in the editor do match-

I've also added the above mentioned package as a dependency (and all of its dependencies too).

I tried reproducing the error in a new project, but instead of the getting the same error there, the compiler just keeps on loading in the new project.

Expected Behavior

The widget should've compiled or I should received a specific error.

Steps to Reproduce

1. Create a new custom widget using the above mentioned code.
2. Add the package "flutter_thermal_printer: ^0.0.17" as a dependency.
3. Try to compile it.

Reproducible from Blank

• [X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

IT8glc/qx4V2rscA+KXydcAxnjgRKUAna7ssluxuZwEdCO/yPbd2duOlQFNocO6Ba1BAP2GgmmMxw63Tv9ieVO1cE0urRoBy+ZVXdwzJWlORR82sOrm/e0FCFphTJhWHyMGRoQlNOfNzWXtn31OYBN6XQgrYGJzRC3oZQ86XIqz5+nilHADRFDsw5wwDHmreTI5ODEz25eKMrop5yfj/0w==

Visual documentation

In my existing project -

In a new blank project -

Environment

- FlutterFlow version: 3.24.2
- Platform: Web
- Browser name and version: Chrome (130.0.6723.117)
- Operating system and version affected: NA

Additional Information

The issue is affecting my company in real-time. A few restaurants are waiting to be onboarded on my platform just due to this order printing functionality. So, if you can have a look at this at priority, that'd be great.

[AnirudhGoel]

I just tried to run the code of a blank project with just this widget locally (downloaded from FF). It worked fine! So, that makes me believe this is more of a FF problem than a Flutter problem?

[AnirudhGoel]

I was trying to figure out what step of my custom code might be messing things up but it fails to work even with just the import statements (removed everything else and just added the import statements to the boilerplate code). This seems quite strange.

[Alezanello]

Hello,

I copied and pasted the custom widget code and modified it to only receive the width and height parameters by removing the data types, aiming to test its behavior. However, I encountered two issues