Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

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. 

No any Comments on this Article


Please Wait...