How to customize the switch button in a Flutter application [closed] - flutter

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
In my application, I want the switch is used to toggle a setting between on/off which is true/false respectively. When I went to build it, it turned out that Flutter provides a default switch, but it is not what I want. I want to customize it accordingly to my UI.
This is the Flutter switch button:
Here is what I want:
How can I make it possible for my UI?

Answer 1

Set
bool _switchValue = true;
in your screen.dart file:
CupertinoSwitch(
value: _switchValue,
onChanged: (value) {
setState(() {
_switchValue = value;
});
},
),

Answer 2

You can use package https://pub.dev/packages/custom_switch or fork it and modify it to your needs.
Full code
import 'package:custom_switch/custom_switch.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.deepOrange
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
bool status = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Custom Switch Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CustomSwitch(
activeColor: Colors.pinkAccent,
value: status,
onChanged: (value) {
print("VALUE : $value");
setState(() {
status = value;
});
},
),
SizedBox(height: 12.0,),
Text('Value : $status', style: TextStyle(
color: Colors.black,
fontSize: 20.0
),)
],
),
),
);
}
}

Answer 3

Create a custom switch class
class CustomSwitch extends StatefulWidget {
final bool value;
final ValueChanged<bool> onChanged;
CustomSwitch({Key? key, required this.value, required this.onChanged})
: super(key: key);
#override
_CustomSwitchState createState() => _CustomSwitchState();
}
class _CustomSwitchState extends State<CustomSwitch>
with SingleTickerProviderStateMixin {
Animation? _circleAnimation;
AnimationController? _animationController;
#override
void initState() {
super.initState();
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 60));
_circleAnimation = AlignmentTween(
begin: widget.value ? Alignment.centerRight : Alignment.centerLeft,
end: widget.value ? Alignment.centerLeft : Alignment.centerRight)
.animate(CurvedAnimation(
parent: _animationController!, curve: Curves.linear));
}
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animationController!,
builder: (context, child) {
return GestureDetector(
onTap: () {
if (_animationController!.isCompleted) {
_animationController!.reverse();
} else {
_animationController!.forward();
}
widget.value == false
? widget.onChanged(true)
: widget.onChanged(false);
},
child: Container(
width: 45.0,
height: 28.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24.0),
color: _circleAnimation!.value == Alignment.centerLeft
? Colors.grey
: Colors.blue,
),
child: Padding(
padding: const EdgeInsets.only(
top: 2.0, bottom: 2.0, right: 2.0, left: 2.0),
child: Container(
alignment:
widget.value ? ((Directionality.of(context) == TextDirection.rtl) ? Alignment.centerRight : Alignment.centerLeft ) : ((Directionality.of(context) == TextDirection.rtl) ? Alignment.centerLeft : Alignment.centerRight),
child: Container(
width: 20.0,
height: 20.0,
decoration: BoxDecoration(
shape: BoxShape.circle, color: Colors.white),
),
),
),
),
);
},
);
}
}
Call this class as widget and use the value parameter to set the state of the switch
bool _enable = false;
CustomSwitch(
value: _enable,
onChanged: (bool val){
setState(() {
_enable = val;
});
},
),

Answer 4

For a custom switch, I used this package:
https://pub.dev/packages/flutter_switch
You can customize the height and width of the switch, the border radius of the switch, the colors, the toggle size, etc.
Install:
dependencies:
flutter_switch: ^0.0.2
Import:
import 'package:flutter_switch/flutter_switch.dart';
Sample Usage:
FlutterSwitch(
height: 20.0,
width: 40.0,
padding: 4.0,
toggleSize: 15.0,
borderRadius: 10.0,
activeColor: lets_cyan,
value: isToggled,
onToggle: (value) {
setState(() {
isToggled = value;
});
},
),

Answer 5

You can achieve such a design using this package:
This usage is from their README file:
import 'package:custom_switch_button/custom_switch_button.dart';
bool isChecked = false;
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Custom Switch Button example app'),
),
body: GestureDetector(
onTap: () {
setState(() {
isChecked = !isChecked;
});
},
child: Center(
child: CustomSwitchButton(
backgroundColor: Colors.blueGrey,
unCheckedColor: Colors.white,
animationDuration: Duration(milliseconds: 400),
checkedColor: Colors.lightGreen,
checked: isChecked,
),
),
),
),
);
Final result: