Как изменить цвет метки слайдера во Flutter?

Можно ли изменить цвет метки слайдера во Flutter?

В конструкторе класса Slider такого поля нет.

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
0
7 687
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Я обнаружил, что это указано в классе Slider над полем label.

The label is rendered using the active [ThemeData]'s [ThemeData.accentTextTheme.bodyText2] text style.

При создании виджета App необходимо указать accentTextTheme и поле bodyText2.

return MaterialApp(
  theme: ThemeData(
    accentTextTheme: TextTheme(bodyText2: TextStyle(color: Colors.white)),
  ),
  home: MyHomePage(),
);

body2 устарел. Вместо этого используйте bodyText2

Amin Memariani 08.08.2020 00:07
Ответ принят как подходящий

это один из способов сделать это, но это изменит всю россыпь, где accentTextTheme это используется, вы можете использовать это:

   Theme(
      child: yourSlide,
      data: Theme.of(context).copyWith(
        accentTextTheme: TextTheme(bodyText2: TextStyle(color: Colors.white)),
      ),
    )

Таким образом, вы измените только тот виджет, который вам нужно изменить, а не весь accentTextTheme, который можно использовать для других, которые, возможно, вам не нужно менять.

body2 устарел. вместо этого используйте bodyText2.

Amin Memariani 08.08.2020 00:08

В соответствии с API Flutter используйте valueIndicatorColor, который является свойством SliderThemeData. Как упомянуто здесь, SliderClass а здесь SliderThemeДанные

Простая демонстрация: установить локальные переменные:

double feet = 0;
String heightInFeet = "null";
int height = 180;

и вот ваше индивидуальное решение для слайдера

SliderTheme(
                  data: SliderTheme.of(context).copyWith(
                    valueIndicatorColor: Colors.blue, // This is what you are asking for
                    inactiveTrackColor: Color(0xFF8D8E98), // Custom Gray Color
                    activeTrackColor: Colors.white,
                    thumbColor: Colors.red,
                    overlayColor: Color(0x29EB1555),  // Custom Thumb overlay Color
                    thumbShape:
                        RoundSliderThumbShape(enabledThumbRadius: 12.0),
                    overlayShape:
                        RoundSliderOverlayShape(overlayRadius: 20.0),
                  ),
                  child: Slider(
                    value: height.toDouble(),
                    onChanged: (double newValue) {
                      setState(() {
                        height = newValue.toInt();
                        feet = (height / 30.48);
                        heightInFeet = feet.toStringAsFixed(2) + " feet";
                      });
                    },
                    divisions: 220,
                    label: heightInFeet,
                    min: 90.0,
                    max: 305.0,
                  ),
                )

и если вы хотите изменить цвет текста, шрифт текста и т. д., используйте

valueIndicatorTextStyle: TextStyle(
                        color: Colors.amber, letterSpacing: 2.0)

в SliderThemeData

Используйте SliderThemeData:

sliderTheme: ThemeData.dark().sliderTheme.copyWith(
  valueIndicatorColor: _primaryColor,
  valueIndicatorTextStyle: TextStyle(
    backgroundColor: Colors.transparent
  )
)

Другие вопросы по теме