In the ToggleButtons-Example there is not much space between the icons: https://api.flutter.dev/flutter/material/ToggleButtons-class.html
When I use the code provided, I get that
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 fe on buttons on the left and on the right of the toggle buttons and "scroll/move" by one icon in a direction)?
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 fe 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: (...)
)
)
You can wrap any widget with a SingleChildScrollView
like this:
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ToggleButtons( ... ),
),
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.