🧩Slider

Что такое Slider

Slider в Flutter — это элемент интерфейса, который позволяет пользователю выбирать значение из диапазона, перемещая ползунок. Это как регулировка громкости на радиоприемнике: вы можете перетаскивать ползунок влево или вправо, чтобы увеличить или уменьшить громкость.

Пример использования

Вот простой пример, как использовать Slider в приложении Flutter:

import 'package:flutter/material.dart';

class SliderExample extends StatefulWidget {
  const SliderExample({super.key});

  @override
  _SliderExampleState createState() => _SliderExampleState();
}

class _SliderExampleState extends State<SliderExample> {
  double _sliderValue = 0.5; // Текущее значение ползунка

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Slider Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Slider(
              value: _sliderValue, // Текущее значение
              onChanged: (double value) {
                setState(() {
                  _sliderValue = value; // Обновление значения ползунка
                });
              },
              min: 0.0, // Минимальное значение
              max: 1.0, // Максимальное значение
              divisions: 10, // Разделения для более точного выбора
              label: '${(_sliderValue * 100).round()}%', // Метка для отображения текущего значения
              activeColor: Colors.blue, // Цвет активной части ползунка
              inactiveColor: Colors.grey, // Цвет неактивной части ползунка
            ),
            Text('Value: ${(_sliderValue * 100).round()}%'), // Отображение текущего значения
          ],
        ),
      ),
    );
  }
}

Как работает код

1. Slider: Основной виджет, представляющий ползунок.

2. value: Значение ползунка, которое будет отображаться. Оно должно находиться в диапазоне между min и max.

3. onChanged: Функция, вызываемая при изменении значения ползунка. Здесь мы обновляем значение, чтобы отобразить изменения.

4. setState: Метод, который обновляет интерфейс, когда значение изменяется.

5. min: Минимальное значение ползунка.

6. max: Максимальное значение ползунка.

7. divisions: Определяет, на сколько частей ползунок будет разделен, что позволяет пользователю выбирать только определенные значения.

8. label: Метка, отображающая текущее значение.

Зачем это нужно

Slider полезен в различных сценариях, например:

• Регулировка громкости или яркости.

• Выбор значений, таких как цена или уровень.

• Настройка параметров в приложениях для настройки.

Все настройки Slider

1. required double value

   • Описание: Текущее значение ползунка. Это обязательный параметр.

   • Пример:

     value: _sliderValue // Текущее значение

2. double? secondaryTrackValue

   • Описание: Значение для вторичного трека, если это необходимо. Это значение используется для отображения второго ползунка.

   • Пример:

     secondaryTrackValue: 0.7 // Вторичное значение (опционально)

3. required void Function(double)? onChanged

   • Описание: Функция, вызываемая при изменении значения ползунка. Это обязательный параметр.

   • Пример:

     onChanged: (double value) {
       setState(() {
         _sliderValue = value; // Обновление значения
       });
     }

4. void Function(double)? onChangeStart

   • Описание: Функция, вызываемая, когда начинается изменение значения ползунка.

   • Пример:

     onChangeStart: (double value) {
       print('Начало изменения: $value'); // Обработка начала изменения
     }

5. void Function(double)? onChangeEnd

   • Описание: Функция, вызываемая, когда изменено значение ползунка.

   • Пример:

     onChangeEnd: (double value) {
       print('Изменение закончено: $value'); // Обработка конца изменения
     }

6. double min = 0.0

   • Описание: Минимальное значение ползунка. По умолчанию 0.0.

   • Пример:

     min: 0.0 // Минимальное значение

7. double max = 1.0

   • Описание: Максимальное значение ползунка. По умолчанию 1.0.

   • Пример:

     max: 1.0 // Максимальное значение

8. int? divisions

   • Описание: Определяет, на сколько частей ползунок будет разделен. Позволяет выбрать только определенные значения.

   • Пример:

     divisions: 10 // Разделение на 10 частей

9. String? label

   • Описание: Метка, отображающая текущее значение ползунка.

   • Пример:

     label: '${(_sliderValue * 100).round()}%' // Текущая метка

10. Color? activeColor

    • Описание: Цвет активной части ползунка.

    • Пример:

      activeColor: Colors.blue // Цвет активной части

11. Color? inactiveColor

    • Описание: Цвет неактивной части ползунка.

    • Пример:

      inactiveColor: Colors.grey // Цвет неактивной части

12. Color? secondaryActiveColor

    • Описание: Цвет активной части вторичного трека.

    • Пример:

      secondaryActiveColor: Colors.green // Цвет вторичного активного трека

13. Color? thumbColor

    • Описание: Цвет ползунка (кружка), который можно перемещать.

    • Пример:

      thumbColor: Colors.red // Цвет ползунка

14. WidgetStateProperty<Color?>? overlayColor

    • Описание: Цвет наложения при взаимодействии с ползунком.

    • Пример:

      overlayColor: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
        if (states.contains(MaterialState.hovered)) {
          return Colors.blue.withOpacity(0.5); // Цвет наложения при наведении
        }
        return null; // По умолчанию
      }),

15. MouseCursor? mouseCursor

    • Описание: Курсор мыши при наведении на ползунок.

    • Пример:

      mouseCursor: SystemMouseCursors.click // Курсор при наведении

16. String Function(double)? semanticFormatterCallback

    • Описание: Функция для форматирования значения для вспомогательных технологий, таких как экранные читалки.

    • Пример:

      semanticFormatterCallback: (double value) => 'Текущее значение: ${value.toStringAsFixed(1)}'

17. FocusNode? focusNode

    • Описание: Узел фокуса для управления фокусом этого ползунка.

    • Пример:

      focusNode: FocusNode() // Указатель на узел фокуса

18. bool autofocus = false

    • Описание: Указывает, должен ли ползунок получать фокус автоматически при создании.

    • Пример:

      autofocus: true // Включить автофокус

19. SliderInteraction? allowedInteraction

    • Описание: Определяет, какие взаимодействия разрешены с ползунком (например, только по клику или перетаскиванию).

    • Пример:

      allowedInteraction: SliderInteraction.drag // Разрешить только перетаскивание

Заключение

Slider — это мощный инструмент для выбора значений в вашем приложении Flutter. Он предоставляет множество возможностей для настройки, чтобы соответствовать стилю вашего приложения и обеспечивать удобный пользовательский интерфейс. Вы можете управлять его состоянием, настраивать цвета, взаимодействия и отображение значений, создавая тем самым интуитивно понятный интерфейс.