Slider и RangeSlider, чтобы они лучше соответствовали вашему дизайну.Делается это как и внутри самого виджета, так и через тему. Начнём с простого кейса: внешний вид слайдера нас устраивает, но нужно изменить только цветовую схему.
Slider(
… // Основные настройки слайдера
activeColor: Colors.red,
inactiveColor: Colors.blue,
overlayColor: WidgetStatePropertyAll(Colors.green),
);
Эти три параметра позволяют быстро адаптировать внешний вид Slider:
•
activeColor отвечает за цвет активной части полосы — от начального значения до текущей позиции, а также за цвет индикатора выбранного значения;•
inactiveColor задаёт цвет неактивной части полосы;•
overlayColor позволяет перекрасить цвет выделения, которое показывается при перемещении индикатора.Те же настройки доступны и для RangeSlider.
Если нужно применять стили сразу ко всем слайдерам в приложении, удобнее вынести их в тему:
SliderThemeData(
activeTrackColor: Colors.red,
thumbColor: Colors.red,
inactiveTrackColor: Colors.blue,
overlayColor: Colors.green,
)
Как мы видим, свойство
activeColor - разделилось на два: activeTrackColor отвечает за полосу, а thumbColor за индикатор выбранного значения. Кроме этого, тема позволяет кастомизировать и цвета для отключенных виджетов при помощи таких же свойств, только с префиксом disabled.В следующей части поговорим о более глубокой кастомизации — разберём, как создать собственный индикатор выбранного значения для
Slider и RangeSlider.А пока делитесь в комментариях: приходилось ли вам менять стандартный вид этих виджетов? Какие настройки использовали?