SideBySide class

The SideBySide widget arranges its children widgets horizontally, achieving a layout that is not possible with Row or RowSuper widgets.

The first widget in children will be on the left, and will occupy as much horizontal space as it wants, up to the available horizontal space. Then, the next widget will be displayed to the right of the previous widget, and so on, one by one, until they run out of available space. After the available space is occupied, the widgets that did not fit will not be displayed (or, more precisely, will be sized as 0 width).

Why this layout is not possible with Row?

Suppose you want to display two texts is a row, such as they occupy the available space: Row(children: [Text("One"), Text("Two")]). If the available horizontal space is not enough, the texts will overflow. You can fix this by wrapping the texts in Expanded widgets, but then they will each occupy half of the available space. If instead you use Flexible to wrap the texts, they will occupy the available space only if there is enough space for both of them, otherwise they will each occupy half of the available space.

If instead you use SideBySide(children: [Text("One"), Text("Two")]), the first text will occupy as much space as it wants, and the second text will occupy the remaining space, if there is any.

The last widget

The last widget in children is an is a special case, for two reasons. First, it will be given all the remaining horizontal space, after the previous widgets have been displayed. This means you can align it to the right if you want:

SideBySide(
   children: [
      const Text("Some text", textWidthBasis: TextWidthBasis.longestLine),
      Align(
         alignment: Alignment.centerRight,
         child: const Text("more text", textWidthBasis: TextWidthBasis.longestLine),
      ),
   ],
);

Second, you can specify the minimum width that it should occupy, using the minEndChildWidth property. This means that the last widget will occupy AT LEAST that width, even if it means that the previous widgets will be pushed out of the available space. However, if the total available space is less than minEndChildWidth, then the last widget will be displayed only up to the available space.

Gaps

You can add gaps between the widgets, using the gaps property. The gaps are a list of doubles representing pixels. If you have two children, you should provide one gap. If you have three children, you should provide two gaps, and so on.

Note the gaps can be negative, in which case the widgets will overlap.

If you provide less than the required number of gaps, the last gap will be used for all the remaining widgets. If you provide more gaps than required, the extra gaps will be ignored.

Cross alignment and main axis size

The crossAxisAlignment property specifies how to align the widgets vertically. The default is to center them. At the moment, only CrossAxisAlignment.start, CrossAxisAlignment.end and CrossAxisAlignment.center work. If you provide CrossAxisAlignment.baseline or CrossAxisAlignment.stretch, you'll get an UnimplementedError.

The mainAxisSize property determines whether the widget will occupy the full available width (MainAxisSize.max) or only as much as it needs (MainAxisSize.min).

Using Text as children

When you use Text widgets in your children, it's strongly recommended that you use property textWidthBasis: TextWidthBasis.longestLine. The default textWidthBasis is usually textWidthBasis: TextWidthBasis.parent, which is almost never what you want. For example, instead of writing: Text("Hello"), you should write: Text("Hello", textWidthBasis: TextWidthBasis.longestLine).

Examples

Suppose you want to create a title aligned to the left, with a divider that occupies the rest of the space. You want the distance between the title and the divider to be at least 8 pixels, and you want the divider to occupy at least 20 pixels of horizontal space:

return SideBySide(
  children: [
    Text("First Chapter", textWidthBasis: TextWidthBasis.longestLine),
    Divider(color: Colors.grey),
  ],
  gaps: [8.0],
  minEndChildWidth: 20.0,
);

Another example, with 3 widgets:

return SideBySide(
  children: [
    Text("Hello!", textWidthBasis: TextWidthBasis.longestLine),
    Text("How are you?", textWidthBasis: TextWidthBasis.longestLine),
    Text("I'm good, thank you.", textWidthBasis: TextWidthBasis.longestLine),
  ],
  gaps: [8.0, 12.0],
);

Deprecated usage

The startChild and endChild properties are deprecated. Use the children property instead. The innerDistance property is also deprecated. Use the gaps property instead.

For example, this deprecated code:

return SideBySide(
  startChild: Text("Hello!", textWidthBasis: TextWidthBasis.longestLine),
  endChild: Text("How are you?", textWidthBasis: TextWidthBasis.longestLine),
  innerDistance: 8.0,
);

Should be replaced with:

