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

FloatingActionButton

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:

adding a floatingActionButton

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.

return floatingActionButton

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:

setting newMarker Position

Initial FloatingActionButton

When I first set my “newMarker”, I will be calling the function “setNewMarker” to set it’s starter location at the center

setting newMarker position

Submit new Point FloatingActionButton

After I’ve added the marker to the location I want, I will have another button on the “floatingActionButton” to submit the new entry

open submit newMarker form

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.

Code improvements

I’ve done a small restructure of my original “getMap” function:

new getMap and newMarker

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:

new getMyData

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:

fill my _marker

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:

NewEntry 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.

Form Validation

New Entry Form

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:

Title Field

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:

Save Button

MediaQuery, you can get information about the size and layout of the screen of a device.

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.

Validation

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:

Submit New Point and get List

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

AppBar Actions

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:

new build actions

The function:

my DropDown Menu

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.

my IslandLoc class

The result:

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.

SQL

Typical SQL Stuff

Web API

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

Creating a new Model Class

NewPoint.cs

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:

Final result

You can find this Flutter code on my GitHub:

CodeGlitch/4-Flutter-Adding-Points-on-a-Map

I’m enjoying Flutter so far. It was a big/hard change for me, but my path is just starting.

Flutter Community