flutter_widget_to_marker_one 0.0.5
flutter_widget_to_marker_one: ^0.0.5 copied to clipboard
A Flutter package that converts Flutter widgets into Google Maps markers, allowing for custom, dynamic marker designs using standard Flutter widgets.
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:flutter_widget_to_marker_one/flutter_widget_to_marker_one.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Widget to Marker Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MapScreen(),
);
}
}
class MapScreen extends StatefulWidget {
const MapScreen({super.key});
@override
State<MapScreen> createState() => _MapScreenState();
}
class _MapScreenState extends State<MapScreen> {
late GoogleMapController mapController;
Set<Marker> markers = {};
// Example location (San Francisco)
static const LatLng _center = LatLng(37.7749, -122.4194);
void _onMapCreated(GoogleMapController controller) {
mapController = controller;
_addCustomMarker();
}
Future<void> _addCustomMarker() async {
// Create a custom marker using a simple widget
final marker = await convertWidgetToMarker(
markerId: 'custom_marker',
position: _center,
widget: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 6,
offset: const Offset(0, 3),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.location_pin, color: Colors.blue.shade700),
const SizedBox(width: 8),
const Text(
'Custom Marker',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
],
),
),
context: context,
size: const Size(200, 50),
);
setState(() {
markers.add(marker);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Widget to Marker Example'),
),
body: GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: const CameraPosition(
target: _center,
zoom: 15,
),
markers: markers,
),
);
}
}