【Flutter】Sliderを垂直(縦方向)に表示する

2023年7月21日

FlutterのSliderを垂直(縦方向)に表示する方法を紹介します。

Sliderの基本的な使い方、知っておきたい基本プロパティのまとめ記事はこちら↓

あわせて読みたい

【Flutter】Sliderの使い方｜スライダーを左右に移動させて数値を選択 FlutterのSliderウィジェットの用途と使い方のまとめ記事です。本記事ではSliderのサンプルコードを使いながら基本的な使い方、知っておきたい基本プロパティを解説して…

Slider(スライダー)を垂直に表示する方法

スライダーを垂直に表示するにはRotatedBox()のchildでSliderをラップし、quarterTurnsの引数に「3」を渡します。

double _value = 50;

RotatedBox(
  quarterTurns: 3,
  child: Slider(
    value: _value,
    min: 0,
    max: 100,
    onChanged: (value) {
      setState(() {
        _value = value;
      });
    },
  ),
)

アウトプット（左側）

サンプルコード

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: Scaffold(
        appBar: AppBar(title: const Text('Flutter')),
        body: const SliderExample(),
      ),
    );
  }
}

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

  @override
  State<SliderExample> createState() => _SliderExampleState();
}

class _SliderExampleState extends State<SliderExample> {
  double _value = 50;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RotatedBox(
        quarterTurns: 3,
        child: Slider(
          value: _value,
          min: 0,
          max: 100,
          onChanged: (value) {
            setState(() {
              _value = value;
            });
          },
        ),
      ),
    );
  }
}