Back to Browse

Flutter Flow: MapBox SDK with custom markers

1.3K views
Jan 6, 2025
15:29

Article with code: https://coffeebytez.substack.com/p/flutter-flow-mapbox-sdk-with-custom This is also integrated in the free FlutterFlow custom map template: https://marketplace.flutterflow.io/item/zeSFD2KlIXUOfcXYwi1e Custom map template instructions: https://codewhims.com/articles/flutter-flow-map-template-update-library-migration You can generate any widget including maps with custom markers, polylines, polygons, etc at https://codewhims.com/ Join Flutter Flow: https://app.flutterflow.io/create-account?referral_id=5B1Th98eh7cMU4IOVWHKxVv5sFr2 📖 Chapters: 0:00:00 - Introduction to MapBox SDK with FlutterFlow 0:00:40 - Obtaining MapBox Public Access Token and Article Reference 0:01:00 - Overview of Pre-built Custom Markers Map in FlutterFlow Marketplace 0:01:50 - Creating a Custom Widget and Defining Parameters 0:02:15 - Defining the 'Place' Data Type Schema 0:02:45 - Custom Functions for Database Integration (Firestore/Supabase) 0:03:50 - Detailed Explanation of MapBox Widget Parameters and Dependencies 0:04:50 - Code for Loading Images (Network and Assets) for Markers 0:05:30 - Implementing Point Annotation Manager and Marker Click Listener 0:06:20 - Handling Marker Clicks and Passing Data via Callbacks 0:07:05 - Live Demonstration of the Map with Custom Markers 0:08:20 - Map Customization Options and Additional Resources 0:09:30 - Integrating the Custom Widget into FlutterFlow Page and State Management 0:10:15 - Configuring On Page Load Actions for Data Fetching 0:11:20 - Deep Dive into Supabase Data Fetching Action Block 0:12:50 - Connecting OnClickMarker Callback to Page State Updates 0:14:50 - Final Review and Conclusion

Download

0 formats

No download links available.

Flutter Flow: MapBox SDK with custom markers | NatokHD