hybrid_map_marker 1.0.0 copy "hybrid_map_marker: ^1.0.0" to clipboard
hybrid_map_marker: ^1.0.0 copied to clipboard

A Flutter package that allows you to create custom map markers from any Flutter widget for use with Google Maps. Convert your custom widgets, including SVG images, icons, and complex layouts, into bit [...]

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:hybrid_map_marker/hybrid_map_marker.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  final HybridMapMarker _hybridMapMarker = HybridMapMarker.instance;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: _map(),
      ),
    );
  }

  Widget _map() {
    final position = const LatLng(39.481785683754346, -0.35585001671455546);
    return FutureBuilder<Set<Marker>>(
      future: _createMarkers(),
      builder: (context, snapshot) {
        return GoogleMap(
          compassEnabled: false,
          myLocationButtonEnabled: false,
          markers: snapshot.data ?? {},
          initialCameraPosition: CameraPosition(
            zoom: 17,
            target: position,
          ),
        );
      },
    );
  }

  Widget _locationMarker() {
    return Container(
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: Colors.amber,
        shape: .circle,
      ),
      child: Icon(Icons.location_on_outlined, color: Colors.white),
    );
  }

  Widget _svgMarker() {
    return Container(
      margin: const EdgeInsets.all(2),
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: Colors.amber,
        shape: .circle,
      ),
      child: SvgPicture.asset(
        'assets/user.svg',
        colorFilter: ColorFilter.mode(Colors.white, BlendMode.srcIn),
      ),
    );
  }

  Future<Set<Marker>> _createMarkers() async {
    await _hybridMapMarker.cacheSvg(path: 'assets/user.svg');

    final size = const Size(64, 64);
    final locationIcon = await _hybridMapMarker.createIcon(
      _locationMarker(),
      size: size,
    );
    final svgIcon = await _hybridMapMarker.createIcon(_svgMarker(), size: size);

    return {
      Marker(
        markerId: MarkerId('location'),
        position: const LatLng(39.481785683754346, -0.35585001671455546),
        icon: locationIcon,
      ),
      Marker(
        markerId: MarkerId('svg'),
        position: const LatLng(39.482232741106344, -0.3567805203800181),
        icon: svgIcon,
      ),
    };
  }
}
2
likes
0
points
111
downloads

Publisher

verified publisherrudo.es

Weekly Downloads

A Flutter package that allows you to create custom map markers from any Flutter widget for use with Google Maps. Convert your custom widgets, including SVG images, icons, and complex layouts, into bitmap markers.

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flutter, flutter_svg, google_maps_flutter

More

Packages that depend on hybrid_map_marker