FlutterでON/OFFスイッチを実装する方法

はじめに

Flutterは、AndroidとiOSの両方のアプリが1つのコードで作れるクロスプラットフォームフレームワークです。この記事では、Flutterアプリケーションでよく使用されるON/OFFスイッチの実装方法を紹介します。具体的には、Material DesignのSwitchListTileとiOSスタイルのCupertinoSwitchの2つのウィジェットを使った例を通じて、その使い方とカスタマイズ方法を詳しく解説します。

SwitchListTileの使い方

SwitchListTileウィジェットは、スイッチとラベルが一体となった便利なウィジェットです。このウィジェットを使うことで、ユーザーがスイッチの状態を直感的に理解しやすくなります。以下の例では、スイッチを利用して設定のON/OFFを切り替える方法を説明します。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Switch Demo'),
      ),
      body: SwitchListTile(
        title: Text('Enable Notifications'),
        value: _isSwitched,
        onChanged: (bool value) {
          setState(() {
            _isSwitched = value;
          });
        },
        secondary: const Icon(Icons.notifications),
      ),
    );
  }
}

このコードでは、スイッチの状態は_isSwitched変数で管理され、ユーザーがスイッチを操作するとonChangedコールバックが呼び出され、スイッチの状態が更新されます。

CupertinoSwitchの使い方

CupertinoSwitchはiOSスタイルのスイッチで、FlutterのCupertinoライブラリにあります。このスイッチを使うことで、iOSのネイティブアプリに近い見た目と挙動を実現できます。以下のコードは、CupertinoSwitchを使用した例です。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isSwitched = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cupertino Switch Demo'),
      ),
      body: Center(
        child: CupertinoSwitch(
          value: _isSwitched,
          onChanged: (bool value) {
            setState(() {
              _isSwitched = value;
            });
          },
        ),
      ),
    );
  }
}

この例では、CupertinoSwitchを中央に配置し、スイッチの状態は_isSwitched変数で管理されます。ユーザーがスイッチを切り替えると、onChangedコールバックが呼ばれ、スイッチの状態が更新されます。

やっぱり、チェックボックスよりも、今回紹介したスイッチの方がスマホアプリっぽくていいですね。