Why can't we use FlutterFlow widgets in a custom widget?

Custom Code

I'm attempting to simply return an FFButtonWidget from a custom widget. No matter what I do the compiler can never find the FFButtonWidget. I've tried every variation of an import statement I can think of for the flutter_flow_widgets.dart file. I have also used the same import statements seen when you view the code for a page. Nothing works. See screen shot for compile errors.

Here is my last attempt:

// Automatic FlutterFlow imports
import '/backend/schema/structs/index.dart';
import '/backend/schema/enums/enums.dart';
import 'package:ff_theme/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
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 '/flutter_flow/flutter_flow_widgets.dart';

class FFWidgetTest extends StatefulWidget {
  const FFWidgetTest({
    super.key,
    this.width = 350,
    this.height = 56,
  });

  final double? width;
  final double? height;

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

class _FFWidgetTest extends State<FFWidgetTest> {
  @override
  Widget build(BuildContext context) {
    return FFButtonWidget(
      onPressed: () {
        print('Button pressed ...');
      },
      text: 'Press me!',
      options: FFButtonOptions(
        width: widget.width,
        height: widget.height,
        padding: EdgeInsetsDirectional.fromSTEB(16, 0, 16, 0),
        iconPadding: EdgeInsetsDirectional.fromSTEB(0, 0, 0, 0),
        color: FlutterFlowTheme.of(context).primary,
        textStyle: FlutterFlowTheme.of(context).titleSmall.override(
              font: GoogleFonts.poppins(
                fontWeight: FlutterFlowTheme.of(context).titleSmall.fontWeight,
                fontStyle: FlutterFlowTheme.of(context).titleSmall.fontStyle,
              ),
              color: Colors.white,
              letterSpacing: 0.0,
              fontWeight: FlutterFlowTheme.of(context).titleSmall.fontWeight,
              fontStyle: FlutterFlowTheme.of(context).titleSmall.fontStyle,
            ),
        elevation: 0,
        borderRadius: BorderRadius.circular(8),
      ),
    );
  }
}

// Set your widget name, define your parameter, and then add the
// boilerplate code using the green button on the right!

The reason I'm doing this is I would like to frame a widget from pub.dev using FlutterFlow widgets. Ironically, I can get the pub.dev widget to work on it's own but it fails when I incorporate FlutterFlow native widgets.

What have you tried so far?
  1. Open the code in Visual Studio and verified the file exists at the path I specified.

  2. Tried various import statements that are relative, absolute, and I've attempted to use package paths.

  3. Simplified the custom widget down to a single FFButtonWidget.

  4. Passed this through ChatGPT and GROK without any luck.

Did you check FlutterFlow's Documentation for this topic?
No
3
2 replies