Flutter equvalent Android-Toggle-Switch - flutter

Question

is any flutter widget like with this library in android java?
<belka.us.androidtoggleswitch.widgets.MultipleToggleSwitch
android:id="#+id/multiple_toggle_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
custom:textToggleCenter="Center"
custom:textToggleLeft="Left"
custom:textToggleRight="Right"
android:layout_gravity="center"
custom:toggleWidth="82dp"/>
i did try to search to find this implementation on flutter but i can't

Answer 1

as an option, how to use
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ToggleWidget(
initialLabel: 2,
activeBgColor: Colors.indigo,
activeTextColor: Colors.white,
inactiveBgColor: Colors.grey,
inactiveTextColor: Colors.grey[900],
labels: ['OR', 'XOR', 'AND', 'NOT'],
onToggle: (index) {
print('switched to: $index');
},
),
SizedBox(height: 16),
ToggleWidget(
cornerRadius: 20,
activeBgColor: Colors.redAccent,
activeTextColor: Colors.yellow,
inactiveBgColor: Colors.grey,
inactiveTextColor: Colors.white,
labels: ['YES', 'NO'],
),
],
),
),
),
);
}
}
and the widget itself
typedef OnToggle = void Function(int index);
class ToggleWidget extends StatefulWidget {
final Color activeBgColor;
final Color activeTextColor;
final Color inactiveBgColor;
final Color inactiveTextColor;
final List<String> labels;
final double cornerRadius;
final OnToggle onToggle;
final int initialLabel;
final double minWidth;
ToggleWidget({
Key key,
#required this.activeBgColor,
#required this.activeTextColor,
#required this.inactiveBgColor,
#required this.inactiveTextColor,
#required this.labels,
this.onToggle,
this.cornerRadius = 8.0,
this.initialLabel = 0,
this.minWidth = 72,
}) : super(key: key);
#override
_ToggleWidgetState createState() => _ToggleWidgetState();
}
class _ToggleWidgetState extends State<ToggleWidget> {
int current;
#override
void initState() {
current = widget.initialLabel;
super.initState();
}
#override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(widget.cornerRadius),
child: Container(
height: 40,
color: widget.inactiveBgColor,
child: Row(
mainAxisSize: MainAxisSize.min,
children: List.generate(widget.labels.length * 2 - 1, (index) {
final active = index ~/ 2 == current;
final textColor = active ? widget.activeTextColor : widget.inactiveTextColor;
final bgColor = active ? widget.activeBgColor : Colors.transparent;
if (index % 2 == 1) {
final activeDivider = active || index ~/ 2 == current - 1;
return Container(
width: 1,
color: activeDivider ? widget.activeBgColor : Colors.white30,
margin: EdgeInsets.symmetric(vertical: activeDivider ? 0 : 8),
);
} else {
return GestureDetector(
onTap: () => _handleOnTap(index ~/ 2),
child: Container(
constraints: BoxConstraints(minWidth: widget.minWidth),
alignment: Alignment.center,
color: bgColor,
child: Text(widget.labels[index ~/ 2], style: TextStyle(color: textColor)),
),
);
}
}),
),
),
);
}
void _handleOnTap(int index) async {
setState(() => current = index);
if (widget.onToggle != null) {
widget.onToggle(index);
}
}
}
result:

Answer 2

You can opt to create your own switch, the code below is a quick demonstration and I know it needs signification improvements to match the original library style:
int selectedIndex = 0 ;
Center(
child: Container(
padding: EdgeInsets.all(2.0),
color: Colors.grey[300],
child: Row(
children: <Widget>[
RaisedButton(
child: Text('OR'),
textColor: Colors.white,
color: selectedIndex == 0 ? Colors.indigo : Colors.grey,
onPressed: (){
setState(() {
selectedIndex = 0 ;
});
},
),
RaisedButton(
child: Text('XOR'),
textColor: Colors.white,
color: selectedIndex == 1 ? Colors.indigo : Colors.grey,
onPressed: (){
setState(() {
selectedIndex = 1 ;
});
},
),
RaisedButton(
child: Text('AND'),
textColor: Colors.white,
color: selectedIndex == 2 ? Colors.indigo : Colors.grey,
onPressed: (){
setState(() {
selectedIndex = 2 ;
});
},
),
],
),
),
),

Answer 3

ToggleSwitch dart package (based on #Eugene's answer) is now available.
Usage
dependencies:
...
toggle_switch: "^0.1.4"