How to add custom info window flutter

Question

I want to add this custom widget to my marker. I have designed the widget but I don't know how to position it on the marker.

How do I customise it like that to always appear on the info window position. Its wrapped in a positioned widget but I can't get to place it on the info window position.

Stack(
        children: [
          AnimatedPositioned(
            bottom: 0.0,
            duration: Duration(milliseconds: 200),
            child: Container(
              padding: EdgeInsets.only(top:
              30,left: 15,
                  right: 15,bottom: 10),
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      topRight: Radius.circular(0),
                      topLeft: Radius.circular(0),
                      bottomRight: Radius.circular(5),
                      bottomLeft: Radius.circular(5))),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    '500 USD',
                    style: TextStyle(
                      fontWeight: FontWeight.w600,
                      fontFamily: 'Roboto',
                      color: customBlue,
                      fontSize: _sizeConfig.textSize(
                        context,
                        Converters.configSize(14),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  RatingBar.builder(
                    initialRating: 3.5,
                    unratedColor: Colors.grey
                        .withOpacity(0.5),
                    minRating: 1,
                    allowHalfRating: true,
                    itemSize: 20,
                    direction: Axis.horizontal,
                    itemCount: 5,
                    itemPadding: EdgeInsets.symmetric(horizontal: 0.0),
                    itemBuilder: (context, _) => Icon(
                      Icons.star,
                      color: customRed,
                    ),
                  ),
                ],
              ),
              width: 163,
            ),
          )
        ],
      ),

user_6918596 · Answer

Please use cutsom packages

custom_info_window: ^1.0.1

clippy_flutter 2.0.0

Stack(
      children: [
          markers: _markers,
          myLocationEnabled: true,
          zoomControlsEnabled: false,
          gestureRecognizers: {
            Factory(
                () => ScaleGestureRecognizer()),
          }, 
        ),
        CustomInfoWindow(
          controller: _customInfoWindowController,
          height: 150,
          width: 150,
          offset: 50,
        ),
      ],
    ),

    _markers.add(
  Marker(
    markerId: const MarkerId("marker_id"),
    position: _latLng,
    onTap: () {
      _customInfoWindowController.addInfoWindow!(
        Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Bevel(
              cutLength: 10,
              child: Container(
                width: 120.0,
                height: 140.0,
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(6)),
    ],),

user_6747344 · Answer

Please try custom_info_window. It is a package that allows widget based custom info window for google_maps_flutter. By using this, you will be able to move your widget like info window on the top of the map's marker.

user_11073961 · Answer

There are no easy apis to use your widget as markers in the google maps plugin.

But there are some tricks. You should export the widget to the image and pass it through BitmapDescriptor.fromBytes.

Useful links how to do it:

Widget to Image

Pass widget converted to Image to Google map

If it seems like boilerplate code, you can use the flutter_map plugin by leaflet

flutter_map

How to add custom info window flutter

3 Answers