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

Для этого нам так же, как и с индикатором, нужно создать отдельный класс, наследуемый от SliderTrackShape для Slider и RangeSliderTrackShape для RangeSlider.

Данные классы отличаются от тех, которые мы применяли в прошлой части, так как вместо метода на получение размера, тут есть метод на получение объекта Rect. Для примера выберем самое простое - задать только размеры:

@override
Rect getPreferredRect({
  required RenderBox parentBox,
  Offset offset = Offset.zero,
  required SliderThemeData sliderTheme,
  bool isEnabled,
  bool isDiscrete
}) {
  return Rect.fromTLWH(0, 0, parentBox.constraints.width, 8.0);
}

После чего переопределяем метод для отрисовки. В нашем примере полоса всегда будет одинаковой, поэтому мы рисуем только один RRect:

@override
void void paint(
  PaintingContext context,
  Offset offset, {
  required RenderBox parentBox,
  required SliderThemeData sliderTheme,
  required Animation<double> enableAnimation,
  required Offset thumbCenter,
  Offset? secondaryOffset,
  bool? isEnabled,
  bool? isDiscrete,
  required TextDirection textDirection
}) {
  final trackRect = Rect.fromTLWH(0, 0, parentBox.constraints.width, 8.0);
  final trackRRect = RRect.fromRectAndRadius(trackRect, Radius.circular(4);

  final redPaint = Paint()
    ..color = Colors.red
    ..strokeWidth = 2.0
    ..style = PaintingStyle.stroke;
  final whitePaint = Paint()
    ..color = Colors.white
    ..style = PaintingStyle.fill;

  canvas
    ..drawRRect(trackRRect, whitePaint)
    ..drawRRect(trackRRect, redPaint);
}

Если вы хотите показывать часть полосы до индикатора одним стилем, а после - другим, то на помощь придет свойство thumbCenter. Оно означает координаты центра индикатора:

final trackRectBefore = Rect.fromPoints(
  Offset.zero,
  Offset(thumbCenter.dx, 8.0),
);
final trackRectAfter = Rect.fromPoints(
  Offset(thumbCenter.dx, 0),
  Offset(parentBox.constraints.width, 8.0),
);

Для RangeSliderTrackShape будут доступны два таких свойства - startThumbCenter и endThumbCenter. С их помощью можно разделить трек на три зоны: неактивную область до начального индикатора, активную область между индикаторами и неактивную область после конечного индикатора.

Для того, чтобы применить наш стиль нужно добавить классы к теме:

SliderThemeData(
  …,
  trackShape: AppSliderTrackShape(),
  rangeTrackShape: AppRangeSliderTrackShape(),
)

Небольшая рекомендация от нас - если применяете собственную отрисовку трека, то лучше всего Slider будет оборачивать в SizedBox для лучшего позиционирования на экране.

Рассказывайте в комментариях, кастомизацию каких виджетов хотели бы увидеть? 🙂