Hola, Amigos! На связи Павел Гершевич, Mobile Team Lead в Amiga. В прошлой части мы рассмотрели базовую кастомизацию виджетов Slider и RangeSlider. Сегодня мы углубимся в детали и изменим внешний вид индикатора у слайдера.

Для этого нам нужно будет создать отдельный класс, который наследуется от SliderComponentShape для Slider или RangeSliderThumbShape для RangeSlider:

class AppThumbShape extends SliderComponentShape
class AppRangeThumbShape extends RangeSliderThumbShape

Сначала, нам нужно задать размер нашего индикатора. В нашем примере он круглый, поэтому идем от радиуса большего круга.

@override
Size getPrefferedSize(bool isEnabled, bool isDiscrete) => Size.fromRadius(8);

Далее наступает момент отрисовать на канвасе. Делается это точно также как и при использовании CustomPaint, только свойства у методов немного другие. Давайте на них посмотрим.

Для SliderComponentShape это:
• PaintingContext, который нам и выдает канвас для отрисовки;
• Offset center - координаты центра канваса;
• activationAnimation и enableAnimation - анимации начала взаимодействия и включения / выключения слайдера;
• sliderTheme - тема для получения цветов и всего необходимого, что мы уже настроили ранее;

Остальные параметры могут быть не настолько полезны, кроме тех, что используются при отрисовке текста. Например, выбранного значения.

Для RangeSliderThumbShape добавляются:
• bool isOnTop - показывает, находится ли этот индикатор над другим;
• Thumb thumb - какой это именно индикатор - в начале или в конце интервала.

Давайте нарисуем наш индикатор для обычного Slider:

@override
void paint(
  PaintingContext context,
  Offset center, {
  required Animation<double> activationAnimation,
  required Animation<double> enableAnimation,
  required bool isDiscrete,
  required TextPainter labelPainter,
  required RenderBox parentBox,
  required SliderThemeData sliderTheme,
  required TextDirection textDirection,
  required double value,
  required double textScaleFactor,
  required Size sizeWithOverflow,
) {
  final canvas = context.canvas;
  final redPaint = Paint()
    ..color = Colors.red
    ..style = PaintingStyle.fill;
  final whitePaint  = Paint()
    ..color = Colors.white
    ..style = PaintingStyle.fill;

  canvas
    ..drawCircle(center, 8, redPaint)
    ..drawCircle(center, 6, whitePaint)
    ..drawCircle(center, 3, redPaint);
}

Теперь нужно добавить наш готовый индикатор в тему:

SliderThemeData(
  …,
  thumbShape: AppThumbShape(),
  rangeThumbShape: AppRangeThumbShape(),
)

В следующей части мы рассмотрим, как кастомизировать полосу со значениями.

Пишите в комментариях, если уже пробовали кастомизировать слайдеры своими руками! 👇