Pin interactivity

[andreagr]

I was trying to add an "onTap" feature on the pins but the original code of the flutter_logo.dart was built around BoxDecoration, thus not allowing interactivity.

I have rewritten it this way, can it be useful? I'm new to contributions, but i would like to help.

Widget build(BuildContext context) {
    final IconThemeData iconTheme = IconTheme.of(context);
    final double iconSize = size ?? iconTheme.size;
    final MaterialColor logoColors = colors ?? Colors.blue;
    return new GestureDetector(
        onTap: (){print("I am a pin");},
        child: new Container(
            width: iconSize,
            height: iconSize,

            decoration:new BoxDecoration(

              image: new DecorationImage(
                image: new ExactAssetImage('assets/pins/pin.png'),
                fit: BoxFit.contain,

              ),
            )
        )
    );
  }```

[johnpryan]

I'm not sure I understand the change you are suggesting, can you provide some context? We're happy to update / add examples to the example project. Thanks!

[avioli]

FlutterLogo is a Flutter Material Widget. It is not part of flutter_map and changing it's source code is not necessary. Simply wrap it with the GestureDetector as per your suggestion:

// in flutter_map_example/lib/pages/home.dart

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_example/widgets/drawer.dart';
import 'package:latlong/latlong.dart';

class HomePage extends StatelessWidget {
  static const String route = '/';
  Widget build(BuildContext context) {
    var markers = <Marker>[
      new Marker(
        width: 80.0,
        height: 80.0,
        point: new LatLng(51.5, -0.09),
        builder: (ctx) => new Container(
              // child: new FlutterLogo(), // <--- used to be this
              child: new GestureDetector( // <--- convert to this and the rest below
                onTap: () {
                  print('I am a pin');
                },
                child: new FlutterLogo(),
              ),
            ),
      ),
// ... other markers and code

[johnpryan]

@andreagr Did this work for you?

[andreagr]

I didn't switch to the solution that avioli wrote, I intended to create an alternative to FlutterLogo that had native ontap options. I reckon avioli's solution allows to have the same result with a different approach.

I did that change in order to be able to implement infobox and custom infobox like in the pic below, as of what i have seen this feature is not available yet. Hence my change in creating a custom "FlutterLogo" rather than adding the onTap function at a higher level. (I didn't manage to implement it yet, pic is just for showing what i would like to achieve)

[johnpryan]

Yes one of the features of this library is that a pin can be any widget you want. As @avioli pointed out, in the examples it's a FlutterLogo widget, but it doesn't have to be. It looks like your custom marker can be implemented by using a StatefulWidget that expands when it is tapped.

I'm going to close this for now. Let us know if this doesn't work or you run into problems with the mapping piece!