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