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 для лучшего позиционирования на экране.

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

Hola, Amigos! Сегодня посмотрим на один пакет, который может быть полезен в разработке - paged_vertical_calendar.

Он выводит календарь непрерывным вертикальным списком вместо одного месяца переключением. Это полезно в таких случаях:
⭕️ Нужно показать сразу несколько месяцев;
⭕️ Есть выбор интервала дат, которые могут быть в разных месяцах;
⭕️ Нужен другой UX, чем стандартный.

Давайте разберем его базовое использование:

PagedVerticalCalendar(
  minDate: DateTime.now().subtract(Duration(days 365)),
  maxDate: DateTime.now().add(Duration(days 365)),
  initialDate: DateTime.now().add(Duration(days 3)),
  invisibleMonthsThreshold: 1,
  startWeekWithSunday: true,
  onMonthLoaded: (year, month) {
    // on month widget load 
  },
  onDayPressed: (value) {
    // on day widget pressed   
  },
  onPaginationCompleted: (direction) {
    // on pagination completion
  },
);

Пройдемся по его параметрам:
• minDate и maxDate помогают нам сделать календарь не бесконечным;
• initialDate - дата начального месяца, который будет показан пользователю посередине списка;
• invisibleMonthThreshold - количество месяцев, которые пользователь не видит, но они просчитываются для дальнейшего отображения;
• startWeekWithSunday - полезное свойство, если приложение работает в странах, где неделя начинается с воскресенья, а не с понедельника;
• onMonthLoaded, onPaginationCompleted - обратные вызовы, которые помогают подгружать данные, если это нужно;
• onDayPressed - обработка нажатия на какой-либо день.

Так как это все-таки список, то ему доступны еще параметры, которые есть у других похожих виджетов - controller, physics, addAutomaticKeepAlives и reverse.

Но самое интересное и важное, что такой календарь можно максимально кастомизировать под себя следующими параметрами:
• dayAspectRatio - помогает задать соотношение сторон для виджета дня;
• weekdaysToHide - скрывает дни недели, если нужно показать только определенные. Например, только рабочие дни;
• listPadding - позволяет задать отступы у списка;
• monthBuilder - позволяет кастомизировать шапку месяца под себя;
• dayBuilder - позволяет кастомизировать отображение дня на календаре.

Рассказывайте, решали ли уже подобные задачи и пользовались ли этим пакетом в своих проектах?

Дайджест июля

Hola, Amigos! Собрали в одну подборку все полезные посты июля, которые вы могли пропустить. Выбирайте, что интересно, и переходите по ссылкам для полезного выходного чтива:

🔴Организация импортов в проекте;
🔴Обзоры виджетов OverflowBar и SliverMainAxisGroup;
🔴Кастомизация виджета Slider - Часть 1. Часть 2. Часть 3;
🔴Правила статического анализа;
🔴Обзор пакета paged_vertical_calendar.

Всем хорошего кода!