Flutter Wrap class

Flutter wrap 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:

• Row, which places children in one line, and gives control over their alignment and spacing.
• The catalog of layout widgets.

Constructor

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.hardEdge, 
    List<Widget> children: const [
    ]
  }
)
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. [...]
final, inherited

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, read-only, inherited

key → Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited

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-only, inherited

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, inherited
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, 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 DiagnosticsNode.toStringDeep. [...]
inherited

toString({DiagnosticLevel minLevel: DiagnosticLevel.info}) → 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

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, inherited

Source Website: api.flutter.dev

https://api.flutter.dev/flutter/widgets/Wrap-class.html