my flutter asset image is not being used as my marker icon for google maps

Question

I have created a customised image to use as my marker icon for one of my markers on google maps on my flutter app. Unfortunately, this is not working as planned and the default icon is being displayed instead. Can anybody spot the eroor? I certainly can't. As a side note, nothing in my if statements is being printed in the console. An issue for another day?

This is the code I used to get up my marker:

var map;
var rmarker;
final restaurantmarker = BitmapDescriptor.fromAssetImage(
        ImageConfiguration(), 'assets/images/yellow_MarkerR.png')
    .then((value) => rmarker = value);
final mapp = location.getLocation().then((value) => map = value);

final _markers = [
  Marker(
    markerId: MarkerId("my_location"),
    position: LatLng(41.16599, -110.75792),
    infoWindow: InfoWindow(title: "YOUR HOME"),
  ),
  Marker(
      markerId: MarkerId("RESTAURANT"),
      icon: rmarker,
      position: LatLng(40.16599, -110.75792),
      infoWindow: InfoWindow(title: "Restaurant"))
];
final setmarkers = _markers.toSet();

class NearbyScreen extends StatelessWidget {
  void initState() {
    startService();
  }

  @override
  //LocationHelper.mapviewpointer(latitude: )
  Widget build(BuildContext context) {
    return /* !_serviceEnabled ? Center(child:Text("Page cannot be viewed"),) :
        map == null
            ? Center(
                child: Text("Null response"),
              )
            :*/
        GoogleMap(
      initialCameraPosition: CameraPosition(
          target: LatLng(41.16599,
              -110.75792 /*map.latitude, map.longitude
 double.parse(coordinates[0]), double.parse(coordinates[1]) */
              )),
      //minMaxZoomPreference: MinMaxZoomPreference(10, 20),
      zoomControlsEnabled: true,
      markers: setmarkers,
    );
  }
}

And this is the full code:

Future<bool> assignService(Location loc) async {
  bool servicestatus = await loc.serviceEnabled();
  print("Service status $servicestatus");
  return servicestatus;
}

Future<PermissionStatus> assignPermission(Location loc) async {
  var hasPermission = await loc.hasPermission();
  print("Permission status $hasPermission");
  return hasPermission;
}

Location location = Location();

var _serviceEnabled;
var _serve = assignService(location).then((value) => _serviceEnabled = value);

//var _permissionGranted = assignPermission(location);
var _permissionGranted;
var _permi =
    assignPermission(location).then((value) => _permissionGranted = value);

void startService() {
  if (!_serviceEnabled) {
    _serviceEnabled = assignService(location);
    print("service disabled");
    if (!_serviceEnabled) {
      return;
    }
  }

  if (_permissionGranted == PermissionStatus.denied) {
    _permissionGranted = assignPermission(location);
    print("permission denied");
    if (_permissionGranted != PermissionStatus.granted) {
      return;
    }
  }
}

var map;
var rmarker;
final restaurantmarker = BitmapDescriptor.fromAssetImage(
        ImageConfiguration(), 'assets/images/yellow_MarkerR.png')
    .then((value) => rmarker = value);
final mapp = location.getLocation().then((value) => map = value);

final _markers = [
  Marker(
    markerId: MarkerId("my_location"),
    position: LatLng(41.16599, -110.75792),
    infoWindow: InfoWindow(title: "YOUR HOME"),
  ),
  Marker(
      markerId: MarkerId("RESTAURANT"),
      icon: rmarker,
      position: LatLng(40.16599, -110.75792),
      infoWindow: InfoWindow(title: "Restaurant"))
];
final setmarkers = _markers.toSet();

class NearbyScreen extends StatelessWidget {
  void initState() {
    startService();
  }

  @override
  //LocationHelper.mapviewpointer(latitude: )
  Widget build(BuildContext context) {
    return /* !_serviceEnabled ? Center(child:Text("Page cannot be viewed"),) :
        map == null
            ? Center(
                child: Text("Null response"),
              )
            :*/
        GoogleMap(
      initialCameraPosition: CameraPosition(
          target: LatLng(41.16599,
              -110.75792 /*map.latitude, map.longitude
 double.parse(coordinates[0]), double.parse(coordinates[1]) */
              )),
      //minMaxZoomPreference: MinMaxZoomPreference(10, 20),
      zoomControlsEnabled: true,
      markers: setmarkers,
    );
  }
}

I am also getting an error in my terminal that says: E/Parcel (22617): Reading a NULL string not supported here. E/Parcel (22617): Reading a NULL string not supported here.

Answer 1

There are many issues with your code and I just refactored the important part of your code for maps logic.

But the important issue is that you are not insuring the initialization of restaurantMarker. I added a check for that here which isSetupReady;

First, make sure you have added icon assets assets/images/yellow_MarkerR.png into your pubsepc.yaml file.

import 'package:flutter/material.dart';

class NearbyScreen extends StatefulWidget {
  @override
  _NearbyScreenState createState() => _NearbyScreenState();
}

class _NearbyScreenState extends State<NearbyScreen> {
  var _markers;
  var setmarkers;
  var restaurantMarker;
  bool isSetupReady = false;

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

  doSetup() async {
    restaurantMarker = await BitmapDescriptor.fromAssetImage(
        ImageConfiguration(), 'assets/images/yellow_MarkerR.png');
    _markers = [
      Marker(
        markerId: MarkerId("my_location"),
        position: LatLng(41.16599, -110.75792),
        infoWindow: InfoWindow(title: "YOUR HOME"),
      ),
      Marker(
          markerId: MarkerId("RESTAURANT"),
          icon: rmarker,
          position: LatLng(40.16599, -110.75792),
          infoWindow: InfoWindow(title: "Restaurant"))
    ];
    setmarkers = _markers.toSet();
    setState(() {
      isSetupReady = true;
    });
  }

  @override
  //LocationHelper.mapviewpointer(latitude: )
  Widget build(BuildContext context) {
    return /* !_serviceEnabled ? Center(child:Text("Page cannot be viewed"),) :
        map == null
            ? Center(
                child: Text("Null response"),
              )
            :*/
        isSetupReady
            ? GoogleMap(
                initialCameraPosition: CameraPosition(
                    target: LatLng(41.16599,
                        -110.75792 /*map.latitude, map.longitude
 double.parse(coordinates[0]), double.parse(coordinates[1]) */
                        )),
                //minMaxZoomPreference: MinMaxZoomPreference(10, 20),
                zoomControlsEnabled: true,
                markers: setmarkers,
              )
            : Center(child: Text('Loading Maps...'));
  }
}

Answer 2

Looks like you are not retrieving the marker icon on your code properly as you only define it as restaurantmarker. Here is how you can resolve this:

First, you need to make sure that you have define your icon on your pubspec.yaml under Flutter: section:

Flutter:
    assets:
      - assets/images/yellow_MarkerR.png

Then, you will need to call the BitmapDescriptor.fromAssetImage inside initState() to get the icon before the map loads:

void initState() {
     BitmapDescriptor.fromAssetImage(
        ImageConfiguration(), 'assets/images/yellow_MarkerR.png')
     .then((value) => rmarker = value);
}