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.
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 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.
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.
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.
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.
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.
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.
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 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.
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.
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.
Once installed, import the package into your Dart file:
1import 'package:lite_rolling_switch/lite_rolling_switch.dart'; 2
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.
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.
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 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.
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.
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.