[Flutter] Switch Widget はON/OFFのトグルスイッチ

ON/OFF機能を実装したい時はSwitch Widget が利用できます

Switch Widget

トグルスイッチ、つまりONに倒れるか、OFFに倒れるどちらかの値を持ちます

class _TestSwitchState extends State<TestSwitch> {
  bool flg = true;

  @override
  Widget build(BuildContext context) {
    return Switch(
      // This bool value toggles the switch.
      value: flg,
      onChanged: (bool value) {
        // This is called when the user toggles the switch.
        setState(() {
          flg = value;
        });
      },
    );
  }
}

class _TestSwitchState extends State<TestSwitch> {

bool flg = true;

@override

Widget build(BuildContext context) {

return Switch(

// This bool value toggles the switch.

value: flg,

onChanged: (bool value) {

// This is called when the user toggles the switch.

setState(() {

flg = value;

});

);

}

Swith の基本的なプロパティは

value: ブール値、オンではtrue、オフでは false を表します
onChanged: コールバック関数で、オンからオフ、あるいはオフからオンに更新される

Switchの他のプロパティとして

Switch(
  value: flg,
  activeColor: Colors.red,
  activeTrackColor: Colors.orange,
  inactiveThumbColor: Colors.black,
  inactiveTrackColor: Colors.lightGreen,
  onChanged: (bool value) {
    setState(() {
      flg = value;
    });
  },
),

Switch(

value: flg,

activeColor: Colors.red,

activeTrackColor: Colors.orange,

inactiveThumbColor: Colors.black,

inactiveTrackColor: Colors.lightGreen,

onChanged: (bool value) {

setState(() {

flg = value;

});

activeColor: Switch ON でのツマミの色
activeThumbImage: ツマミをアイコンにできる
activeTrackColor: ONでのトラック背景色
inactiveThumbColor: Switch OFF でのツマミの色
inactiveTrackColor: OFFでのトラック背景色

尚、nullは無効となり、表示上は非活性化されます

目次
1. サンプルコード
2. 実行結果
3. SwitchListTile

サンプルコード

以上をまとめてみます

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(title: const Text('Switch Widget')),
        body: const Center(
          child: TestSwitch(),
        ),
      ),
    );
  }
}

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

  @override
  State<TestSwitch> createState() => _TestSwitchState();
}

class _TestSwitchState extends State<TestSwitch> {
  bool flg = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Switch(
          value: flg,
          activeColor: Colors.red,
          activeTrackColor: Colors.orange,
          inactiveThumbColor: Colors.black,
          inactiveTrackColor: Colors.lightGreen,
          onChanged: (bool value) {
            setState(() {
              flg = value;
            });
          },
        ),
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text('Selected Value: $flg'),
        ),
      ]
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MainApp());

}

class MainApp extends StatelessWidget {

const MainApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

theme: ThemeData(useMaterial3: true),

home: Scaffold(

appBar: AppBar(title: const Text('Switch Widget')),

body: const Center(

child: TestSwitch(),

);

}

class TestSwitch extends StatefulWidget {

const TestSwitch({super.key});

@override

State<TestSwitch> createState() => _TestSwitchState();

}

class _TestSwitchState extends State<TestSwitch> {

bool flg = true;

@override

Widget build(BuildContext context) {

return Column(

children: <Widget>[

Switch(

value: flg,

activeColor: Colors.red,

activeTrackColor: Colors.orange,

inactiveThumbColor: Colors.black,

inactiveTrackColor: Colors.lightGreen,

onChanged: (bool value) {

setState(() {

flg = value;

});

Padding(

padding: const EdgeInsets.all(16.0),

child: Text('Selected Value: $flg'),

]

);

}

実行結果

　<br>

SwitchListTile

Switch にテキスト、ListTileを追加したWidgetです
Iconなども設定しました

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(title: const Text('SwitchListTile')),
        body: const Center(
          child: TestSwitch(),
        ),
      ),
    );
  }
}

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

  @override
  State<TestSwitch> createState() => _TestSwitchState();
}

class _TestSwitchState extends State<TestSwitch> {
  bool flg = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        SwitchListTile(
          title: const Text('Toggle switch'),
          subtitle: const Text('Switch Listtile'),
          secondary: const Icon(Icons.notifications),
          value: flg,
          activeColor: Colors.red,      
          activeTrackColor: Colors.orange,
          inactiveThumbColor: Colors.black,
          inactiveTrackColor: Colors.lightGreen,
          onChanged: (bool value) {
            setState(() {
              flg = value;
            });
          },
        ),
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text('Selected Value: $flg'),
        ),
      ]
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MainApp());

}

class MainApp extends StatelessWidget {

const MainApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

theme: ThemeData(useMaterial3: true),

home: Scaffold(

appBar: AppBar(title: const Text('SwitchListTile')),

body: const Center(

child: TestSwitch(),

);

}

class TestSwitch extends StatefulWidget {

const TestSwitch({super.key});

@override

State<TestSwitch> createState() => _TestSwitchState();

}

class _TestSwitchState extends State<TestSwitch> {

bool flg = true;

@override

Widget build(BuildContext context) {

return Column(

children: <Widget>[

SwitchListTile(

title: const Text('Toggle switch'),

subtitle: const Text('Switch Listtile'),

secondary: const Icon(Icons.notifications),

value: flg,

activeColor: Colors.red,

activeTrackColor: Colors.orange,

inactiveThumbColor: Colors.black,

inactiveTrackColor: Colors.lightGreen,

onChanged: (bool value) {

setState(() {

flg = value;

});

Padding(

padding: const EdgeInsets.all(16.0),

child: Text('Selected Value: $flg'),

]

);

}

　
　
　
References:
Switch class
SwitchListTile class