Move Row Content Automatically to Next Line in Flutter using Wrap Widget

In Flutter if we would use Row widget and start putting widgets inside it then once the width is filled it’ll start us show an Pixel error on device which is like impossible to solve. But using the Wrap widget of Flutter we can solve this problem within a few minutes. Wrap widgets automatically align the Widgets items one by one and if the Row is filled then it will move row content automatically to next line in flutter. Wrap widgets can support both Horizontal alignment and Vertical Alignment like Row and Column widgets in flutter. Using the Wrap widget we can adjust multiple widgets at once without disturbing each other.

Contents in this project Move Row Content Automatically to Next Line in Flutter using Wrap Widget Android iOS Example Tutorial:

1. Import material.dart package in your app’s main.dart file.

2. Now we would call our void main runApp() method and call the MyApp main root class.

3. Create our main Root Parent class named as MyApp extends with State less widget.

4. Now we would create a function named as sampleFunction() and inside the function simply print a Console message using Print method.

5. Create Widget Build area in MyApp class than we would create Scaffold widget -> Center widget.

6. Creating Wrap widget in Center widget and then we would put multiple Raised Button widgets inside it, which would align automatically. Every Raised Button widget is Wrap in Container widget to specify margin values.

• alignment : Can support multiple values like center, end, spaceAround, spaceBetween, start and spaceEvenly.
• direction : Used to set items position on screen from where the icons will start printing.

For more Wrap widgets options you can visit its official documentation here.

7. Complete source code for main.dart file:

Screenshot: