【Flutter】Slider|シンプルなスライダーバーを実装

今回はSliderの基本的な使い方を紹介します。

Sliderを使えばスライダーバーを実装できます。

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

目次

Sliderの使い方

//今回Sliderで使用する変数
double _value = 50;
Slider(
  value: _value,
  min: 0,
  max: 100,
  onChanged: (value) => setState(() {
    _value = value;
  }),
),

valueにスライダーバーで扱うdouble型の変数を渡しonChangedで値を更新します。onChangedではスライダーでドラッグして値が変わるたびに処理を実行します。

スライダーバーの最小値、最大値はそれぞれminmaxで指定します。

スライダーバーの色を変更

Slider(
  value: _value,
  min: 0,
  max: 100,
  activeColor: Colors.redAccent,
  inactiveColor: Colors.amber,
  thumbColor: Colors.red,
  onChanged: (value) => setState(() {
    _value = value;
  }),
),

スライダーバーのアクティブ色、背景色、つまみの色はそれぞれactiveColorinactiveColorthumbColorで指定できます。

スライダーバーの目盛りを等間隔で区切る

Slider(
  value: _value,
  min: 0,
  max: 100,
  divisions: 10,
  label: _value.round().toString(),
  onChanged: (value) => setState(() {
    _value = value;
  }),
),

スライダーバーの目盛りを等間隔で区切るにはdivisionsを使用します。

スライダーの値をラベルで表示する場合はlabelを使用します。labelにはString型で値を渡します。

サンプルコード

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,
            activeColor: Colors.redAccent,
            inactiveColor: Colors.amber,
            thumbColor: Colors.red,
            label: _value.round().toString(),
            onChanged: (value) => setState(() {
              _value = value;
            }),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

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