슬라이더로 값 선택하기

Coddy Flutter 여정의 앱에 상호작용 추가하기 섹션에 포함된 레슨. 34개 중 29번째.

Slider는 드래그하여 범위에서 숫자를 선택합니다. 스위치처럼 value:를 표시하고 새 값과 함께 onChanged를 호출합니다.

Slider(
  value: _size,
  min: 0,
  max: 50,
  divisions: 5,
  onChanged: (double value) {
    setState(() {
      _size = value;
    });
  },
)

min:과 max:는 양 끝값입니다. divisions:를 지정하면 일정한 간격으로 이동합니다. 0부터 50까지 5개 구간으로 나누면 0, 10, 20, 30, 40, 50이 됩니다. 지정하지 않으면 그 사이의 모든 값을 선택할 수 있습니다. 트랙을 탭해도 해당 위치로 슬라이더가 이동합니다.

값은 항상 double이므로 20.0으로 표시됩니다. _size.round()는 값을 가장 가까운 정수인 int로 반올림하므로 20으로 표시됩니다.

챌린지

쉬움

슬라이더가 움직이도록 하세요. setState를 사용해 슬라이더의 값을 _volume에 저장하세요.
슬라이더 아래에 볼륨을 정수로 표시하세요. Volume: 20으로 표시하고 Volume: 20.0으로 표시하지 마세요.

직접 해보기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double _volume = 20;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sound')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.volume_up, size: 64),
            Slider(
              value: _volume,
              min: 0,
              max: 100,
              divisions: 10,
              onChanged: (double value) {},
            ),
            Text('Volume: ?', style: const TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}