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.

Calling the API

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:

Using the Points

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:

showDialog

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: