Custom widget fails to preview and gets error in test mode. And running well with compiled app.

[RRoundTable]

Has your issue been reported?

• I have searched the existing issues and confirm it has not been reported.
• 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

custom widget fails to preview.

test mode fails

Expected Behavior

I want to preview a custom widget.

Steps to Reproduce

custom widget source code

// Automatic FlutterFlow imports
import '/backend/schema/structs/index.dart';
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 '/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:google_maps_flutter/google_maps_flutter.dart'
    as google_maps_flutter;
import '/flutter_flow/lat_lng.dart' as latlng;
import 'dart:async';
export 'dart:async' show Completer;
export 'package:google_maps_flutter/google_maps_flutter.dart' hide LatLng;
export '/flutter_flow/lat_lng.dart' show LatLng;

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

class MapSample extends StatefulWidget {
  const MapSample({
    Key? key,
    this.markerTapAction,
    this.width,
    this.height,
    this.mapData,
    this.allowZoom,
    this.showZoomControls,
    this.showLocation,
    this.showCompass,
    this.showMapToolbar,
    this.showTraffic,
    this.centerLatLng,
  }) : super(key: key);

  final double? width;
  final double? height;
  final List<GoogleMapDataStruct>? mapData;
  final bool? allowZoom;
  final bool? showZoomControls;
  final bool? showLocation;
  final bool? showCompass;
  final bool? showMapToolbar;
  final bool? showTraffic;
  final LatLng? centerLatLng;
  final Future<dynamic> Function()? markerTapAction;

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

class _MapSampleState extends State<MapSample> {
  Completer<google_maps_flutter.GoogleMapController> _controller = Completer();
  Map<String, google_maps_flutter.BitmapDescriptor> _customIcons = {};
  Set<google_maps_flutter.Marker> _markers = {};

  google_maps_flutter.LatLng _center =
      google_maps_flutter.LatLng(36.088110, -115.176468);

  @override
  void initState() {
    super.initState();

    _center = google_maps_flutter.LatLng(
        widget.centerLatLng?.latitude ?? 0.0, // Default value if null
        widget.centerLatLng?.longitude ?? 0.0 // Default value if null
        );

    _loadMarkerIcons();
  }

  Future<void> _loadMarkerIcons() async {
    Set<String> uniqueIconPaths =
        widget.mapData?.map((data) => data.iconPath).toSet() ??
            {}; // Extract unique icon paths

    for (String path in uniqueIconPaths) {
      if (path.isNotEmpty) {
        google_maps_flutter.BitmapDescriptor descriptor =
            await google_maps_flutter.BitmapDescriptor.fromAssetImage(
          ImageConfiguration(devicePixelRatio: 2.5),
          "assets/images/${path}",
        );
        _customIcons[path] = descriptor;
      }
    }

    _updateMarkers(); // Update markers once icons are loaded
  }

  void _updateMarkers() {
    setState(() {
      _markers = _createMarkers();
    });
  }

  void _onMapCreated(google_maps_flutter.GoogleMapController controller) {
    _controller.complete(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: google_maps_flutter.GoogleMap(
        onMapCreated: _onMapCreated,
        zoomGesturesEnabled: widget.allowZoom ?? true,
        zoomControlsEnabled: widget.showZoomControls ?? true,
        myLocationEnabled: widget.showLocation ?? true,
        compassEnabled: widget.showCompass ?? false,
        mapToolbarEnabled: widget.showMapToolbar ?? false,
        trafficEnabled: widget.showTraffic ?? false,
        initialCameraPosition: google_maps_flutter.CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
        markers: _markers,
      ),
    );
  }

  void onMarkerTap() {
    if (widget.markerTapAction != null) {
      widget.markerTapAction!();
    }
  }

  Set<google_maps_flutter.Marker> _createMarkers() {
    var tmp = <google_maps_flutter.Marker>{};

    // Assuming widget.mapData is a list of objects that contain a 'latLng' property of type latlng.LatLng
    widget.mapData?.forEach((mapData) {
      if (mapData.latLng == null ||
          mapData.title == null ||
          mapData.description == null) {
        return; // null 값이 있는 경우 마커 생성을 건너뜁니다.
      }
      // Directly use the latlng.LatLng object
      final latlng.LatLng coordinates = mapData.latLng as latlng.LatLng;

      // Convert to google_maps_flutter.LatLng
      final google_maps_flutter.LatLng googleMapsLatLng =
          google_maps_flutter.LatLng(
              coordinates.latitude, coordinates.longitude);

      google_maps_flutter.BitmapDescriptor icon =
          _customIcons[mapData.iconPath] ??
              google_maps_flutter.BitmapDescriptor.defaultMarker;

      // Create and add the marker
      final google_maps_flutter.Marker marker = google_maps_flutter.Marker(
        markerId: google_maps_flutter.MarkerId(mapData.title),
        position: googleMapsLatLng,
        // icon: icon,
        onTap: onMarkerTap,
        infoWindow: google_maps_flutter.InfoWindow(
            title: mapData.title, snippet: mapData.description),
      );

      tmp.add(marker);
    });

    return tmp;
  }
}

dependencies

• google_maps_flutter: ^2.5.0
• google_maps_flutter_web: ^0.5.2
• google_maps_flutter_platform_interface

After compile custom widget, click preview button

Reproducible from Blank

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

Bug Report Code (Required)

ITFXlcmA05J2odhE0ZPfKsJGhSkwGUALa+dI0tZ+TQ0jF5D4EZk1P878bhJuTtSzaH5YemKbmj4H087nktrqG+4CJRCef4h+z4d+VhPPbDmuaJjXC82gQ3NAAfFXfnHH0Ji33AlTBPRfc0Zk3U66JPOiYz6Cf9qOYwx5e6fDbOY=

Context

I want to build custom widget and use in test mode.

Visual documentation

Additional Info

No response

Environment

- FlutterFlow version: v4.0
- Platform: chrome
- Browser name and version: chrome 119.0.6045.159
- Operating system and version affeected: MacOS 14.0(23A344)

[tony-sir-diesel]

I have the same bug. It seems that the problem is only with custom widgets that have parameters.

[sbis04]

@RRoundTable This looks like it's an issue rendering the custom widget on FlutterFlow because in the preview we don't have access to all the native libraries here. The google_maps_flutter package requires you to have the API keys defined in certain native files, because of which it seems to be failing to render here.

Does it work if you download the code and run the project locally?

[github-actions]

This issue is stale because it has been open for 7 days with no activity. If there are no further updates, a team member will close the issue.

[sbis04]

Closing this issue due to inactivity.