スライダーで値を選ぶ

CoddyのFlutterジャーニー「アプリをインタラクティブにする」セクションの一部。レッスン 29/34。

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)),
          ],
        ),
      ),
    );
  }
}