interactive_maps_marker

Description:

interactive maps marker

interactive_maps_marker for Flutter #
Easy to use Animated Maps Markers with detail card. Use it for store or any place locator.
Demo #

Usage #
Add this package to your pubspec.yaml in dependencies: section
dependencies:
interactive_maps_marker: ^0.0.2
copied to clipboard
This package depends upon google_maps_flutter so first setup this by following This Guide
Update dependencies
flutter pub get
copied to clipboard
You can now add a InteractiveMapsMarker widget to your widget tree.
Simple Usage #
In your widget import the package and use InteractiveMapsMarker Widget
Example
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:interactive_maps_marker/interactive_maps_marker.dart';

class ExplorePage extends StatelessWidget {
@override
Widget build(BuildContext context) {

return InteractiveMapsMarker(
items: <MarkerItem>[
MarkerItem(id: 1, latitude: 31.4673274, longitude: 74.2637687),
MarkerItem(id: 2, latitude: 31.4718461, longitude: 74.3531591),
],
center: LatLng(31.4906504, 74.319872),
itemContent: (context, index) {
return Text("Current Item $index");
},
);

}
}
copied to clipboard
Advanced Usage #
Coming Soon
Markers data from a remote server? #
Use this widget inside a stateful widget and update the markers list state with new data. An example can be found in stateful_example.dart file in example project.
Customise with parameters #
You can customise it by passing various parameter values. Details about all parameters is as follows.



Parameter
Type
Default Value
Description




items
List<MarkerItem>
none
List of Markers with type of MarkerItem. This parameter is required and cannot be null.


itemContent
IndexedWidgetBuilder
none
This is builder function which will receive context and index. You must return a Widget which will show on a pre designed container. This is exactly like you use ListView Builder. Not applicable when using itemBuilder


center
LatLng
LatLng(0.0, 0.0)
Center point for initial map display.


zoom
double
12.0
Default zoom value for initial map screen.


itemHeight
double
116.0
Height of your detail item. Not applicable when using itemBuilder


itemPadding
EdgeInsetsGeometry
EdgeInsets.only(bottom: 80.0)
Padding for item detail card. Mainly used for bottom padding.


itemPadding
Alignment
Alignment.bottomCenter
Alignment for content slider.


itemBuilder
IndexedWidgetBuilder
null
If you don't want default container and want to build the bottom widget yourself, you can use this builder instead of itemContent and have full control over UI. This is builder function which will receive context and index. You must return a Widget.


controller
InteractiveMapsController
null
A controller if you want to add the markers later and then call rebuild() or change the index of marker to animate with your action via setCurrentIndex(int index).



Meta #
Atiq Samtia– @AtiqSamtia – [email protected]
Distributed under the MIT license.
https://github.com/atiqsamtia/interactive_maps_marker_flutter
Credits #
Inspired by amazing work from Mohamed Douzane
Github Repo
Medium Post
Contributing #

Fork it (https://github.com/atiqsamtia/interactive_maps_marker_flutter/fork)
Create your feature branch (git checkout -b feature/fooBar)
Commit your changes (git commit -am 'Add some fooBar')
Push to the branch (git push origin feature/fooBar)
Create a new Pull Request