Scrolling canvas 2 direction for Flutter
Hi guys, today, I’ll show you how to create a two-dimensional scroll bar for a canvas. With Flutter, we can easily create custom list-view by only-one canvas.
1. Create list-view canvas:
I n fact, the list-view in video is a canvas. To create it, we need to define a ColorPainter class extends the CustomPainter class and override two methods: paint, shouldRepaint.
- paint: Called whenever the object needs to paint. The given [Canvas] has its coordinate space configured such that the origin is at the top left of the box. The area of the box is the size of the [size] argument.
Now, we need to paint rows (name of color, list color) based on the input of position, size, color, etc. In some cases we need to calculate these values, specifically:

In method paintNameColor, we will define the style, span, and paint names of the colors.

In method paintListColor, we will create a horizontal-list-view by color-squares:

- shouldRepaint: Called whenever a new instance of the custom painter delegate class is provided to the [RenderCustomPaint] object, or any time that a new [CustomPaint] object is created with a new instance of the custom painter delegate class (which amounts to the same thing, because the latter is implemented in terms of the former).

Variables: colors, offsets are input, which determines color, name, position (make scrolling-function).
2. Create color board:
The next, we will create a basic stateful-widget, ColorBoard, which contain our scrolling-canvas. In the state class, we build:

As we see, the CustomerPaint contained by Listener. Here, we focus on onPointerUp, onPointerMove method.
- onPointerUp, we will handle pointer that triggered an [onPointerDown] is no longer in contact with the screen.
- onPointerMove, we will handle pointer that triggered an [onPointerDown] changes position.

Okay, What is onScrollVerical, onScrollHorizontal, resetScrollState, velocity ?? I will show all in my post later.
3. Call color board anywhere
Finally, we can easily build a scrolling-color-board. Of course, it can scroll two directions: ColorBoard(colors: _colors).

And my repository:
Thanks for reading !