Заказать мобильную разработку: https://amiga.ru//?utm_source=tg
Заказать рекламу в канале @amiga_agency_bot
Новости Flutter-разработки, дайджесты мероприятий, личный опыт.
Post #614
1.1K
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 для лучшего позиционирования на экране.Рассказывайте в комментариях, кастомизацию каких виджетов хотели бы увидеть? 🙂
- 👌 2
- 🔥 1
