2026-09-01 –, Ran1
We turn custom Flutter widgets into small images and use them as MapLibre pins. This avoids managing many static image assets and keeps pin designs consistent with the app UI. We also briefly cover image caching and how to handle re-registering images when the map style changes.
In this lightning talk, we show a simple technique to render custom Flutter widgets as map pins in MapLibre.
Instead of preparing many static image assets, we convert Flutter widgets into images at runtime. We render a widget off-screen, capture it as a bitmap, and register it as an image in MapLibre.
Each post is then displayed as a symbol using the registered image, allowing the map pins to match the app UI design.
To keep performance stable, we generate each image only once and reuse it through caching. We also handle style changes by re-registering images when necessary.
This approach simplifies asset management while enabling flexible and consistent pin design.
A short demo will show how the widget and map pin visually match.
- MapLibre documentation: https://maplibre.org/
- Flutter documentation: https://flutter.dev/docs
Basic knowledge of Flutter and map-based applications will be helpful.
Indicate what is (are) the open source project(s) essential in your talk:I am a Flutter engineer and indie developer based in Japan.
I am building FoodGram, a global food-sharing app that visualizes meals on a map using MapLibre. Through developing this app, I explore how to combine mobile UI and map technologies to create intuitive and scalable user experiences.
I’m a Flutter engineer developing an app called FoodGram.
I’m using MapLibre to build a system that displays food locations on a map.
I’ll share the insights I’ve gained through actual product development.