Flutter Widget of the day : ToggleSwitch

ToggleSwitch is a simple customizable Toggle button with state management, will be right widget for making choice. Combine with con and Text , or make it colorful with colors from your favorite  pallet.  

Dependency and import

sdk: flutter
toggle_switch: "^0.1.8"
import 'package:toggle_switch/toggle_switch.dart';
ToggleButton in Flutter

A sample ToggleSwitch widget with Icon

  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');

You can use initialLabelIndex as a setter for the widget like editing page. Create variable for initial state such as int mychoice=0; and set it as intitialLabelIndex`and use it as setter say mychoice=1.

onToggle: (index) {
switch (index) {
case 0:
case 1:
case 2:

The  OnToggle button can be used with if /witch statement so, that you can handle some action while user select the button.

Published by


A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.