Browse other questions tagged dart flutter or ask your own question. The Overflow Blog How often do people actually copy and paste from Stack Overflow? Podcast 331: One in four visitors to Stack Overflow copies code. Featured on Meta Stack Overflow for Teams is.
When it comes to showing maps in your Flutter application, there are two main options. You can either use flutter_map which is a Leaflet implementation for Flutter and will work with a number of free and paid map providers, or use google_maps_flutter if you want the more popular Google Maps.
For this blog post, I will be using google_maps_flutter, which is made and maintained by the Flutter team at Google.
If this is your first time using Google Maps I recommend checking out Google codelab for maps in Flutter. What I needed was to draw some custom markers like those in the image below.
Zeplin, Inc. 在领英上有 5,091 位关注者。Connected workspace for product teams Zeplin is a connected workspace where you can share, organize and collaborate on designs — built with developers in mind. Zeplin was founded in 2014 and today we are honored to support 4+ million users from thousands of product teams, including Apple, Starbucks, Salesforce, Amazon, Microsoft, Audi. Exporting artboards from a Sketch design to Zeplin is quite straightforward. 🚀 To be able to export designs, you need to download the desktop app. Select any layer/artboard in your Sketch file. Press ⌃⌘E or use the menu up top “Plugins Zeplin Export Selected” to start export process. Flutter-view is a command line tool that allows you to lay out your Flutter apps faster, using Pug/HTML and Sass/CSS. Set up Flutter layouts with hot reload. Watches and updates code as you save your layouts. Visual Studio code extension. Use Pug mixins to create.
Example of what we are trying to achieve
You would expect that you could pass a Widget for marker, just like when using anything else in Flutter. But it’s not that easy as Marker accepts BitmapDescriptor for the icon. I'm going to explain how you can achieve that.
The Native way
What is the BitmapDescriptor? If you’ve ever worked with iOS or Android native Google Maps SDK this will not surprise you.
BitmapDescriptor is an object that defines bitmap which can then be used by Google Maps to draw it on a map. It is used in both platforms and it’s the only way you can add custom icons for markers. So, this limitation comes from the native Google Maps SDK which google_maps_flutter uses, as there is no full flutter implementation for a complex widget like maps yet.
BitmapDescriptor will accept an asset image or a bitmap. For our case, marker text is dynamic, so static asset image is not a good fit. As for a bitmap, in native Android/iOS there’s a way to convert your View to Bitmap (or UIView to UIImage) and you can pass that to BitmapDescriptor.
Zeplin Flutter
The Flutter way
You can do it the same way in the Flutter, but it’s a bit trickier. Mostly because you cannot inflate/load a widget somewhere on the side and convert that to bitmap. You need to draw a widget in the screen view hierarchy and then fetch its painted bitmap.
Zeppelin To Flutter Ship
The key thing you need to know is that each Widget is more like data class and you access bitmap in its associated RenderObject, which gets created during the build phase.
1. Getting the RenderObject
Draw your widget to the screen. This is from some widgets build method that will inflate our markers. We use GlobalKey so we have reference to this widget after it’s built.
Now you can put that GlobalKey to use after the widget is built:
2. Converting to Uint8List
Uint8List is basically a list of unsigned integers that represents bitmap in this case as there is no special Bitmap class in the dart. BitmapDescriptor will also accept Uint8List so we need to do some converting to get from RenderObject to Uint8List. I have all that in the following method:
Zeppelin To Flutter Plant
3. When is widget finished with the build?
I’ve shown you how to get RenderObject and convert it to Uint8List, but when do you call this method?
We need to get our bitmaps right after they are drawn. There are multiple ways to do this, I use tiny AfterLayoutMixin available here.
4. Create the Marker
There you have it. Create the Marker with Uint8List and plug it into the Google Map:
You should end up with something like this:
That looks like a fun roadtrip
I have extracted all this in one simple-to-use class MarkerGenerator. It’s a bit more advanced than the guide explained here. It uses an overlay to build marker widgets and provide List<Uint8List> through the callback. The gist is available here.
Copy it to your project. Then you use MarkerGenerator this way:
Time flies, Flutter saves it
When working in Flutter, some things take more time as opposed to writing them in native Android/iOS, as it happened this time with custom map markers. But overall, I believe that Flutter is definitely a timesaver and a great choice for most apps.
Have you caught the travel bug by looking at the cover illustration? Blame designer Dubravko Tuksar.