customize toggle button in flutter code example
Example 1: flutter toggle button example
import 'package:flutter/material.dart';
class SamplePage extends StatefulWidget {
@override
_SamplePageState createState() => _SamplePageState();
}
class _SamplePageState extends State<SamplePage> {
List<bool> isSelected;
@override
void initState() {
isSelected = [true, false];
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ToggleButtons'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ToggleButtons(
borderColor: Colors.black,
fillColor: Colors.grey,
borderWidth: 2,
selectedBorderColor: Colors.black,
selectedColor: Colors.white,
borderRadius: BorderRadius.circular(0),
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Open 24 Hours',
style: TextStyle(fontSize: 16),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Custom Hours',
style: TextStyle(fontSize: 16),
),
),
],
onPressed: (int index) {
setState(() {
for (int i = 0; i < isSelected.length; i++) {
isSelected[i] = i == index
}
});
},
isSelected: isSelected,
),
],
),
),
);
}
}
Example 2: toggle button flutter
ToggleButtons(
children: <Widget>[
Icon(Icons.ac_unit),
Icon(Icons.call),
Icon(Icons.cake),
],
onPressed: (int index) {
setState(() {
for (int buttonIndex = 0; buttonIndex < isSelected.length; buttonIndex++) {
if (buttonIndex == index) {
isSelected[buttonIndex] = true;
} else {
isSelected[buttonIndex] = false;
}
}
});
},
isSelected: isSelected,
),