Toggle Switch in Flutter

Technical Flutter

Toggle switches are a common user interface element used in many mobile and web applications to allow users to easily enable or disable a specific feature or setting.

In this blog, we will discuss how to customize icons with Flutter.

Before you begin writing code, you should create a new project and channel in Flutter.

To create a new Flutter project, follow these steps:

Go to File -> New -> New Flutter Project.

After creating a new project, you will also need to create a channel.

For creating a Device click on Create Device

Click on “Create Device” and a new window will open, as shown in the screenshot below. In this window, you can choose your device type, such as phone, tablet, Wear OS, desktop, TV, or car. After making your selection, continue by clicking the Next button and then the Finish button.

Next, you can run the selected device, as demonstrated in the screenshot below.

After running the test device, you will have a preview of your application's output, as illustrated in the screenshot below.

Let's begin with designing our toggle icons. First, you need to import the following components:

Create a new class that extends StatelessWidget.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.only(top: 20.0, bottom: 20.0),
          child: Center(
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                  ],
               ),
           )),
        ),
      ),
    );
  }
}

Basic Toggle Switch :

Now, let's add a basic toggle switch as follows:

With the above switch, you can click on "Table," "Switch," and "Chair" accordingly. Let's take a look at the code for this.

Inside the Column widget, add the following code:

ToggleSwitch(
 initialLabelIndex: 0,
 totalSwitches: 3,
 labels: ['Table', 'Desk', 'Chair'],
),

If you want to add an extra button, you can increase the number in totalSwitches. The initialLabelIndex corresponds to the default or initial index of the selected label, which is set to "Table."

If you want to adjust the height, width, and font size, you can include the following code inside the ToggleSwitch.

minWidth: 90.0,
minHeight: 90.0,
fontSize: 16.0,

Also you can add background and foreground color by adding below code to inside ToggleSwitch for active button and inactive button.

activeBgColor: [Colors.green],
activeFgColor: Colors.white,
inactiveBgColor: Colors.grey,
inactiveFgColor: Colors.grey[900],

The complete code for this type of toggle switch is provided below

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.only(top: 20.0, bottom: 20.0),
          child: Center(
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ToggleSwitch(
			 initialLabelIndex: 0,
                         totalSwitches: 3,
			 labels: ['Table', 'Desk', 'Chair'],
			 minWidth: 90.0,
			 minHeight: 90.0,
			 fontSize: 16.0,
			 activeBgColor: [Colors.green],
			 activeFgColor: Colors.white,
			 inactiveBgColor: Colors.grey,
			 inactiveFgColor: Colors.grey[900],
			),
                    ],
                ),
              )),
        ),
      ),
    );
  }
}

The output of the above code is shown in below image.

Now see how to create a text or icon toggle switch as below image

To achieve the switches shown above, you need to add customWidths, cornerRadius, and icons inside the ToggleSwitch widget.

For different widths for text and icon, specify customWidths as follows:

customWidths: [90.0, 50.0],

To control the corner radius, use cornerRadius:

cornerRadius: 20.0,

Add the cross icon inside icons:

icons: [null, FontAwesomeIcons.times],

These parameters allow you to customize the appearance and behavior of your toggle switches.