Rows and columns are the base of every flutter application. But sometimes we run out of room then we face the layout overflowed error. This error comes when there is no extra space available in current row and the child widget cannot move further. To solve this error Wrap widget comes here, Wrap widget lay it’s children one at a time and when it ran out space in current row then it will move the next children to the next row automatically. So in this tutorial we would learn about Example of Wrap Widget in Flutter Android iOS.
Contents in this project Example of Wrap Widget in Flutter Android iOS:
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and calling MyApp class here.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp extends StatelessWidget class. This is our main class.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
5. Creating Widget Build Area -> MaterialApp -> Scaffold Widget -> SafeArea Widget -> Container Widget.
|
1 2 3 4 5 6 7 8 9 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Container( color: Colors.amber[100], child: )))); } |
6. Creating Wrap widget and Put multiple Container widgets as its children to see the work of wrap widget.
Wrap Widget Properties:
- alignment : Used to set how children should wrap in main axis. Properties are WrapAlignment.center, WrapAlignment.end, WrapAlignment.spaceAround, WrapAlignment.spaceBetween, WrapAlignment.spaceEvenly.
- direction : Used to set direction like horizontal for Row and vertical for Column.
- spacing : Used to set space between each item.
- runSpacing : Used to set space between each row like line height.
|
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 |
Wrap( alignment: WrapAlignment.start, direction: Axis.horizontal, spacing: 8.0, runSpacing: 5.0, children: <Widget>[ Container( color: Colors.amber, width: 80, height: 80, ), Container( color: Colors.black, width: 80, height: 80, ), Container( color: Colors.blue, width: 80, height: 80, ), Container( color: Colors.brown, width: 80, height: 80, ), Container( color: Colors.cyan, width: 80, height: 80, ), Container( color: Colors.deepOrange, width: 80, height: 80, ), Container( color: Colors.deepPurple, width: 80, height: 80, ), Container( color: Colors.green, width: 80, height: 80, ), Container( color: Colors.teal, width: 80, height: 80, ), ], ) |
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 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Container( color: Colors.amber[100], child: Wrap( alignment: WrapAlignment.start, direction: Axis.horizontal, spacing: 8.0, runSpacing: 5.0, children: <Widget>[ Container( color: Colors.amber, width: 80, height: 80, ), Container( color: Colors.black, width: 80, height: 80, ), Container( color: Colors.blue, width: 80, height: 80, ), Container( color: Colors.brown, width: 80, height: 80, ), Container( color: Colors.cyan, width: 80, height: 80, ), Container( color: Colors.deepOrange, width: 80, height: 80, ), Container( color: Colors.deepPurple, width: 80, height: 80, ), Container( color: Colors.green, width: 80, height: 80, ), Container( color: Colors.teal, width: 80, height: 80, ), ], ))))); } } |
Screenshot:
