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.
1 |
import 'package:flutter/material.dart'; |
2. Now we would call our void main runApp() method and call the MyApp main root class.
1 |
void main() => runApp(MyApp()); |
3. Create our main Root Parent class named as MyApp extends with State less widget.
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Now we would create a function named as sampleFunction() and inside the function simply print a Console message using Print method.
1 2 3 |
sampleFunction(){ print('Function Called'); } |
5. Create Widget Build area in MyApp class than we would create Scaffold widget -> Center widget.
1 2 3 4 5 6 7 8 9 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child : ) ) ); } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
Wrap( alignment: WrapAlignment.spaceBetween, direction: Axis.horizontal, children: <Widget>[ Container( margin: const EdgeInsets.fromLTRB(20, 0, 0, 0), child: RaisedButton( onPressed: () => sampleFunction(), child: Text(' Button 1 '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), Container( margin: const EdgeInsets.fromLTRB(20, 0, 0, 0), child: RaisedButton( onPressed: () => sampleFunction(), child: Text(' Button 2 '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), Container( margin: const EdgeInsets.fromLTRB(20, 0, 0, 0), child: RaisedButton( onPressed: () => sampleFunction(), child: Text(' Button 3 '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), Container( margin: const EdgeInsets.fromLTRB(20, 0, 0, 0), child: RaisedButton( onPressed: () => sampleFunction(), child: Text(' Button 4 '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), Container( margin: const EdgeInsets.fromLTRB(20, 0, 0, 0), child: RaisedButton( onPressed: () => sampleFunction(), child: Text(' Button 5 '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), Container( margin: const EdgeInsets.fromLTRB(20, 0, 0, 0), child: RaisedButton( onPressed: () => sampleFunction(), child: Text(' Button 7 '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), Container( margin: const EdgeInsets.fromLTRB(20, 0, 0, 0), child: RaisedButton( onPressed: () => sampleFunction(), child: Text(' Button 7 '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ) ], ) |
7. Complete source code for main.dart file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { sampleFunction(){ print('Function Called'); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child : Wrap( alignment: WrapAlignment.spaceBetween, direction: Axis.horizontal, children: <Widget>[ Container( margin: const EdgeInsets.fromLTRB(20, 0, 0, 0), child: RaisedButton( onPressed: () => sampleFunction(), child: Text(' Button 1 '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), Container( margin: const EdgeInsets.fromLTRB(20, 0, 0, 0), child: RaisedButton( onPressed: () => sampleFunction(), child: Text(' Button 2 '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), Container( margin: const EdgeInsets.fromLTRB(20, 0, 0, 0), child: RaisedButton( onPressed: () => sampleFunction(), child: Text(' Button 3 '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), Container( margin: const EdgeInsets.fromLTRB(20, 0, 0, 0), child: RaisedButton( onPressed: () => sampleFunction(), child: Text(' Button 4 '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), Container( margin: const EdgeInsets.fromLTRB(20, 0, 0, 0), child: RaisedButton( onPressed: () => sampleFunction(), child: Text(' Button 5 '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), Container( margin: const EdgeInsets.fromLTRB(20, 0, 0, 0), child: RaisedButton( onPressed: () => sampleFunction(), child: Text(' Button 7 '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), Container( margin: const EdgeInsets.fromLTRB(20, 0, 0, 0), child: RaisedButton( onPressed: () => sampleFunction(), child: Text(' Button 7 '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ) ], ) ) ) ); } } |
Screenshot:
Thanks you saved my day with this tutorial
Welcome Suryansh 🙂 .