Argument Type Mismatch -using Mapbox API - flutter

Question

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.

Answer 1

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(),
),
),
],
),
],
),
);
}
}