Set a gap between ToggleButtons in Flutter
Just place two or more ToggleButtons in the row.Create separate bool lists.
just like in the code below :
List<bool> isSelected1 = [false];List<bool> isSelected2 = [false]; Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ ToggleButtons( isSelected: isSelected1, onPressed: (int index) { setState(() { isSelected1[index] = !isSelected1[index]; }); }, children: [ Icon(Icons.credit_card), ], ), SizedBox(width: 10), ToggleButtons( isSelected: isSelected2, onPressed: (int index) { setState(() { isSelected2[index] = !isSelected2[index]; }); }, children: [ Icon(Icons.money), ], ), ], ),Well, it's not the most elegant way but it does what you want.
I am a little late to the party, but anyone facing this issue, I have a custom solution to add, some boxes between the buttons. Like earlier my output looked like :
The code:
ToggleButtons( constraints: BoxConstraints.loose(Size.infinite), direction: Axis.horizontal, children: <Widget>[ Text('Pre-KG', style: GoogleFonts.roboto( fontWeight: FontWeight.bold, fontSize: 20.0)), Box( color: Colors.white, width: 8, ), Text('Junior-KG', style: GoogleFonts.roboto( fontWeight: FontWeight.bold, fontSize: 20.0)), Box( color: Colors.white, width: 8, ), Text('Senior-KG', style: GoogleFonts.roboto( fontWeight: FontWeight.bold, fontSize: 20.0)), ], color: Colors.grey, borderColor: Colors.white, selectedColor: Colors.blue,After putting in boxes:
Some things to note:
After adding boxes, hot restart or restart is required or its an error.
isSelected, the List needs to have values for no of items in toggle button, like I had to update with 5 values :
List isSelected = [false, false, false, false, false];