Google maps in flutter
Want a modern, clean way to display information with map on your flutter app?
Lets start by looking at the skeleton code, The first container in the stack will be our map and the second where we will show the information we need.
Lets start by adding google maps in our app. Code for our container one will be:
Now, lets customize our map, visit https://mapstyle.withgoogle.com/ and copy your JSON code. Create a new JSON file in your asset folder and paste this code. Also include this in your assets in pubsec.yaml (We are using JSON style declaration see more: https://developers.google.com/maps/documentation/javascript/styling).
Do the following changes for a clean custom map on your flutter map:
Alright, so now the last step is to create the bottom container. This is the tricky part, inside our second container will be an animated container wrapped within a gesture detector aligned at the bottom of the screen.
This animation can also be achieved by using animated position but, it was not working properly on different screen sizes so I ended up using animated container instead 😁.
I hope you like this tutorial, this simple animation can be used in various ways cannot wait to see what you do with it!
Full code:
