Can't add marker to Google Maps Flutter

Question

I'm trying to add a marker to Flutter Google but couldn't manage to add an icon to it. I'm sharing the code, the error that I'm getting is, "mapMarker" couldn't be null.

It actually works without 'Uint8List' but the icon is too big, so I need to resize it. Adding small assets is not an option because quality is getting worse.

I'm running this code:

class _Harita extends State<Harita> {
  Completer<GoogleMapController> _controller = Completer();
  Set<Marker> _markers = {};
  BitmapDescriptor? mapMarker;
  BitmapDescriptor? mapMarker1;


  void initState() {
    setCustomMarker();
    super.initState();
  }

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(41.6018963, 36.0805428),
    zoom: 12.06,
  );

  Future<Uint8List> getBytesFromAsset(
      {required String path, required int width}) async {
    ByteData data = await rootBundle.load(path);
    ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),
        targetWidth: width);
    ui.FrameInfo fi = await codec.getNextFrame();
    return (await fi.image.toByteData(format: ui.ImageByteFormat.png))!
        .buffer
        .asUint8List();
  }

  void setCustomMarker() async {
    final Uint8List customMarker = await getBytesFromAsset(
        path: ('assets/images/golmarker.png'), width: 200);

    setState(() {
      mapMarker = BitmapDescriptor.fromBytes(customMarker);
    });
  }

  void _onMapCreated(GoogleMapController controller) {
    sleep(Duration(seconds: 5));
    setState(() {
      _markers.add(
        Marker(
            markerId: MarkerId('1'),
            icon: mapMarker!,
            position: LatLng(41.566743, 36.093695),
            infoWindow: InfoWindow(
                title: 'Uzun Göl',
                snippet: 'Kızılırmak Deltasındaki Acı Göller İçerisindedir.')),
      );
      _controller.complete(controller);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
          children: <Widget>[
            GoogleMap(
              markers: _markers,
              onMapCreated: _onMapCreated,
              mapType: MapType.normal,
              initialCameraPosition: _kGooglePlex,
              /*onMapCreated: (GoogleMapController controller) {
                _controller.complete(controller);
              },*/
            ),
            Positioned(
              top: 60,
              left: 20,
              child: InkWell(
                child: Container(
                  height: 40,
                  width: 40,
                  decoration: BoxDecoration(
                      color: Colors.white, shape: BoxShape.circle),
                  child: Icon(
                    Icons.close,
                    size: 25,
                  ),
                ),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ),
          ],
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FloatingActionButton.extended(
                  backgroundColor: Color.fromRGBO(74, 112, 217, 2),
                  heroTag: "qrcodefalanbruh",
                  onPressed: () {
                    Navigator.pushReplacement(
                        context,
                        MaterialPageRoute(
                            builder: (BuildContext context) => super.widget));
                  },
                  icon: Icon(Icons.location_searching, color: Colors.white),
                  label:
                      Text('Ortalama', style: TextStyle(color: Colors.white))),
            ],
          ),
        ));
  }
}

Answer 1

here is the solution to add marker in googlemap if you find your solution.then it will help some other persons in future

  final _pickMarkerId = const MarkerId('start');
  final Map<MarkerId, Marker> _locationMarkers = <MarkerId, Marker>{};

  await _getPickIcon();

   _locationMarkers[_pickMarkerId] = Marker(
        markerId: _pickMarkerId,
        position: _start,
        icon: _pickIcon ?? BitmapDescriptor.defaultMarker,
      );


  _getPickIcon() async {
    if (_pickIcon != null) {
      return _pickIcon;
    }
    return _pickIcon = await convertIcon(put here your image);
  }

  Future<BitmapDescriptor?> convertIcon(image) async {
    ByteData data = await rootBundle.load(image);
    ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(), targetWidth: 120);
    ui.FrameInfo fi = await codec.getNextFrame();
    Uint8List? bytes = (await fi.image.toByteData(format: ui.ImageByteFormat.png))?.buffer.asUint8List();
    return BitmapDescriptor.fromBytes(bytes!);
  }

use this line in google map marker

GoogleMaps(

marker:locationMarkers.values.toSet()

Answer 2

I fixed it by putting variable inside Marker List.

void _onMapCreated(GoogleMapController controller) async {
final Uint8List customMarker = await getBytesFromAsset(
    path: ('assets/images/golmarker.png'), width: 200);
mapMarker = BitmapDescriptor.fromBytes(customMarker);
setState(() {
  _markers.add(
    Marker(
        markerId: MarkerId('1'),
        icon: mapMarker!,
        position: LatLng(41.566743, 36.093695),
        infoWindow: InfoWindow(
            title: 'Uzun Göl',
            snippet: 'Kızılırmak Deltasındaki Acı Göller İçerisindedir.')),
  );
  _controller.complete(controller);
});