Code Monkey home page Code Monkey logo

custom_marker's Introduction

overview

A package to convert Widget, Local image, Netwok image, Svg file to BitmapDescriptor which can use in google_maps_flutter icon marker.

Get started

Add dependency

dependencies:
  marker_icon: ^1.0.0

Add rounded marker icon with border from network image:

 onPressed: () async {
  markers.add(
  Marker( 
  icon: await MarkerIcon.downloadResizePictureCircle(
  'https://thegpscoordinates.net/photos/la/tehran_iran_5u679ezi8f.jpg',
   size: 150,
   addBorder: true,
   borderColor: Colors.white,
   borderSize: 15),
      ),
     );
   }

1. All other functions work the same above except widget to marker.

Widget To Marker

MyMap class hold your googleMap widget:

class MyMap extends StatefulWidget {
  const WidgetToMarker({Key? key}) : super(key: key);
  @override
  _WidgetToMarkerState createState() => _WidgetToMarkerState();
}
class _WidgetToMarkerState extends State<WidgetToMarker> {

  Set<Marker> _markers = <Marker>{};
  
  // declare a global key   
  final GlobalKey globalKey = GlobalKey();
  
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          body: Stack(
            children: [
            
              // you have to add your widget in the same widget tree
              // add your google map in stack
              // declare your marker before google map
              // pass your global key to your widget
              
              MyMarker(globalKey),
              
              Positioned.fill(
                child: GoogleMap(
                  initialCameraPosition: CameraPosition(
                      target: LatLng(32.4279, 53.6880), zoom: 15),
                  markers: _markers,
                ),
              ),
            ],
          ),
          floatingActionButton: FloatingActionButton.extended(
            label: FittedBox(child: Text('Add Markers')),
            onPressed: () async {
            
              // call widgetToIcon Function and pass the same global key
              
              _markers.add(
                Marker(
                  markerId: MarkerId('circleCanvasWithText'),
                  icon: await MarkerIcon.widgetToIcon(globalKey),
                  position: LatLng(35.8400, 50.9391),
                ),
              );
              setState(() {});
            },
          ),
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerFloat,
        ),
      ],
    );
  }
}

MyMarker class hold your widget that you want convert it to marker icon:

class MyMarker extends StatelessWidget {
  // declare a global key and get it trough Constructor

  MyMarker(this.globalKeyMyWidget);
  final GlobalKey globalKeyMyWidget;

  @override
  Widget build(BuildContext context) {
    // wrap your widget with RepaintBoundary and
    // pass your global key to RepaintBoundary
    return RepaintBoundary(
      key: globalKeyMyWidget,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            width: 250,
            height: 180,
            decoration:
                BoxDecoration(color: Colors.black, shape: BoxShape.circle),
          ),
          Container(
              width: 220,
              height: 150,
              decoration:
                  BoxDecoration(color: Colors.amber, shape: BoxShape.circle),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    Icons.accessibility,
                    color: Colors.white,
                    size: 35,
                  ),
                  Text(
                    'Widget',
                    style: TextStyle(color: Colors.white, fontSize: 25),
                  ),
                ],
              )),
        ],
      ),
    );
  }
}

Now we have a marker from our custom widget

Functions:

  • widgetToMarker : an icon marker from your custom widget.
  • svgAsset : a svg icon marker from your asset folder.
  • pictureAsset : a picture(png,jpeg,etc...) icon marker from your asset folder.
  • pictureAssetWithCenterText : a picture(png,jpeg,etc...) icon marker from your asset folder With text.
  • circleCanvasWithText : a circle canvas with center text.
  • downloadResizePicture : a picture(png,jpeg,etc...) icon marker from internet.
  • downloadResizePictureCircle : a rounded picture(png,jpeg,etc...) icon marker with border from internet.

custom_marker's People

Contributors

nmolaei7878 avatar mmolaei7878 avatar danyialkhan avatar trunghieuvn avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.