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: 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