Set a gap between ToggleButtons in Flutter

Question

I have these ToggleButtons and I want to make them appear with some spacing between them.

ToggleButtons(
  children: <Widget>[
    Icon(Icons.ac_unit),
    Icon(Icons.call),
    Icon(Icons.cake),
  ],
  onPressed: (int index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
  isSelected: isSelected,
),

The desired result is this:

Is this possible somehow?

Answer 1

The key is to remove the default Toggle Button border,fill color and add them separately.

renderBorder: false
fillColor: Colors.white,

Then add a padding over the widget but

ToggleButtons(
       renderBorder: false,
       fillColor: Colors.white,
       onPressed: (val) {
        setState(() {
                    itemStatus = List.generate(3, (index) => false);
                    itemStatus[val]=!itemStatus[val];
                  });
        },
        children: List<Widget>.generate(
        3,
       (index) => Padding(
       padding: const EdgeInsets.all(8.0),
       child: Container(
       decoration: BoxDecoration(
       **color:itemStatus[index]? Colors.amber:Colors.white,**
       border: Border.all(),
      borderRadius: BorderRadius.circular(10),),
      padding: const EdgeInsets.all(5),
      width: 160,
      height: 70,
      alignment: Alignment.center,
     child: Text(itemTypes[index],style:const  **TextStyle(color: 
      Colors.black)**,),
     isSelected: itemStatus
),