return SideBySide(
  children: [
    Text("Hello!", textWidthBasis: TextWidthBasis.longestLine),
    Text("How are you?", textWidthBasis: TextWidthBasis.longestLine),
  ],
  gaps: [8.0],
);

For more info, see: https://pub.dartlang.org/packages/assorted_layout_widgets

Inheritance

• Object
• DiagnosticableTree
• Widget
• RenderObjectWidget
• MultiChildRenderObjectWidget
• SideBySide

Available extensions

• AnimateWidgetExtensions
• GenericExtensions

Constructors

SideBySide({Key? key, List<Widget> children = const [], @Deprecated('Use the `children` property instead.') Widget? startChild, @Deprecated('Use the `children` property instead.') Widget? endChild, List<double> gaps = const [], CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, TextDirection textDirection = TextDirection.ltr, @Deprecated('Use the `gaps` property instead.') double innerDistance = 0, double minEndChildWidth = 0, MainAxisSize mainAxisSize = MainAxisSize.max})

The SideBySide widget arranges its children widgets horizontally, achieving a layout that is not possible with Row or RowSuper widgets.

factory

Properties

children → List<Widget>

The widgets below this widget in the tree.

final, inherited

crossAxisAlignment → CrossAxisAlignment

The crossAxisAlignment property specifies how to align the widgets vertically. The default is to center them. At the moment, only CrossAxisAlignment.start, CrossAxisAlignment.end and CrossAxisAlignment.center work.

final

endChild → Widget

The endChild will be on the right of the startChild , and it will occupy the remaining of the available space. This means, if the start widget occupies all the available space, then endChild widget will not be displayed (since it will be sized as 0 width). Note that endChild should NOT be used directly (use children instead).

final

hashCode → int

The hash code for this object.

no setter, inherited

innerDistance → double

The distance in pixels between the widgets. The default is zero. It can be negative, in which case the widgets will overlap.

final

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

mainAxisSize → MainAxisSize

Determines whether the widget will occupy the full available width (MainAxisSize.max) or only as much as it needs (MainAxisSize.min).

final

minEndChildWidth → double

The minimum width, in pixels, that the endChild should occupy. The default is zero.

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

startChild → Widget

The startChild will be on the left, and will occupy as much space as it wants, up to the available horizontal space. Note that startChild should NOT be used directly (use children instead).

final

textDirection → TextDirection

The textDirection property controls the direction that children are rendered in. TextDirection.ltr is the default direction, so the first child is rendered to the left, with subsequent children following to the right. If you want to order children in the opposite direction (right to left), then use TextDirection.rtl.

final

Methods

addMaterialWidget() → Material

Available on Widget, provided by the GenericExtensions extension

addTooltipWidget(String toolTip) → Tooltip

Available on Widget, provided by the GenericExtensions extension

animate({Key? key, List<Effect>? effects, AnimateCallback? onInit, AnimateCallback? onPlay, AnimateCallback? onComplete, bool? autoPlay, Duration? delay, AnimationController? controller, Adapter? adapter, double? target, double? value}) → Animate

Available on Widget, provided by the AnimateWidgetExtensions extension

Wraps the target Widget in an Animate instance, and returns the instance for chaining calls. Ex. myWidget.animate() is equivalent to Animate(child: myWidget).

borderRadius([BorderRadiusGeometry? borderRadius]) → Widget

Available on Widget, provided by the GenericExtensions extension

boxDecoration([BoxDecoration? boxDecoration]) → Widget

Available on Widget, provided by the GenericExtensions extension

colorFilter([ColorFilter? colorFilter]) → Widget

Available on Widget, provided by the GenericExtensions extension

set parent widget in center

createElement() → MultiChildRenderObjectElement

RenderObjectWidgets always inflate to a RenderObjectElement subclass.

inherited

createRenderObject(BuildContext context) → _RenderSideBySide

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.

inherited

debugFillProperties(DiagnosticPropertiesBuilder properties) → void

Add additional properties associated with the node.

inherited

didUnmountRenderObject(covariant RenderObject renderObject) → void

This method is called when a RenderObject that was previously associated with this widget is removed from the render tree. The provided RenderObject will be of the same type as the one created by this widget's createRenderObject method.

inherited

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent 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, int wrapWidth = 65}) → 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 _RenderSideBySide 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.

inherited