If you do not add the padding parameter (dx and dy), you will get the results on the left (in the above pic) or else if everything is right, you will get the results on the right.

Now if we get to the Paint Method, I want you to think over this:

Some things to notice here:

trackWidth we calculated in the previous method. maxPlayers is the total number of players (which is 100 in case). This is the max field in the slider. defaultPlayers is the default number of players that we want to start with. defaultPlayerWidth is the width in terms of the default players on the slider. currentPosition is the current value of the slider. currentPositionWidth is the width in terms of the current position on the slider.

I want you to breathe again before we start with the next segment.

Thinking Process 4:

We are now ready to build the start of the slider track, the one that is the default. No more thinking required.

Coding Process 4:

Let’s select the colour we want for the default part, nothing difficult:

// calculating the paint

// for the default path (initial width)

final Paint defaultPathPaint = Paint()

..color = sliderTheme.activeTrackColor

..style = PaintingStyle.fill;

Let’s start with the default path segment. We know that we need to draw a rectangle and round it’s left edges.

If were to draw something like this, let’s start from scratch.

The defaultPathWidth will be the left part of the slider. As I told you, we will be drawing a rectangle and then rounding its left edge.

Let’s add a rectangle to the path.

final defaultPathSegment = Path()

..addRect(

Rect.fromPoints(

Offset(trackRect.left, trackRect.top),

Offset(

trackRect.left +

(currentPositionWidth >= defaultPlayerWidth

? defaultPlayerWidth

: currentPositionWidth),

trackRect.bottom),

),

); context.canvas.drawPath(defaultPathSegment, defaultPathPaint);

We added a Rect and with a constructor with two offsets. An offset from top-left to bottom-right. This is how objects are drawn, from top-left to bottom-right. If you can see, I added a condition on the second offset object.

I wanted to draw the left half of the sidebar (the default part) till the current position. If the current position is greater than defaultPlayerWidth, then draw it completely but if not, then draw till the currentPositionWidth.

And this is how it moves:

Let’s round the left-edge:

// calculate the path segment for

// the default width

final defaultPathSegment = Path()

..addRect(

Rect.fromPoints(

Offset(trackRect.left, trackRect.top),

Offset(

trackRect.left +

(currentPositionWidth >= defaultPlayerWidth

? defaultPlayerWidth

: currentPositionWidth),

trackRect.bottom),

),

)

..lineTo(trackRect.left, trackRect.bottom)

..arcTo(

Rect.fromPoints(

Offset(trackRect.left + 5, trackRect.top),

Offset(trackRect.left - 5, trackRect.bottom),

),

-pi * 3 / 2,

pi,

false,

); context.canvas.drawPath(defaultPathSegment, defaultPathPaint);

I added an arc on the left end with arcTo function. You can play with the angles to see how it goes. I chose 5 as the adding and deleting variable in the Offset because it matched what I needed. What it does is, it increases the radius of the arc.

The result is something like this:

And now we are done with the left end of the Slider.

If we were to follow the same footsteps and draw the right end, it would be pretty similar. I played with angles and it got me the results I wanted.

And the results are like this:

Thinking Process 5:

Everything is almost done and we are now left with is drawing the middle section. The middle section has small white and yellow rectangular boxes spread out over the remaining length.

Coding Process 5:

// Calculation for the selected part of the slider track

// other than the default width

final double selectedPathWidth = currentPositionWidth - defaultPlayerWidth;

I decided to take a small constant (selectedPathBarWidth) that we will be using as the width of the small yellow and white boxes and calculate how many of them will be there inside the remaining length.

// Calculation for the selected part of the slider track

// other than the default width

final double selectedPathWidth = currentPositionWidth - defaultPlayerWidth;



for (int i = 0; i < (selectedPathWidth / selectedPathBarWidth).round();

i++) {

paintCustomSelectedPath(

defaultPlayerWidth,

trackRect,

currentPositionWidth,

context,

i,

sliderTheme,

);

}

I created a new method that calculated the number of boxes and required and drew them on the canvas.

/// This method paints the selected path in our

/// required style

void paintCustomSelectedPath(

double defaultPlayerWidth,

Rect trackRect,

double currentPositionWidth,

PaintingContext context,

int index,

SliderThemeData sliderTheme,

) {

// Selected Path

final Paint borderPaint = Paint()

..color = index % 2 == 0 ? Colors.white : sliderTheme.activeTrackColor

..style = PaintingStyle.fill;



final pathSegmentSelected = Path()

..addRect(

Rect.fromPoints(

Offset(

trackRect.left +

defaultPlayerWidth +

(selectedPathBarWidth * index),

trackRect.top,

),

Offset(

trackRect.left +

defaultPlayerWidth +

(selectedPathBarWidth * index) +

selectedPathBarWidth,

trackRect.bottom,

),

),

);



context.canvas.drawPath(pathSegmentSelected, borderPaint);

}

I created a small path segment and drew it on the canvas until the length of the remaining slider was finished. This last method I created is fairly simple.

And now if you run the application, it looks something like this:

And we are done!