Flutter – Wrap Widget

27 May, 2021
Wrap widget aligns the widgets in a horizontal and vertical manner. Generally, we use Rows and Columns to do that but if we have some widgets which are not able to fit in the Row/Column then it will give us Overflow Message ( for ex: Right Overflowed by 570 pixels). 
Wrap({Key key, 
Axis direction, 
WrapAlignment alignment, 
double spacing, 
WrapAlignment runAlignment, 
double runSpacing, 
WrapCrossAlignment crossAxisAlignment, 
TextDirection textDirection, 
VerticalDirection verticalDirection, 
List<Widget> children})
direction: By default, the axis is horizontal but we can make it vertical by changing the axis from Axis.horizontal to Axis.vertical.
alignment: We can set the alignment property to align widgets. (for ex : alignment : WrapAlignment.center).
spacing: We can give space between the children.
runAlignment: It shows how runs themselves should be placed in the cross axis. By default, we have runAlignment as WrapAlignment.start.
runSpacing: We can give runSpacing between the runs. (ex: runSpacing:5.0).
crossAxisAlignment: We can align the children relative to each other in cross Axis.
textDirection : We can arrange children in a row using textDirection (for ex : textDirection: TextDirection.rtl to arrange from right to left).
clipBehaviour: This property takes in Clip enum as the object to decide whether the content inside the Wrap widget will be clipped or not.
children: The children property takes in a list of widgets as the object to show inside the Wrap widget or below the Wrap widget in the widget tree.
verticalDirection: This property takes in VerticalDirection enum as the object to. This property decides the order in which each children widget will be painted on the screen in a vertical sense.
runtimeType: Type class is the object given to the runtimeType property. It determines the type of the Wrap widget at the run time.
key: This property decides how one widget will replace another widget on the screen.
haskCode: This property takes in an int value as the object which represents the state of the widget.
main.dart
Dart
import 'package:flutter/material.dart';void main() => runApp(MyApp()); class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return new MaterialApp(      title: "GFG",      theme: new ThemeData(          primarySwatch: Colors.green      ),      debugShowCheckedModeBanner: false,      home: WrapW()    );  }} class WrapW extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar:AppBar(        title: Text("GeeksForGeeks"),      ),      body: Wrap(        // direction: Axis.vertical,        // alignment: WrapAlignment.center,        // spacing:8.0,        // runAlignment:WrapAlignment.center,        // runSpacing: 8.0,        // crossAxisAlignment: WrapCrossAlignment.center,        // textDirection: TextDirection.rtl,        // verticalDirection: VerticalDirection.up,        children: <Widget>[          Container(            color: Colors.blue,            width: 100,            height: 100,            child:Center(child: Text("W1",textScaleFactor: 2.5,))          ),          Container(            color: Colors.red,            width: 100,            height: 100,            child:Center(child: Text("W2",textScaleFactor: 2.5,))          ),          Container(            color: Colors.teal,            width: 100,            height: 100,            child:Center(child: Text("W3",textScaleFactor: 2.5,))          ),          Container(            color: Colors.indigo,            width: 100,            height: 100,            child:Center(child: Text("W4",textScaleFactor: 2.5,))          ),          Container(            color: Colors.orange,            width: 100,            height: 100,            child:Center(child: Text("W5",textScaleFactor: 2.5,))          ),        ],      ),    );  }}
direction: Axis.horizontal // default
Output: 
direction: Axis.vertical
Output: 
alignment: WrapAlignment.center
Output: 
alignment: WrapAlignment.center,
spacing:8.0,
Output: 
alignment: WrapAlignment.center,
spacing:8.0,
runSpacing: 8.0,
Output: 
spacing:8.0,
runSpacing: 8.0,
textDirection: TextDirection.rtl,
Output:
spacing:8.0,
runSpacing: 8.0,
verticalDirection: VerticalDirection.up,
Output:
singh_teekam
ankit_kumar_
simmytarika5
Flutter
Dart
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.