CODEWITHSUNDEEP
user-interfacefluttertogglebutton
derChris
derChris

Reputation: 890

How to remove space from ToggleButtons in Flutter and make it scroll

In the ToggleButtons-Example there is not much space between the icons: https://api.flutter.dev/flutter/material/ToggleButtons-class.html

enter image description here

When I use the code provided, I get that

enter image description here

How can I remove the space on the left and on the right?

And is it possible scroll the toggleButtons - or even to "page" them (clicking f. e. on buttons on the left and on the right of the toggle buttons and "scroll/move" by one icon in a direction)?

Upvotes: 6

Views: 4836

Answers (4)

Elmar
Elmar

Reputation: 4387

Seems like there are now built-in way to achieve that. Working solution in 2022:

Padding(
                                      padding: EdgeInsets.all(5),
                                      child:
ToggleButtons(
                                        constraints:
                                            BoxConstraints(maxHeight: 55), // this line prevents excess vertical padding and allow you to set your own value here
                                        children: <Widget>[
                                          Padding(
                                              padding: EdgeInsets.symmetric(
                                                  horizontal: 5),
                                              child: Text('ON')),
                                          Padding(
                                              padding: EdgeInsets.symmetric(
                                                  horizontal: 5),
                                              child: Text('OFF')),
                                        ],
                                        isSelected: _isToggleActive,
                                        onPressed: (int index) async {
                                          // do something
                                          setState(() {});
                                        },
                                        color: Colors.grey,
                                        selectedColor:
                                            Color.fromARGB(255, 248, 246, 246),
                                        fillColor:
                                            Color.fromARGB(255, 38, 162, 67),
                                        borderColor:
                                            Color.fromARGB(255, 250, 251, 252),
                                        selectedBorderColor:
                                            Color.fromARGB(255, 20, 20, 20),
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(10)),
                                      )),

Upvotes: 0

&#201;rica Betto Sene
&#201;rica Betto Sene

Reputation: 116

How can I remove the space on the left and on the right?

How Bogdan Orzea said, in Flutter last release (version 1.9.1) isn't possible to change the padding of the ToggleButtons's children. Probably in the next Flutter release it will be possible. If you can't wait until the next release, you can update Flutter to version 1.12.13+hotfix.3 (beta). In this beta version the ToggleButtons's children will be square like is shown in ToggleButtons-Example, and you can change the padding using Padding Widget, like the code below:

ToggleButtons(
  children: <Widget>[
    Padding(
      padding: EdgeInsets.only(left: 40.0, right: 40.0),
      child: Text('Option 1')
    ),
    Padding(
      padding: EdgeInsets.only(left: 40.0, right: 40.0),
      child: Text('Option 2')
    ),
    Padding(
      padding: EdgeInsets.only(left: 40.0, right: 40.0),
      child: Text('Option 3')
    ),
    Padding(
      padding: EdgeInsets.only(left: 40.0, right: 40.0),
      child: Text('Option 4')
    )
  ],
)

And is it possible scroll the toggleButtons - or even to "page" them (clicking f. e. on buttons on the left and on the right of the toggle buttons and "scroll/move" by one icon in a direction)?

Wrap your ToggleButton inside the SingleChildScrollView widget:

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: ToggleButtons(
    children: (...)
  )
)

Upvotes: 6

Bogdan Orzea
Bogdan Orzea

Reputation: 21

Probably the next Flutter release will include a PR that adds constraints parameter to ToggleButtons widget (https://github.com/flutter/flutter/pull/39857). Until then, you can use the SingleChildScrollView method.

Upvotes: 2

Zvi Karp
Zvi Karp

Reputation: 3904

You can wrap any widget with a SingleChildScrollView like this:

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: ToggleButtons( ... ),
),

Upvotes: 3

Related Questions