Flutter Widget to Marker #

A Flutter package that converts any Flutter widget into a Google Maps marker icon. This package makes it easy to create custom, dynamic marker designs using standard Flutter widgets.

Features #

• Convert any Flutter widget to a Google Maps marker
• Customize marker size and pixel ratio
• Support for all Flutter widgets including containers, text, images, and custom designs
• Easy to use API

Getting started #

Add this package to your Flutter project by including it in your pubspec.yaml:

dependencies:
  flutter_widget_to_marker_one: <latest_version>

Usage #

Here's a simple example of how to use the package:

import 'package:flutter_widget_to_marker_one/flutter_widget_to_marker_one.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

// Create a custom marker from a widget
final marker = await convertWidgetToMarker(
  markerId: 'custom_marker',
  position: LatLng(37.7749, -122.4194),
  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),
);

// Use the marker directly in GoogleMap widget
GoogleMap(
  markers: {marker},
  // ... other GoogleMap properties
)

Advanced Usage #

You can customize various marker properties:

final marker = await convertWidgetToMarker(
  markerId: 'custom_marker',
  position: LatLng(37.7749, -122.4194),
  widget: YourCustomWidget(),
  context: context,
  size: const Size(120, 120),
  pixelRatio: 2.0,
  anchor: const Offset(0.5, 1.0),
  draggable: true,
  flat: false,
  visible: true,
  zIndex: 1,
  rotation: 45.0,
  onTap: () => print('Marker tapped!'),
  onDragStart: (position) => print('Drag started'),
  onDrag: (position) => print('Dragging...'),
  onDragEnd: (position) => print('Drag ended'),
);

Additional information #

• The package requires a BuildContext to function properly
• Higher pixel ratios will result in sharper images but larger file sizes
• The conversion process is asynchronous, so make sure to await the result
• For best results, test your markers at different zoom levels

For issues, feature requests, or contributions, please visit our GitHub repository.