FLUTTER ECOSYSTEM

IbrahimTabba/custom_map_markers

IbrahimTabba/custom_map_markers open-source repository details.

custom_map_markers 專案封面
Stars
18
Forks
8
最近推送(UTC)
2022年9月20日
專案狀態
未封存
IbrahimTabba GitHub avatar
GITHUB User

IbrahimTabba ↗

語言DartRubySwiftKotlinObjective-C

此儲存庫發佈的套件

使用的依賴

依賴清單 6 項

原始 README

以下為英文專案原文快照,最新內容請造訪 GitHub。

展開 / 收合專案 README

Custom Map Markers

Not only "Everything is a widget" also "Everywhere is a widget".
custom_map_marker is a package that turns runtime widgets into map marker icons.

https://github.com/IbrahimTabba/custom_map_markers/blob/master/example/images/custom-map-markers.png?raw=true

Features

this package providers the following features:

  • Ability to create runtime map markers using flutter widgets.
  • Capture Images of any list of widgets.

Getting started

First, add custom_map_markers as a dependency in your pubspec.yaml file.

dependencies:
  custom_map_markers: ^0.0.1

Usage

  1. Wrap your GoogleMaps widget with CustomGoogleMapMarkerBuilder.
  2. Define each marker and its custom widget in customMarkers
  3. Once custom markers are ready they will be passed as Set<Marer> in builder function.
final locations = const [  
  LatLng(37.42796133580664, -122.085749655962),  
  LatLng(37.41796133580664, -122.085749655962),  
];  

CustomGoogleMapMarkerBuilder(  
  customMarkers: [  
  MarkerData(  
        marker: Marker(  markerId: const MarkerId('id-1'), position: locations[0]),  
		child: _customMarker('A', Colors.black)),  
  MarkerData(  
        marker: Marker(  markerId: const MarkerId('id-2'), position: locations[1]),  
		child: _customMarker('B', Colors.red)),    
  ],  
  builder: (BuildContext context, Set<Marker>? markers) {  
    if (markers == null) {  
      return const Center(child: CircularProgressIndicator());  
  }  
    return GoogleMap(  
      initialCameraPosition: const CameraPosition(  
        target: LatLng(37.42796133580664, -122.085749655962),  
  zoom: 14.4746,  
  ),  
  markers: markers,  
  onMapCreated: (GoogleMapController controller) { },  
  );  
  },  
)

Not a google map user?

if you are not willing to use google maps you can use CustomMapMarkerBuilder that takes List<widgets> instead of List<MarkerData> and returns List<Uint8List> instead of Set<Marker> so you are free to use captured png images as you need.

Notes:
  1. Make sure your marker widget has boundaries.
  2. This package capture a png image of widget markers once they render, if your widget would take more time to render like Image.network you can use screenshotDelay parameter to daley the capture process making sure that your widget is rendered properly before capturing it.
  3. to run project example you have to add a valid google maps key to android/ios directories.

Features and bugs

Please feel free to: