소개

Apple Music 스타일의 Cupertino 인터랙티브 슬라이더 위젯

설치

pub.dev: https://pub.dev/packages/interactive_slider

$ flutter pub add interactive_slider

import 'package:interactive_slider/interactive_slider.dart';

1. 기본 사용법

Apple Music 스타일 슬라이더. 터치 시 확장 애니메이션.

InteractiveSlider(
  startIcon: Icon(CupertinoIcons.volume_down),
  endIcon: Icon(CupertinoIcons.volume_up),
  onChanged: (value) => print(value),
)

2. 범위 지정 & 중앙 레이블

min/max로 범위 설정. centerIcon으로 현재 값 표시.

InteractiveSlider(
  min: 0.0,
  max: 100.0,
  centerIcon: Text('${value.toInt()}%'),
  onChanged: (value) => setState(...),
)

3. 색상 커스터마이징

그라디언트 색상 지원. 시각적 피드백 강화.

InteractiveSlider(
  foregroundGradient: LinearGradient(
    colors: [Colors.blue, Colors.purple, Colors.pink],
  ),
  onChanged: (value) => setState(...),
)

4. 실전 예제: 볼륨 조절

음량 조절 UI. 아이콘과 레이블로 직관적 표현.

InteractiveSlider(
  min: 0.0,
  max: 15.0,
  initialProgress: _volume,
  startIcon: Icon(CupertinoIcons.speaker_1),
  centerIcon: Text('${_volume.toInt()}'),
  endIcon: Icon(CupertinoIcons.speaker_3),
  onChanged: (v) => setState(() => _volume = v),
)

5. 커스텀 트랙 모양

RoundedRectSliderTrackShape를 확장하여 트랙 모양 커스터마이징.

InteractiveSlider(
  onChanged: (value) => print(value),
  trackHeight: 8.0,
  thumbRadius: 16.0,
  backgroundColor: Colors.grey[300]!,
  foregroundColor: Colors.blue,
)

6. 애니메이션 커스터마이징

터치 시 확장 애니메이션 속도 및 곡선 조정.

InteractiveSlider(
  onChanged: (value) => setState(() => _value = value),
  animationDuration: Duration(milliseconds: 300),
  animationCurve: Curves.easeInOut,
  startIcon: Icon(Icons.remove),
  endIcon: Icon(Icons.add),
)

7. 수직 슬라이더

수직 방향 슬라이더. RotatedBox로 구현 가능.

RotatedBox(
  quarterTurns: 3,
  child: InteractiveSlider(
    min: 0.0,
    max: 100.0,
    onChanged: (value) => print(value),
    centerIcon: Text('${value.toInt()}'),
  ),
)

8. 접근성 지원

screen reader 지원 및 시맨틱 레이블 추가.

Semantics(
  label: '볼륨 조절 슬라이더',
  value: '${_volume.toInt()} / 15',
  increasedValue: '${(_volume + 1).toInt()}',
  decreasedValue: '${(_volume - 1).toInt()}',
  child: InteractiveSlider(
    min: 0.0,
    max: 15.0,
    initialProgress: _volume,
    onChanged: (v) => setState(() => _volume = v),
  ),
)

9. 제스처 커스터마이징

탭, 드래그 제스처 동작 커스터마이징.

InteractiveSlider(
  onChanged: (value) => print('Changed: $value'),
  onChangeStart: (value) => print('Start: $value'),
  onChangeEnd: (value) => print('End: $value'),
  min: 0.0,
  max: 100.0,
)

10. 실전 예제: 밝기 조절

화면 밝기 조절 UI. Sun 아이콘으로 직관성 강화.

double _brightness = 0.5;

InteractiveSlider(
  min: 0.0,
  max: 1.0,
  initialProgress: _brightness,
  startIcon: Icon(CupertinoIcons.sun_min),
  centerIcon: Text('${(_brightness * 100).toInt()}%'),
  endIcon: Icon(CupertinoIcons.sun_max),
  foregroundGradient: LinearGradient(
    colors: [Colors.yellow[700]!, Colors.orange],
  ),
  onChanged: (value) {
    setState(() => _brightness = value);
    // 화면 밝기 변경
  },
)

11. 실전 예제: 음악 플레이어

재생 위치 표시 및 탐색. Apple Music 스타일.

InteractiveSlider(
  min: 0.0,
  max: _duration.inSeconds.toDouble(),
  initialProgress: _position.inSeconds.toDouble(),
  startIcon: Text('${_formatTime(_position)}'),
  endIcon: Text('${_formatTime(_duration)}'),
  foregroundColor: Colors.red,
  onChanged: (value) {
    _audioPlayer.seek(Duration(seconds: value.toInt()));
  },
)

12. 실전 예제: 색상 선택기

RGB 색상 값 조절. 3개의 슬라이더로 색상 생성.

Column(
  children: [
    InteractiveSlider(
      min: 0.0,
      max: 255.0,
      initialProgress: _red,
      foregroundColor: Colors.red,
      onChanged: (v) => setState(() => _red = v),
    ),
    InteractiveSlider(
      min: 0.0,
      max: 255.0,
      initialProgress: _green,
      foregroundColor: Colors.green,
      onChanged: (v) => setState(() => _green = v),
    ),
    InteractiveSlider(
      min: 0.0,
      max: 255.0,
      initialProgress: _blue,
      foregroundColor: Colors.blue,
      onChanged: (v) => setState(() => _blue = v),
    ),
    Container(
      color: Color.fromRGBO(_red.toInt(), _green.toInt(), _blue.toInt(), 1),
    ),
  ],
)

13. 주의사항

효과적인 슬라이더 사용을 위한 가이드.

// ✅ 적절한 min/max 범위 설정
InteractiveSlider(
  min: 0.0,
  max: 100.0, // 명확한 범위
)

// ✅ centerIcon으로 현재 값 표시
centerIcon: Text('${value.toInt()}'),

// ✅ 그라디언트로 시각적 피드백
foregroundGradient: LinearGradient(
  colors: [Colors.blue, Colors.purple],
)

// ✅ 접근성 고려
Semantics(
  label: '슬라이더 설명',
  child: InteractiveSlider(...),
)

// ❌ 너무 많은 슬라이더 배치 금지
// ❌ 범위 없이 사용 금지

패키지 정보

pub.dev: https://pub.dev/packages/interactive_slider

version: 0.5.1

likes: 126

License: BSD-3-Clause