2-Flutter displaying points on a Map — The web coder path to Flutter
Like I said, on my path to learning Flutter, I’m also working on other projects. One of the things that come up a lot lately are points on a map.
Since I already had a Web API working on the previous article, I figured I would add a couple of columns for Latitude and Longitude, no need for changes on the API.
Today’s Main Goals:
- Displaying a map
- Show points on the map
- Displaying point Info
Displaying a map
Since I already use mapbox on another project, I will use the same here.
Mapbox has API‘s and SDK’s for using its map services. You can easily register to get the token, they have a generous free tier.
For that, I will need 2 dependencies, “flutter_map” for the Map itself, and “latlong” for the Latitude/Longitude variables:
I will start with a simple example to display the map, but without the markers for starters (documentation):
I don’t need to show the whole world, so I’m going to define a “minZoom”. Seams to work well enough! Now that I’ve a map, I’m going to add the points from the API I’m already calling.
Show points on the map
I will use what I already have, just add a simple List variable and the points returned from the API will be assigned to that List.
The simple explanation I found for “setState”, is that it tells your App to update it’s UI if something that was rendering was dependent on a variable that was altered.
Since I already have everything I need to show points on the map, I’m going for a simple approach, I will add the “MarkerLayerOptions” to the FlutterMap, with all the markers I get from the API:
One of the main struggles I had at the beginning coming from ASP.NET, was returning a Widgets (or point) for each item on a List, since I’m used to having view and code separated out of the box. The simple way I found was using the Spread operator (…) that was implemented on Dart 2.3 and it works with if/for, I will use this for now, because I’m lazy and it works!
To use the Spread operator you might need to “Update the SDK Constraints”
If it still displays an error after updating the constraints, just close the IDE and open again.
The code above will parse each List Item and return it as a marker, I chose to use an Icon as a child because “Icons” has a lot of useful and uniform icons to use.
The result:
Displaying point Info
To display the info about a point, I will need to add an ontap event, for that I will use “GestureDetector” and the Point will be its child. The ontap event will need to be async because we don’t know when the dialog will be closed, and on the tap, we will call a function “alertDialog”.
With that done, I found that the simplest way to display information (like on a popup), will be using “showDialog”, the implementation is very simple, both “title” and “content” accept any Widget, so you’re free to build something simple, or not. I will go with something simple:
Nothing special about the “showDialog”, just a Text for the title and the content. I set the “barrierDismissible” to false, I want it to be closed only when the “Close” button is pressed. The “FlatButton” will display its child Widget, in this case, it will be a Text, and when it’s tapped it will simply close the dialog.
The final result:
What’s Next?
Next, I want to be able to insert new points from the app. I will need to make a few changes to the App/API/SQL.
This is my way of doing things (not the right way), feel free to reach out if you have doubts, questions or are just curious about something.
You can learn more about me and why I started this series of articles:
