Wrap class

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.

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: Text('AH')),
      label: Text('Hamilton'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('ML')),
      label: Text('Lafayette'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('HM')),
      label: Text('Mulligan'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('JL')),
      label: 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, List<Widget> children: const [] })
Creates a wrap layout. [...]

Properties

alignment → WrapAlignment
How the children within a run should be places in the main axis. [...]
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
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
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
children → List<Widget>
The widgets below this widget in the tree. [...]
final, inherited
hashCode → int
The hash code for this object. [...]
read-only, inherited
key → Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
runtimeType → Type
A representation of the runtime type of the object.
read-only, inherited

Methods

createRenderObject(BuildContext context) → RenderWrap
Creates an instance of the RenderObject class that this RenderObjectWidget represents, using the configuration described by this RenderObjectWidget. [...]
override
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
override
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
createElement() → MultiChildRenderObjectElement
RenderObjectWidgets always inflate to a RenderObjectElement subclass.
inherited
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
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, inherited
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 toStringDeep. [...]
inherited
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String
Returns 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

Operators

operator ==(dynamic other) → bool
The equality operator. [...]
inherited