【Flutter】Switchの使い方｜アンドロイド風のトグルボタンを実装

2023年3月3日

Flutterのウィジェット「Switch」の使い方を紹介します。

「Switch」を使えばアンドロイド風のトグルボタン（トグルスイッチ）を実装できます。

Switchの使い方

「Switch」に必須なプロパティは「value」と「onChanged」の2つです。

「value」には初期値となるbool値を渡し、「onChanged」では下記コードのように「value」で指定したbool値が切り替わるように「setState」で処理を書きます。

class _MyAppState extends State<MyApp> {
  bool _value = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter')),
        body: Center(
          child: Switch(
            value: _value,
            onChanged: (value) => setState(() => _value = value),
          ),
        ),
      ),
    );
  }
}

ON/OFFの色を変更する

トグルボタンがONの場合のつまみの色は「activeColor」、背景色は「activeColor」で指定し、OFFの場合のつまみの色は「inactiveThumbColor」、背景色は「inactiveTrackColor」で指定できます。

Switch(
  activeColor: Colors.white,
  activeTrackColor: Colors.amber,
  inactiveThumbColor: Colors.blueAccent,
  inactiveTrackColor: Colors.grey,
  value: _value,
  onChanged: (value) => setState(() => _value = value),
),

サイズ変更する

サイズ変更するには「Transform.scale」を使用します。

Transform.scale(
  scale: 2,
  child: CupertinoSwitch(
    value: _value,
    onChanged: (value) => setState(() => _value = value),
  ),
),

サンプルコード

import 'package:flutter/material.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  bool _value = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter')),
        body: Center(
          child: Switch(
            activeColor: Colors.white,
            activeTrackColor: Colors.amber,
            inactiveThumbColor: Colors.blueAccent,
            inactiveTrackColor: Colors.grey,
            value: _value,
            onChanged: (value) => setState(() => _value = value),
          ),
        ),
      ),
    );
  }
}

以上です。

合わせて読みたい

参考サイト

https://api.flutter.dev/flutter/material/Switch-class.html