【Flutter】Sliderのスライド開始時・終了時に処理を実行

Sliderでスライドを開始または終了時に実行する処理を指定する方法を紹介します。

今回はSlideronChangeStartonChangeEndを使用していきます。

\ 世界最大級のオンライン学習サービス /

目次

onChangeStart|スライド開始時に処理を実行

Slider(
  value: _value,
  min: 0,
  max: 100,
  onChangeStart: (initialValue) => print('開始時の値:$initialValue'),
  onChanged: (value) => setState(() {
    _value = value;
  }),
),

onChangeStartでスライド開始時に実行する処理を指定できます。

onChangeEnd|スライド終了時に処理を実行

Slider(
  value: _value,
  min: 0,
  max: 100,
  onChanged: (value) => setState(() {
    _value = value;
  }),
  onChangeEnd: (lastValue) => print('終了時の値:$lastValue'),
),

onChangeEndでスライド終了時に実行する処理を指定できます。

onChangedは値が更新される度に処理を実行

Slider(
  value: _value,
  min: 0,
  max: 100,
  onChanged: (value) => setState(() {
    _value = value;
  }),
),

onChangedではスライダーの値が更新される度に処理を実行できます。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _value = 50;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FlutterZero')),
        body: Center(
          child: Slider(
            value: _value,
            min: 0,
            max: 100,
            divisions: 10,
            onChangeStart: (initialValue) => print('開始時の値:$initialValue'),
            onChanged: (value) => setState(() {
              _value = value;
            }),
            onChangeEnd: (lastValue) => print('終了時の値:$lastValue'),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次