【Flutter】Switchについて

Switchは、Flutterアプリケーションユーザーインタラクションを管理する重要な機能です。簡単な実装例ともに紹介していきます。

参考

• 公式サイト

Switch

Switchは、オン・オフの状態を切り替えるために使用されます。主に設定画面や機能の有効/無効を操作する際に用いられます。多くの場合、ユーザーがタップすることで切り替えることができます。

Switchで提供されている主なプロパティは以下です。

value(bool型)

Switchの現在の状態を表しており、trueの場合はON、falseの場合はFalseはOFFです。

Switchのサンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Switch')),
        body: Center(
          child: MySwitch(),
        ),
      ),
    );
  }
}

class MySwitch extends StatefulWidget {
  @override
  _MySwitchState createState() => _MySwitchState();
}

class _MySwitchState extends State<MySwitch> {
  bool _isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Switch(
      value: _isSwitched,
      onChanged: (bool newValue) {
        setState(() {
          _isSwitched = newValue;
        });
      },
      activeColor: Colors.blue,
      inactiveThumbColor: Colors.grey,
      inactiveTrackColor: Colors.grey[300],
    );
  }
}

SwitchのサンプルコードのUI