Good day,

I am currently learning flutter under the Udemy course and at the moment is implementing maps in the app. The current lecture is using Google Maps to add markers on it when user taps on the screen, however I use a different API (Mapbox) and try to implement the same output.

Currently here is the issue I have encountered when I try to compile my code:enter image description here

My code can be found here:

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';

import 'package:latlong2/latlong.dart';
import 'package:native_func_app/models/place.dart';

import '../models/place.dart';

class MapScreen extends StatefulWidget {
  //const MapScreen({ Key? key }) : super(key: key);
  final PlaceLocation initialLocation;
  final bool isSelecting;

  MapScreen({
    this.initialLocation =
        const PlaceLocation(latitude: 37.421, longitude: -122.084),
    this.isSelecting = false,
  });

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

class _MapScreenState extends State<MapScreen> {
  LatLng _pickedLocation;

  void _selectLocation(LatLng position) {
    setState(() {
      _pickedLocation = position;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Map'),
      ),
      body: FlutterMap(
        options: MapOptions(
          center: LatLng(widget.initialLocation.latitude,
              widget.initialLocation.longitude),
          zoom: 16.0,
          //onTap: widget.isSelecting ? _selectLocation: null,
          onTap: widget.isSelecting ? _selectLocation : () {},
        ),
        layers: [
          TileLayerOptions(
              urlTemplate:
                  "https://api.mapbox.com/styles/v1/dhe/ckwd8qofr09gd14oq5d8djor9/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZGhlIiwiYSI6ImNrdnFybGw4ZzI1cWgycm91MXBpcW9oN3kifQ.fzK2_BFZrGU_vMpwTuU2Kg",
              /*subdomains: ['a', 'b', 'c'],
            attributionBuilder: (_) {
              return Text("© OpenStreetMap contributors");
            },*/
              additionalOptions: {
                'accessToken':
                    'pk.eyJ1IjoiZGhlIiwiYSI6ImNrdnFybGw4ZzI1cWgycm91MXBpcW9oN3kifQ.fzK2_BFZrGU_vMpwTuU2Kg',
                'id': 'mapbox.mapbox-streets-v8',
              }),
          MarkerLayerOptions(
            markers: _pickedLocation == null
                ? []
                : [
                    Marker(
                      point: _pickedLocation,
                      builder: (ctx) => Container(
                        child: FlutterLogo(),
                      ),
                    ),
                  ],
          ),
        ],
      ),
    );
  }
}

Right now, someone ask me to replace the null code with (){} to see if the error goes away and it does. However a new issue occurs when I recompile as seen here: 2nd issue crash at compile time

Can anyone help me identify the issue?

If you need to access my project ill link the Github Project I am using to view the source codes:

https://github.com/DheDeveloperUsv/native_func_app

Any help or insight to resolve this issue is very much welcome.


Solution 1: Maurice Raguse

Add a parameter tapPosition to your _selectLocation

void _selectLocation(TapPosition tapPosition, LatLng position) {
    setState(() {
      _pickedLocation = position;
    });
  }

onTap needs a function with 2 Parameters and no return value (void). So this won't be working:

widget.isSelecting ? _selectLocation : () {}

_selecteLocation is a function this 1 parameter

and (){} has no parameters. change (){} to (TapPosition tapPosition, LatLng position){}

complete code:

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';

import 'package:latlong2/latlong.dart';
import 'package:native_func_app/models/place.dart';

import '../models/place.dart';

class MapScreen extends StatefulWidget {
  //const MapScreen({ Key? key }) : super(key: key);
  final PlaceLocation initialLocation;
  final bool isSelecting;

  MapScreen({
    this.initialLocation =
        const PlaceLocation(latitude: 37.421, longitude: -122.084),
    this.isSelecting = false,
  });

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

class _MapScreenState extends State<MapScreen> {
  LatLng _pickedLocation;

  void _selectLocation(TapPosition tapPosition, LatLng position) {
    setState(() {
      _pickedLocation = position;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Map'),
      ),
      body: FlutterMap(
        options: MapOptions(
          center: LatLng(widget.initialLocation.latitude,
              widget.initialLocation.longitude),
          zoom: 16.0,
          //onTap: widget.isSelecting ? _selectLocation: null,
          onTap: widget.isSelecting ? _selectLocation : (TapPosition tapPosition, LatLng position) {},
        ),
        layers: [
          TileLayerOptions(
              urlTemplate:
                  "https://api.mapbox.com/styles/v1/dhe/ckwd8qofr09gd14oq5d8djor9/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZGhlIiwiYSI6ImNrdnFybGw4ZzI1cWgycm91MXBpcW9oN3kifQ.fzK2_BFZrGU_vMpwTuU2Kg",
              /*subdomains: ['a', 'b', 'c'],
            attributionBuilder: (_) {
              return Text("© OpenStreetMap contributors");
            },*/
              additionalOptions: {
                'accessToken':
                    'pk.eyJ1IjoiZGhlIiwiYSI6ImNrdnFybGw4ZzI1cWgycm91MXBpcW9oN3kifQ.fzK2_BFZrGU_vMpwTuU2Kg',
                'id': 'mapbox.mapbox-streets-v8',
              }),
          MarkerLayerOptions(
            markers: _pickedLocation == null
                ? []
                : [
                    Marker(
                      point: _pickedLocation,
                      builder: (ctx) => Container(
                        child: FlutterLogo(),
                      ),
                    ),
                  ],
          ),
        ],
      ),
    );
  }
}