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.

Use Wrap() widget instead of Row():

     //row components
Before on Row() widget After on Wrap() Widget.

import 'package:flutter/material.dart';

void main() {
      home: MyApp()

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

class _MyAppState extends State<MyApp> {

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

  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(
            padding: EdgeInsets.all(15),
             child: Wrap( 
                     return Container(
                       margin: EdgeInsets.all(10),
                       color: Colors.lightGreen,
                       height:100, width:100,
                       child: Text(box),

Output is shown above in the second column.

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

No any Comments on this Article

Please Wait...