How to create a custom trackball widget

Question

Hello,I am trying to create a custom trackball widget that has a translucent background.I have added a builder to my SfCartesianChart trackball behaviour:trackballBehavior: TrackballBehavior(          enable: true,          activationMode: ActivationMode.longPress,          tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,          hideDelay: 30,          builder: (BuildContext context, TrackballDetails trackballDetails) {            final groupInfo = trackballDetails.groupingModeInfo;            if (groupInfo == null) {              return Container();            }            final rowWidgets = groupInfo.points.mapIndexed((index, point) {              final seriesValue = groupInfo.visibleSeriesList[index]                  as ColumnSeries<ChartData, String>;              final color = seriesValue.trackColor;              final seriesName = seriesValue.name;              final yValue = NumberFormat.compact().format(point.yValue);              return Row(                mainAxisAlignment: MainAxisAlignment.start,                mainAxisSize: MainAxisSize.min,                children: [                  Icon(Icons.circle, size: 8, color: color),                  const SizedBox(width: 4),                  Text(                    '$seriesName : $yValue',                    style: const TextStyle(fontSize: 12),                  ),                ],              );            }).toList();            return BlurWidget(              blurAmount: 10,              child: Container(                padding: const EdgeInsets.all(4),                decoration: BoxDecoration(                  color: Colors.white.withOpacity(0.1),                  borderRadius: BorderRadius.circular(5),                ),                child: Column(                  children: rowWidgets,                ),              ),            );          },        ),It works perfectly if I force the container to have a width and height. If they are not defined, nothing appears.Also I can't seem to get the trackColor of the series.Original style trackball on left, desired style on right:  Any ideas?

Marismathan Gurusamy · Accepted Answer

Hi Daniel,Greetings from Syncfusion. Kindly find the response to your queries below,Query 1: It works perfectly if I force the container to have a width and height. If they are not defined, nothing appears.In your case, you have wrapped the rowWidgets (which contains custom trackball) with a Column widget. By default, the column has its mainAxisSize as maximum and it takes the vertical infinity height for rendering. If you set that column’s mainAxisSize as MainAxisSize.min, the rendering of the custom trackball will be fine without setting the height or width for the container.Query 2: Also I can't seem to get the trackColor of the series.Regarding this query, we suggest you set the color for series and use that color for the trackball marker icon too instead of using the track color directly in the trackball builder.We’ve modified the codes which you have shared depending on your requirements. Kindly go through that code snippet below and get back to us if you have further queries. trackballBehavior: TrackballBehavior( enable: true, activationMode: ActivationMode.longPress, tooltipDisplayMode: TrackballDisplayMode.groupAllPoints, hideDelay: 30, builder: (BuildContext context, TrackballDetails trackballDetails) { final groupInfo = trackballDetails.groupingModeInfo; if (groupInfo == null) { return Container(); } final rowWidgets = groupInfo.points.mapIndexed((index, point) { final seriesValue = groupInfo.visibleSeriesList[index] as ColumnSeries; final color = seriesValue.color!; final seriesName = seriesValue.name; final yValue = NumberFormat.compact().format(point.yValue); return Row( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Icon(Icons.circle, size: 8, color: color), const SizedBox(width: 4), Text( '$seriesName : $yValue', style: const TextStyle(fontSize: 12), ), ], ); }).toList(); return BlurWidget( blurAmount: 10, child: Container( padding: const EdgeInsets.all(4), decoration: BoxDecoration( color: Colors.white.withOpacity(0.1), borderRadius: BorderRadius.circular(5), ), child: Column( mainAxisSize: MainAxisSize.min, children: rowWidgets, ), ), ); }, ), series: >[ ColumnSeries( color: Colors.blue, /// Set other required parameters. ), ColumnSeries( color: Colors.amber , /// Set other required parameters. ) ]Thanks,Marismathan G