【Flutter】Toggle Switchについて

Toggle Switchとは

Toggle Switchは、Flutter用のシンプルなトグルスイッチウィジェットです。
アイコン、幅、色、テキスト、コーナーの半径、アニメーションなどを自由にカスタマイズでき、選択状態も維持されます。

toggle_switch | Flutter package

Toggle Switch - A simple toggle switch widget. It can be fully customized with desired icons, width, colors, text, corne...

pub.dev

特徴

• カスタマイズ可能: アイコン、幅、色、テキスト、コーナーの半径、アニメーションなど、様々な属性をカスタマイズ可能。
• 状態維持: 選択状態を維持するため、ユーザーがアプリを再起動しても状態を保持。
• 使いやすい: シンプルな使い方で、すぐにトグルスイッチをアプリに組み込むことができる。

使い方

依存関係の追加

dependencies:
  ...
  toggle_switch: ^2.3.0

基本的な使い方

ToggleSwitch(
  initialLabelIndex: 0,
  totalSwitches: 3,
  labels: ['America', 'Canada', 'Mexico'],
  onToggle: (index) {
    print('switched to: $index');
  },
),

カスタムの高さとフォントサイズを使用したトグルスイッチ

ToggleSwitch(
  minWidth: 90.0,
  minHeight: 90.0,
  fontSize: 16.0,
  initialLabelIndex: 1,
  activeBgColor: [Colors.green],
  activeFgColor: Colors.white,
  inactiveBgColor: Colors.grey,
  inactiveFgColor: Colors.grey[900],
  totalSwitches: 3,
  labels: ['Tall', 'Grande', 'Venti'],
  onToggle: (index) {
    print('switched to: $index');
  },
),

カスタム幅を持つトグルスイッチ

ToggleSwitch(
  customWidths: [90.0, 50.0],
  cornerRadius: 20.0,
  activeBgColors: [[Colors.cyan], [Colors.redAccent]],
  activeFgColor: Colors.white,
  inactiveBgColor: Colors.grey,
  inactiveFgColor: Colors.white,
  totalSwitches: 2,
  labels: ['YES', ''],
  icons: [null, FontAwesomeIcons.times],
  onToggle: (index) {
    print('switched to: $index');
  },
),

アイコンと異なるアクティブ背景色を持つトグルスイッチ

ToggleSwitch(
  minWidth: 90.0,
  initialLabelIndex: 1,
  cornerRadius: 20.0,
  activeFgColor: Colors.white,
  inactiveBgColor: Colors.grey,
  inactiveFgColor: Colors.white,
  totalSwitches: 2,
  labels: ['Male', 'Female'],
  icons: [FontAwesomeIcons.mars, FontAwesomeIcons.venus],
  activeBgColors: [[Colors.blue], [Colors.pink]],
  onToggle: (index) {
    print('switched to: $index');
  },
),

境界色、境界幅、アイコン、カスタムの高さを持つトグルスイッチ

ToggleSwitch(
  minWidth: 90.0,
  minHeight: 70.0,
  initialLabelIndex: 2,
  cornerRadius: 20.0,
  activeFgColor: Colors.white,
  inactiveBgColor: Colors.grey,
  inactiveFgColor: Colors.white,
  totalSwitches: 3,
  icons: [
    FontAwesomeIcons.mars,
    FontAwesomeIcons.venus,
    FontAwesomeIcons.transgender
  ],
  iconSize: 30.0,
  borderWidth: 2.0,
  borderColor: [Colors.blueGrey],
  activeBgColors: [[Colors.blue], [Colors.pink], [Colors.purple]],
  onToggle: (index) {
    print('switched to: $index');
  },
),

グラデーション境界色、ディバイダー色、グラデーションアクティブ背景色を持つトグルスイッチ

ToggleSwitch(
  minWidth: 90.0,
  minHeight: 70.0,
  initialLabelIndex: 0,
  cornerRadius: 20.0,
  activeFgColor: Colors.white,
  inactiveBgColor: Colors.grey,
  inactiveFgColor: Colors.white,
  totalSwitches: 3,
  icons: [
    FontAwesomeIcons.facebook,
    FontAwesomeIcons.twitter,
    FontAwesomeIcons.instagram
  ],
  iconSize: 30.0,
  borderColor: [Color(0xff3b5998), Color(0xff8b9dc3), Color(0xff00aeff), Color(0xff0077f2), Color(0xff962fbf), Color(0xff4f5bd5)],
  dividerColor: Colors.blueGrey,
  activeBgColors: [[Color(0xff3b5998), Color(0xff8b9dc3)], [Color(0xff00aeff), Color(0xff0077f2)], [Color(0xfffeda75), Color(0xfffa7e1e), Color(0xffd62976), Color(0xff962fbf), Color(0xff4f5bd5)]],
  onToggle: (index) {
    print('switched to: $index');
  },
),

BounceInOutアニメーションを持つトグルスイッチ

ToggleSwitch(
  minWidth: 90.0,
  minHeight: 70.0,
  initialLabelIndex: 0,
  cornerRadius: 20.0,
  activeFgColor: Colors.white,
  inactiveBgColor: Colors.grey,
  inactiveFgColor: Colors.white,
  totalSwitches: 2,
  icons: [
    FontAwesomeIcons.lightbulb,
    FontAwesomeIcons.solidLightbulb,
  ],
  iconSize: 30.0,
  activeBgColors: [[Colors.black45, Colors.black26], [Colors.yellow, Colors.orange]],
  animate: true, // デフォルトのカーブ= Curves.easeIn
  curve: Curves.bounceInOut, // カスタムカーブを使用するにはanimateをtrueにする必要がある
  onToggle: (index) {
    print('switched to: $index');
  },
),