Flutter Toggle Buttons in Multiple Rows with Spacing and Rounded Corners

A ToggleButtons widget is arranged in a row without spacing and rounded corners can only be applied to the first and last buttons.

ToggleButtons widget
ToggleButtons Widget: https://api.flutter.dev/flutter/material/ToggleButtons-class.html

How can I add spacing between the buttons with rounded corners? Wrapping an InkWell widget in a GridView widget does the trick! Let’s create a row of 3 toggle buttons with spacing and rounded corners:

Toggle buttons with spacing and rounded corners

You can also have multiple rows of toggle buttons wrapping in a GridView widget. For example, I want to arrange the above buttons in 2 rows and the maximum number of buttons in each row is 2. So I just need to change the ‘crossAxisCount’ to 2, then the last button will fall to the second row automatically. This is how I do it:

Toggle buttons in 2 rows

I hope this article help you build your customized toggle buttons. Thanks for reading. Happy coding!

Reference of toggle logic: https://medium.com/flutter-community/flutter-widget-in-focus-togglebuttons-know-it-all-b0f0c23f4518



Software Developer at BeyondLabs Limited

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store