Location via latitude longitude in a flutter
For any organization, Client, or customer location data is very important to reach out to them for growing business worldwide. Also some departments like marketing, sales depend on customer’s location. In this blog, we are going to see how we get the exact location by passing latitude and longitude to maps API.
Above is the goal that we are going to achieve through this blog step by step. The app contains the heading text and the dynamic image of the map because it is based upon latitude and longitude.
Clarification:
This blog contains only showing latitude longitude on the image which is used here based upon some API. Also for this, you will need MAPS_API_KEY. The full document on how to generate the API key that you can find here.
Step-1: Create Project
There are various methods for creating a flutter project. Choose one of them and create the flutter project.
Step-2: Update the main file
As you can see from the above code I have created the stateful widget named MapsWithLatLongDemo and called it in the main method by providing orientation to portrait up. Also in the material app, I have provided the necessary properties.
Step-3: Create the basic file structure
Here I have created multiple folders according to my need. As the name suggests screens folder will have different screens, the values folder has another three files.
- appAssets: To store all the assets path.
- appStrings: To store all the necessary strings(URL). As shown here you need to put maps API.
- utility: The main intention of utility is to get code reusability and also reduce repetitive code. This file will have static methods and widgets which are accessed all-over the application. Here are some methods explained.
1.getBoxDecoration():
This method takes optional parameters(because of {curly_braces}) of type double and color. So that whenever I call this method color and border-radius it will take accordingly otherwise it will take whatever values are defined in this method.
2.getMapUrl():
This method returns the whole string including map base URL, map height, width, map type, latitude, longitude, and maps API key. We can see the map base URL and API key is stored in appStrings. So now we only need to pass latitude and longitude and in return, we will get the whole map URL. For maps API documentation please visit here.
3.imageLoader() and progress()
Before understanding the above code take a look at the below gif.
From the above gif, we can see that linearProgressIndicator will be displayed till the CachedNetworkImage loads the URL image.
(4)imageLoader():
This method takes parameters like image URL, placeholder, and other optional parameters like height, width, and progress width. Because the CachedNetworkImage handles multiple scenarios like imagebuilder, placeholder, and errorwidget.
Here, the placeholder displays the linear progress bar and if URL not found(if the internet is not on) then the error widget will display the asset image. Also in this method, I have initially checked the URL, if it is null then the placeholder image from the asset will be shown.
(5)progress():
The parameters of this method are BuildContext and width of progress which is optional. BuildContext is used because the placeholder from the cached image needs to build the whole new widget while downloading the file. I have also used AlwaysStoppedAnimation for the color of a progress bar.
Step-4: Creating necessary methods and widgets for Home Screen
The home screen contains an individual widget for _body and mapImageWidget.
(1)_body():
This widget displays the column in which I have added the text and mapImageWidget by giving the margin according to the design. Also, the mapImageWidget will need to take string because I have accessed Utility.getMapUrl method which will return the whole map string as we discussed earlier.
(2)mapImageWidget():
This widget takes URL generated by the getMapUrl method. Container’s decoration properties contain method Utility.getBoxDecoration that I have created earlier. Container’s child Utility.imageLoader will take parameters of image URL and asset image.
Step-5: Run the app and see the magic
Now we have done all the necessary things to get the location-based upon the latitude-longitude that we passed. You can find the full code over here.
Happy coding….
