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?

Inelegance

Sadly I believe that it is not possible so basically you will have to do your own custom toggle buttons. But good question though – Bacchic

I tried hardly to achieve this, but still no clue but building it myself – Giuditta

@Bacchic thanks for your suggestion. It helped me to keep space between togglebuttons. – Tyler

This is a good question actually and a very valid use-case. They should make this possible. – Coats

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
),

Carding

Answer 2

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:

1. After adding boxes, hot restart or restart is required or its an error.

2. 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];

Furan

the problem is when we select the boxes they get selected and show the color – Richard

Answer 3

Hey an easy approach could be wrapping your each icon with container and then providing margin to each container. Like this,

ToggleButtons(
  children: <Widget>[
    color: Colors.grey,
      fillColor: Colors.white,
      renderBorder: false,
      selectedColor: Colors.black,
      children: <Widget>[
        Container(
          margin: const EdgeInsets.symmetric(horizontal: 40.0),
          child: Column(
            children: const [Icon(Icons.circle), Text('Cash')],
          ),
        ),
        Container(
          margin: const EdgeInsets.symmetric(horizontal: 40.0),
          child: Column(
            children: const [Icon(Icons.circle), Text('Upi')],
          ),
        ),
        Container(
          margin: const EdgeInsets.symmetric(horizontal: 40.0),
          child: Column(
            children: const [Icon(Icons.circle), Text('Credit')],
          ),
        )
  ],
  onPressed: (int index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
  isSelected: isSelected,
),

Toggle button would look like this in the image

Polak

Answer 4

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.

Ecumenicism

Answer 5

I think the borderWidth can pad the buttons and make it seems like there are spaces between them. Like this:

ToggleButtons(
  isSelected: isSelected,
  selectedColor: Color.fromARGB(255, 250, 244, 218),
  color: Color.fromARGB(255, 195, 162, 65),
  fillColor: Colors.transparent,
  textStyle: TextStyle(fontSize: 28),
  borderWidth: 20,
  borderColor: Colors.white,
  selectedBorderColor: Colors.white,
  splashColor: Colors.transparent,
  children: <Widget>[
    Container(
      padding: const EdgeInsets.symmetric(
          horizontal: 30, vertical: 30),
      decoration: BoxDecoration(
        color: isSelected[0]
            ? const Color.fromARGB(255, 232, 182, 43)
            : const Color.fromARGB(255, 250, 244, 218),
        border: Border.all(
          color: const Color.fromARGB(255, 232, 182, 43),
        ),
        borderRadius: const BorderRadius.all(
          Radius.circular(20),
        ),
      ),
      child: Icon(Icons.add_circle_outline_outlined),
    ),
    Container(
      padding: const EdgeInsets.symmetric(
          horizontal: 30, vertical: 30),
      decoration: BoxDecoration(
        color: isSelected[1]
            ? const Color.fromARGB(255, 232, 182, 43)
            : const Color.fromARGB(255, 250, 244, 218),
        border: Border.all(
          color: const Color.fromARGB(255, 232, 182, 43),
        ),
        borderRadius: const BorderRadius.all(
          Radius.circular(20),
        ),
      ),
      child: Icon(Icons.add_circle_outline_outlined),
    ),
    Container(
      padding: const EdgeInsets.symmetric(
          horizontal: 30, vertical: 30),
      decoration: BoxDecoration(
        color: isSelected[2]
            ? const Color.fromARGB(255, 232, 182, 43)
            : const Color.fromARGB(255, 250, 244, 218),
        border: Border.all(
          color: const Color.fromARGB(255, 232, 182, 43),
        ),
        borderRadius: const BorderRadius.all(
          Radius.circular(20),
        ),
      ),
      child: Icon(Icons.add_circle_outline_outlined),
    ),
  ],
  onPressed: (int newIndex) {
    setState(() {
      for (int index = 0; index < isSelected.length; index++) {
        if (index == newIndex) {
          isSelected[index] = true;
        } else {
          isSelected[index] = false;
        }
      }
    });
  },
),

Boreal