4-Flutter Adding Points on a Map — The web coder path to Flutter
Everything is nicer when you can add points on a Flutter map
The complete Flutter code so far, is at the end of the article.
After been able to display points on a map, I will change my App and Web API to add new points from my Mobile App.
This article is a follow up on:
2-Flutter displaying points on a Map — The web coder path to Flutter
On my path to learning Flutter, I’m also working on other projects. One of the things that come up a lot lately are…
To get started, I will add a simple “FloatingActionButton”, these are circular buttons that appear at the bottom of the screen, and are very convenient and easy to use.
First I will change my build to contemplate my new button:
My FloatingActionButton will be returned from a function, which will return one of 2 buttons, one to set the new marker, and another to submit after the new marker has been set.
This function will also call 2 other functions depending on the var “newMarker” state, first when its null and we need to set the marker location:
When I first set my “newMarker”, I will be calling the function “setNewMarker” to set it’s starter location at the center
After I’ve added the marker to the location I want, I will have another button on the “floatingActionButton” to submit the new entry
The button for submitting the new point will use “Navigator”, which is used to navigate to other screens I created, this will open a new screen with a form to complete the point information. Note that I’m passing the “newMarker” I had set earlier to the “NewEntry” screen/Widget.
Later I will show more about the “NewEntry” screen I will Navigate to.
I’ve done a small restructure of my original “getMap” function:
It now checks if the “newMarker” is not null, when it is, it will display only the markers already submitted, if it’s not null it will display the marker I’m setting.
My original “getMyData” also has a small change:
To make the code more readable, I’ve created a couple of functions to deal with filling my “_makers”, because I’m going to update this info in more than one place:
Creating a new Class
Now, I’m going back to that “NewEntry” I mentioned earlier, I’m going to create a file named “newEntry.dart”, and add my first Stateless widget:
Stateless Widgets is a widget (that can be made of many other widgets), that never changes state. Unlike Statefull Widget, we can not use “setState”, and it can not be changed after it was created. It is said that we should always start with a Stateless widget, and only switch to Statefull when it is completely necessary.
I’ve also added a parameter which is required to initiate this class, “newPoint”, this could be compared to a “QueryString” from my URL, since I’m more used to the Web. This parameter will be used to pass the latitude and longitude from my marker, to my Web API.
I’m going create a Form with a GlobalKey to use validation, so that it is only submitted after Title and Description are filled. Both fields will have a validator.
Note: I have to pass “BuildContext context” to my function, because since we are using a Stateless Widget, we need to pass it when the widget is first built, we can’t access it directly after that.
As an example, for the Title, I use the TextFormField, with a controller associated (controllers give you access to what has been filled on that field), and on validator I will just check if it’s empty. If it’s not empty it will return a null and we will be able to continue:
To make sure all the fields are filled before proceeding, all I have to do is call “_formKey.currentState.validate()”, it will validate the fields with a validator, if nothing is wrong, it will continue:
In the previous code, I’ve a call to my Web API, “List result = await requestNewPoint();”, the result can be sent back to the “main.dart” with a simple “Navigator.pop(context, result);”. This simply closes the current screen and returns a value (result). On the main.dart I’m waiting to receive this data because I’m waiting for it:
It’s like opening a popup, and waiting for a result from it.
Field validation made easy, if something is wrong, it wont get past it. I think this is a very practical solution for Forms.
Submitting the Form
After the fields are validated, I’m going to make another Web API call, this time a “post”, I will use it to submit the new entry, and get a new markers list at the same time, so that when the screen closes, I will have an updated markers List without need for other requests:
The values for the new marker were added as a “Map<String, String>” to the body of the request, this will be easily processed on the Web API later as a class.
Using Mapcontroller to move
I thought, instead of zooming in slowly with my fingers, I could use the “MapController” that is include in the “flutter_map” package, to easily move between Islands (would be so good if it was this easy in real life!), first I will add a “actions” to my Appbar, (actions are widgets that can be added to the AppBar, like Buttons, DropDown, etc), I will use another function for the action I want:
To make it easier I created a class called “IslandLoc” (a class in C# is very similar to dart). This class will hold the information I need to move to, and display the Island name on the list. When the selected value changes, I will use the values I’ve added to my class and move to the location using the “mapController” move function.
Web API and SQL
On the SQL I have to add just a simple Insert, and because I’m lazy, I thought the same procedure would call the Stored Procedure I had already created for selecting, and refresh my Data on one call.
On the Web API project, I created a regular class to get my new point data, this will help receive the data when the App calls my API
Now I just need to create another controller for a Post, where the body will be parsed to the classed I created earlier, and like I said, because I’m lazy, I will Insert and Select on one request.
The Web API controller code:
The result of this article:
You can find this Flutter code on my GitHub:
A new Flutter project. You will need to create your own keys.dart on the lib directory, for your your own strings…
I’m enjoying Flutter so far. It was a big/hard change for me, but my path is just starting.