Symbol layer onClick event

[harrybui2804]

I don't show event onClick symbol layer and display image for each position. Here is my code

import 'dart:convert';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_mapbox_gl/flutter_mapbox_gl.dart';

class Example extends StatefulWidget {
  const Example({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _Example();
}

class _Example extends State<Example> {
  Uint8List image;
  Uint8List clusterImage;
  Map<String, Uint8List> images = {};
  MapController _controller; 
  @override
  void initState() {
    super.initState();

    rootBundle.load('assets/images/cat_markers/Other_Icon.png')
      .then((ByteData data){ 
        if(mounted) {
          final _images = images;
          final _image = data.buffer.asUint8List();
          _images['marker_icon'] = _image;
          setState(() { 
            image = _image;
            images = _images;
          });
        }
      });
    rootBundle.load('assets/images/cat_markers/Other_Icon_a.png')
      .then((ByteData data){ 
        if(mounted) {
          final _images = images;
          final _image = data.buffer.asUint8List();
          _images['marker_icon_alt'] = _image;
          setState(() { 
            image = _image;
            images = _images;
          });
        }
      });
    rootBundle.load('assets/images/cat_markers/cluster.png')
      .then((ByteData data) {
        if(mounted) {
          final _clusterImage = data.buffer.asUint8List();
          final _images = images;
          _images['cluster_icon'] = _clusterImage;
          setState(() { 
            clusterImage = _clusterImage;
            images = _images;
          });
        }
      });
  }

  onMapReady(MapController controller) {
    _controller = controller;
    controller.addListener(_onMoveMap);
    
  }

  void _onMoveMap() {
    final position = _controller.cameraPosition;
    print('_onMoveMap $position');
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: MapboxMap(
        onMapReady: onMapReady,
        options: MapOptions(
          styleFromMapbox: MapStyle.light,
          cameraPosition: CameraPosition(
            target: LatLng(
              latitude: 12.099,
              longitude: -79.045,
            ),
            zoom: 3,
          ),
        ),
        layers: <Layer>[
          SymbolLayer(
            id: 'marker',
            sourceId: 'markers'
          ),
          for (int i = 0; i < layers.length; i++)
            SymbolLayer(
              id: 'cluster-$i',
              sourceId: 'markers',
              iconImage: 'cluster_icon',
              filter: i == 0
                ? all(<Expression>[
                    eq(has('point_count'), true),
                    gte(
                      toNumber(get("point_count")),
                      literalInt(layers[i].value),
                    )
                  ])
                : all(<Expression>[
                    eq(has('point_count'), true),
                    gte(
                      toNumber(get("point_count")),
                      literalInt(layers[i].value),
                    ),
                    lt(
                      toNumber(get("point_count")),
                      literalInt(layers[i - 1].value),
                    )
                  ]),
            ),
          SymbolLayer(
            id: 'count',
            sourceId: 'markers',
            iconImage: 'cluster_icon',
            textFieldEx: toString(get('point_count')),
            textSize: 12.0,
            textColor: Colors.white,
            textIgnorePlacement: true,
            textAllowOverlap: true,
          )
        ],
        sources: <Source>[
          GeoJsonSource(
            id: 'markers',
            geoJson: jsonEncode(
              <String, dynamic>{
                "type": "FeatureCollection",
                "features": <dynamic>[
                  {
                    "type": "Feature",
                    "properties": {
                      "imageName": "marker_icon"
                    },
                    "geometry": {
                      "type": "Point",
                      "coordinates": [
                        -151.5129,
                        63.1016
                      ]
                    }
                  },
                  {
                    "type": "Feature",
                    "properties": {
                        "imageName": "marker_icon_alt"
                    },
                    "geometry": {
                      "type": "Point",
                      "coordinates": [
                        -150.4048,
                        63.1224
                      ]
                    }
                  },
                  {
                    "type": "Feature",
                    "properties": {
                      "imageName": "marker_icon_alt"
                    },
                    "geometry": {
                      "type": "Point",
                      "coordinates": [
                        -151.3597,
                        63.0781
                      ]
                    }
                  },
                  {
                    "type": "Feature",
                    "properties": {
                        "imageName": "marker_icon_alt"
                    },
                    "geometry": {
                      "type": "Point",
                      "coordinates": [
                        -118.497,
                        34.299667
                      ]
                    }
                  },
                  {
                    "type": "Feature",
                    "properties": {
                      "imageName": "marker_icon"
                    },
                    "geometry": {
                      "type": "Point",
                      "coordinates": [
                        -87.6901,
                        12.0623,
                        46.41
                      ]
                    }
                  }
                ]
              },
            ),
            options: GeoJsonOptions(
              cluster: true,
              clusterMaxZoom: 14,
              clusterRadius: 50,
            ),
          )
        ],
        images: images,
      ),
    );
  }
}

const List<Item> layers = <Item>[
  Item(150, Color(0xFFF74E4E)),
  Item(1, Color(0xFF33C377)),
  Item(0, Color(0xFF1E8CAB)),
];

class Item {
  const Item(this.value, this.color);

  final int value;
  final Color color;
}

Now i want to show image for SymbolLayer with id: 'marker' with imageName in properties for each point.
Pls help me.
Thanks!

[harrybui2804]

I've been show custom image for each points with code

SymbolLayer(
            id: 'marker',
            sourceId: 'markers',
            iconImageEx: get('imageName')
          ),

Now only event click Symbol layer