Wrap class Null safety

A widget that displays its children in multiple horizontal or vertical runs.

A Wrap lays out each child and attempts to place the child adjacent to the previous child in the main axis, given by direction, leaving spacing space in between. If there is not enough space to fit the child, Wrap creates a new run adjacent to the existing children in the cross axis.

After all the children have been allocated to runs, the children within the runs are positioned according to the alignment in the main axis and according to the crossAxisAlignment in the cross axis.

The runs themselves are then positioned in the cross axis according to the runSpacing and runAlignment.

link
This example renders some Chips representing four contacts in a Wrap so that they flow across lines as necessary. 
Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: <Widget>[
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('AH')),
      label: const Text('Hamilton'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('ML')),
      label: const Text('Lafayette'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('HM')),
      label: const Text('Mulligan'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('JL')),
      label: const Text('Laurens'),
    ),
  ],
)

See also:

Inheritance

Constructors

Wrap({Key? key, Axis direction = Axis.horizontal, WrapAlignment alignment = WrapAlignment.start, double spacing = 0.0, WrapAlignment runAlignment = WrapAlignment.start, double runSpacing = 0.0, WrapCrossAlignment crossAxisAlignment = WrapCrossAlignment.start, TextDirection? textDirection, VerticalDirection verticalDirection = VerticalDirection.down, Clip clipBehavior = Clip.none, List<Widget> children = const <Widget>[]})
Creates a wrap layout.

Properties

alignment → WrapAlignment
How the children within a run should be placed in the main axis.
final
children → List<Widget>
The widgets below this widget in the tree.
finalinherited
clipBehavior → Clip
The content will be clipped (or not) according to this option.
final
crossAxisAlignment → WrapCrossAlignment
How the children within a run should be aligned relative to each other in the cross axis.
final
direction → Axis
The direction to use as the main axis.
final
hashCode → int
The hash code for this object.
nonVirtual">@nonVirtualread-onlyinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
runAlignment → WrapAlignment
How the runs themselves should be placed in the cross axis.
final
runSpacing → double
How much space to place between the runs themselves in the cross axis.
final
runtimeType → Type
A representation of the runtime type of the object.
read-onlyinherited
spacing → double
How much space to place between children in a run in the main axis.
final
textDirection → TextDirection?
Determines the order to lay children out horizontally and how to interpret start and end in the horizontal direction.
final
verticalDirection → VerticalDirection
Determines the order to lay children out vertically and how to interpret start and end in the vertical direction.
final

Methods

createElement() → MultiChildRenderObjectElement
RenderObjectWidgets always inflate to a RenderObjectElement subclass.
inherited
createRenderObject(BuildContext context) → RenderWrap
Creates an instance of the RenderObject class that this RenderObjectWidget represents, using the configuration described by this RenderObjectWidget.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
protected">@protectedinherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
override
didUnmountRenderObject(covariant RenderObject renderObject) → void
A render object previously associated with this widget has been removed from the tree. The given RenderObject will be of the same type as returned by this object's createRenderObject.
protected">@protectedinherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited
updateRenderObject(BuildContext context, covariant RenderWrap renderObject) → void
Copies the configuration described by this RenderObjectWidget to the given RenderObject, which will be of the same type as returned by this object's createRenderObject.
override

Operators

operator ==(Object other) → bool
The equality operator.
nonVirtual">@nonVirtualinherited