spporan / toggle_switch

A simple toggle switch widget for Flutter.

Home Page:https://pub.dev/packages/toggle_switch

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Toggle Switch

A simple toggle switch widget. It can be fully customized with desired icons, width, colors, text, corner radius etc. It also maintains selection state.

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  toggle_switch: "^0.1.8"

Import it:

import 'package:toggle_switch/toggle_switch.dart';

Usage Examples

Basic toggle switch

// Here, default theme colors are used for activeBgColor, activeFgColor, inactiveBgColor and inactiveFgColor
ToggleSwitch(
  initialLabelIndex: 0,
  labels: ['America', 'Canada', 'Mexico'],
  onToggle: (index) {
    print('switched to: $index');
  },
),

Basic toggle switch

Basic toggle switch with custom height and font size

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],
  labels: ['Tall', 'Grande', 'Venti'],
  onToggle: (index) {
    print('switched to: $index');
  },
),

Basic toggle switch with custom height

With icons and text

ToggleSwitch(
  minWidth: 90.0,
  cornerRadius: 20.0,
  activeBgColor: Colors.cyan,
  activeFgColor: Colors.white,
  inactiveBgColor: Colors.grey,
  inactiveFgColor: Colors.white,
  labels: ['YES', 'NO'],
  icons: [FontAwesomeIcons.check, FontAwesomeIcons.times],
  onToggle: (index) {
    print('switched to: $index');
  },
),

With icons and text

With icons, text and different active background colors

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

With icons, text and different active background colors

With icons, custom height and different active background colors

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

With icons, custom height and different active background colors

Credits

Eugene

About

A simple toggle switch widget for Flutter.

https://pub.dev/packages/toggle_switch

License:MIT License


Languages

Language:Dart 89.9%Language:Ruby 5.0%Language:Swift 2.7%Language:Kotlin 2.2%Language:Objective-C 0.2%