Step-by-Step Guide to Building a Custom Rolling Switch in Flutter

Flutter has become a go-to framework for developing cross-platform mobile applications. Its widget-centric architecture allows developers to create highly customizable and performant applications. Among the myriad of widgets available, the switch widget stands out as a fundamental component for toggling between two states. However, the classical material’s switch widget may sometimes fall short regarding visual appeal and customization. This is where the concept of a rolling switch comes into play.

What is a Rolling Switch?

A rolling switch, often called a roller lever switch, rolls or flips from one state to another, providing a clear visual cue of its current position. In the context of a Flutter app, a rolling switch is a custom switch button that incorporates attractive animation and enhanced user interaction compared to a simple toggle switch widget.

The Purpose of a Rolling Switch

The primary purpose of a rolling switch is to offer an interactive component that allows users to choose between two mutually exclusive options, much like a classical limit switch. However, a rolling switch does so with more visual flair. It's not just a functional element; it also enhances the user experience by providing a more engaging and intuitive way to interact with the Flutter app.

Safety Limit Switch vs. Limit Switch

In the physical world, a safety limit switch is designed to provide critical safety controls for machinery, whereas a standard limit switch is used for general control purposes. The difference lies in their applications, with safety limit switches being a more robust solution for ensuring the safe operation of equipment.

Example of a Limit Switch

An example of a limit switch could be a washing machine door sensor that halts the machine's operation when the door is open. Translating this concept into a Flutter app, a rolling switch can serve a similar purpose by changing the app's state or triggering certain actions when toggled.

The Switch Widget in Flutter

In Flutter, a switch widget is a graphical user interface element that allows users to toggle between on/off or true/false states. It is commonly used in settings menus for enabling or disabling features.

Using a Flutter Switch

To use a Flutter switch, you would typically create a Switch widget and manage its state within your application. Here's a basic example:

1Switch(
2  value: isSwitchOn,
3  onChanged: (bool newValue) {
4    setState(() {
5      isSwitchOn = newValue;
6    });
7  },
8)
9

In this snippet, isSwitchOn is a boolean that holds the current state of the switch, and setState is called to update the UI when the switch is toggled.

Switch Between Widgets in Flutter

Switching between widgets in Flutter can be achieved by using a state management solution to toggle the visibility or presence of widgets in the widget tree based on the switch's state.

Switch Button Icon in Flutter

The switch button icon in Flutter visually represents the switch's state. It can be a checkmark, a power symbol, or any other icon that signifies on/off states.

Creating a Toggle Switch in Flutter

Creating a toggle switch in Flutter involves using the Switch widget and managing its state. However, for a more customized experience, developers often look for a custom switch button that offers more flexibility in design and animation.

Customizing Your Flutter App with the Lite Rolling Switch Package

To implement a customable rolling switch widget in your Flutter app, you can use the lite_rolling_switch package. This package provides a custom switch that supports null safety and includes attractive animations, allowing you to customize colors, icons, and other cosmetic content to match your app's theme.

Installation

First, add the lite_rolling_switch to your pubspec.yaml file:

1dependencies:
2  lite_rolling_switch: ^latest_version
3

Remember to check for the latest version and replace latest_version with the actual version number.

Importing the Package

Once installed, import the package into your Dart file:

1import 'package:lite_rolling_switch/lite_rolling_switch.dart';
2

Using the Lite Rolling Switch

Now, you can use the LiteRollingSwitch widget in your app. Here's an example of how to implement it:

1LiteRollingSwitch(
2  //initial value
3  value: true,
4  textOn: 'active',
5  textOff: 'inactive',
6  colorOn: Colors.greenAccent[700],
7  colorOff: Colors.redAccent[700],
8  iconOn: Icons.done,
9  iconOff: Icons.remove_circle_outline,
10  textSize: 16.0,
11  onChanged: (bool state) {
12    //Use it when it is toggled
13    print('turned ${(state) ? 'on' : 'off'}');
14  },
15)
16

In this code snippet, the LiteRollingSwitch is initialized with properties defining its appearance and behavior. The value property determines the initial position of the switch, while textOn and textOff define the labels displayed for each state. The colorOn and colorOff properties allow you to customize colors for the switch's active and inactive states. The iconOn and iconOff properties let you set the desired icons for each state. The onChanged callback is triggered whenever the switch's state changes, allowing you to handle the new state accordingly.

Customizing the Rolling Switch

The lite_rolling_switch allows you to customize various aspects of the switch widget. You can set custom height and width properties, customize colors and icons, and even adjust the border radius for rounded corners. Here's how you can customize the switch further:

1LiteRollingSwitch(
2  // ... other properties
3  width: 100,
4  height: 55,
5  animationDuration: Duration(milliseconds: 400),
6  borderRadius: BorderRadius.circular(24.0),
7)
8

In this example, width and height control the size of the switch, animationDuration sets the speed of the toggle animation, and borderRadius defines the corner radius, giving the switch rounded corners for a more polished look.

Adding Rolling Switch to Your App's UI

To integrate the rolling switch into your Flutter app's UI, add the LiteRollingSwitch widget to your app's widget tree. Here's an example of adding it within a Scaffold:

1@override
2Widget build(BuildContext context) {
3  return Scaffold(
4    appBar: AppBar(
5      title: Text('Rolling Switch Example'),
6    ),
7    body: Center(
8      child: LiteRollingSwitch(
9        // ... properties
10      ),
11    ),
12  );
13}
14

In this build method, the rolling switch is placed at the center of the screen within a Scaffold, which provides the app bar and other layout structure.

Conclusion

Incorporating a rolling switch into your Flutter app can elevate the user interface, providing a visually engaging and interactive element for users to toggle between choices. The lite_rolling_switch package offers a fully customizable and animated switch widget that adheres to modern design standards and supports null safety for robust app development. Following the steps outlined in this guide, you can seamlessly integrate this custom switch button into your Flutter applications, ensuring functionality and aesthetic appeal.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.