How to Auto Break Row on Overflow in Flutter

If you are a web developer, then you may already have designed responsive UI on the web. Similarly, there are many elements that are very helpful in designing responsive UI. In this example, we are going to show you how to auto break the row on overflow.

How to Auto Break Row on Overflow in Flutter:

Use Wrap() widget instead of Row():

Wrap( 
  children:[
     //row components
  ]
)

Before on Row() widget	After on Wrap() Widget.

Full Code Example:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp( 
      home: MyApp()
    )
  );
}

class MyApp extends StatefulWidget{
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  List boxes = ["box1", "box2", "box3", "box4", "box5", "box6"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("Auto Break Row on Overflow"), //appbar title
              backgroundColor: Colors.redAccent //appbar background color
          ),
          body: Container(
            alignment:Alignment.topCenter,
            padding: EdgeInsets.all(15),
             child: Wrap( 
                children:boxes.map((box){
                     return Container(
                       margin: EdgeInsets.all(10),
                       color: Colors.lightGreen,
                       alignment: Alignment.center,
                       height:100, width:100,
                       child: Text(box),
                     );
                }).toList(),
             )
          )
      );
  }
}

Output is shown above in the second column.

In this way, you can auto break the row on overflow in Flutter.