Custom Switch Lite Flutter Example

This article explains you how to integrate custom rolling switch in flutter application to select one option. You can also check out flutter radio button article.

Using switch button, we can swipe between two options checked and unchecked states. In this flutter example, we are using lite_rolling_switch package to create custom rolling switch in flutter application. We can also customize switch button ui using this flutter package.

LiteRollingSwitch widget has many properties. We can display specific color when switch is checked using colorOn property. We can also display different color at time of switch unchecked using colorOff property of LiteRollingSwitch widget. We can show custom icon when switch is on using iconOn property. For unchecked state of switch button, we are using iconOff property to display different image.

We can also display switch checked or unchecked by default by giving value true or false to LiteRollingSwitch widget. onChanged property is used to detect when switch state is changed from checked to unchecked or unchecked to checked. We can also display custom text when switch is on using textOn property of LiteRollingSwitch widget. for unchecked switch, we are using textOff property to display different text in the flutter rolling switch component.

 

Add package in pubspec.yaml file

lite_rolling_switch: ^0.1.1
 
 

Flutter Custom Switch

import ‘package:flutter/material.dart’;
import ‘package:lite_rolling_switch/lite_rolling_switch.dart’;

class MyCustomSwitchScreen extends StatefulWidget {
@override
_MyCustomSwitchScreenState createState() => _MyCustomSwitchScreenState();
}

class _MyCustomSwitchScreenState extends State<MyCustomSwitchScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Custom Switch Sample’)),
body: Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
“Do you watch soccer?”,
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
Padding(
padding: EdgeInsets.only(top: 20),
child: LiteRollingSwitch(
iconOn: Icons.check,
iconOff: Icons.power_settings_new,
colorOn: Colors.greenAccent,
colorOff: Colors.redAccent,
textOn: ‘Yes’,
textOff: ‘No’,
value: false,
animationDuration: Duration(milliseconds: 1000),
onChanged: (bool state) {
print(‘selected ${(state) ? ‘yes’ : ‘no’}’);
},
),
)
],
),
)));
}
}

 
 
custom switch
 
 

Leave a Reply