【Flutter】CupertinoSlider|iOS風のスライダーバーを実装

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

CupertinoSliderを使えばiOS風のスライダーバーを実装できます。

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

目次

CupertinoSliderの使い方

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

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

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

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

CupertinoSlider(
  value: _value,
  min: 0,
  max: 100,
  activeColor: Colors.redAccent,
  thumbColor: Colors.orange,
  onChanged: (value) => setState(() {
    _value = value;
  }),
),

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

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

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

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

サンプルコード

import 'package:flutter/cupertino.dart';
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: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                _value.ceil().toString(),
                style: TextStyle(fontSize: 20),
              ),
              CupertinoSlider(
                value: _value,
                min: 0,
                max: 100,
                divisions: 4,
                activeColor: Colors.redAccent,
                thumbColor: Colors.orange,
                onChanged: (value) => setState(() {
                  _value = value;
                }),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

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