Draft: add FlDotImagePainter for custom image dot markers

[InsoooooooooJANG]

🚧 Draft: Add FlDotImagePainter for custom image dot markers

Status: Work in Progress - Seeking early feedback

Description

This PR adds FlDotImagePainter, a new implementation of FlDotPainter that allows users to display custom images as dot markers on line charts, instead of the default circle, square, or cross shapes.

Motivation

Currently, fl_chart only supports basic geometric shapes for dot markers. Many users want to display custom icons or images (e.g., profile pictures, product icons) as data point markers.

Screenshots

Implementation Details

Core Changes

• FlDotImagePainter class (lib/src/chart/base/axis_chart/axis_chart_data.dart)
  • Extends FlDotPainter to support image rendering
  • Includes loadImageFromAsset() helper for loading images
  • Images must be pre-loaded due to synchronous draw() method

Example

• LineChartSample14 demonstrates the usage
• Shows how to load images asynchronously before chart creation
• Includes comprehensive comments for contributors

Usage Example

// Pre-load the image
final image = await FlDotImagePainter.loadImageFromAsset('assets/dot.png');
final painter = FlDotImagePainter(image: image, size: 20.0);

// Use in chart
LineChart(
  LineChartData(
    lineBarsData: [
      LineChartBarData(
        dotData: FlDotData(
          show: true,
          getDotPainter: (spot, percent, barData, index) => painter,
        ),
      ),
    ],
  ),
)

Related Issue

[Feature Request] Add FlDotImagePainter to support custom image dot markers

[imaNNeo]

loadImageFromAsset doesn't belong in the painter.
A static method on a painter that does rootBundle.load() and instantiateImageCodec() mixes asset loading with rendering. This should be the user's responsibility.
They load the image however they want (asset, network, generated) and pass the Image object in. The static helper could live in an example or utility, but not in the library's core data class.

[imaNNeo]

btw, it seems instantiateImageCodec() is deprecated in Flutter 3.x.
I get this warning as well:
Warning: In index.html:92: "FlutterLoader.loadEntrypoint" is deprecated. Use "FlutterLoader.load" instead. See https://docs.flutter.dev/platform-integration/web/initialization for more details.

So please make sure you're using the new approach to load the image

[imaNNeo]

Please use canvasWrapper.drawImage() instead of paintImage. This way, we keep the consistency and testability. Just like here:

fl_chart/lib/src/chart/base/axis_chart/axis_chart_painter.dart

Lines 296 to 305 in c83aa90

	if (line.image != null) {
	final centerX = line.image!.width / 2;
	final centerY = line.image!.height / 2;
	final centeredImageOffset = Offset(centerX, to.dy - centerY);
	canvasWrapper.drawImage(
	line.image!,
	centeredImageOffset,
	_imagePaint,
	);
	}

[imaNNeo]

I think we don't need these kinds of comments. Please remove the unnecessary comments.

[imaNNeo]

You also need to write some unit-tests in the end.