Widget Gallery

This page describes the widgets available in Sky. These widgets are
general-purpose and don’t offer an opinion about the visual style of your app.

Container

Container is a general-purpose widget that combines several basic widgets in
order to make them easier to use.

• BoxDecoration decoration Draw the given decoration around this container.
• double width Forces the container to have the given width.
• double height Force the container to have the given height.
• EdgeDims margin Surrounds the container (i.e., outside the container’s
  decoration) on the top, right, bottom, and left with the given amount of
  space.
• EdgeDims padding Surrounds the container’s child (i.e., inside the
  container’s decoration) on the top, right, bottom, and left with the given
  amount of space.
• Matrix4 transform Apply the given matrix before painting the container.
• BoxConstraints constraints Force the width and height of the container to
  respect the given constraints.

Layout models

There are two flex layout models:

• Row: Layout a list of child widgets in the horizontal direction.

• Column: Layout a list of child widgets in the vertical direction.

The direction along which the widgets are laid out is called the
main direction and the other axis is called the cross direction.
These flex widgets size themselves to the maximum size permitted by
its parent, unless that would be infinite size, in which case they
shrink-wrap their children. For details, see flex.md.

Each child of a flex widget is either flexible or inflexible.
The flex first lays out its inflexible children and subtracts their
total length along the main direction to determine how much free space
is available. The flex then divides this free space among the flexible
children in a ratio determined by their flex properties.

The alignItems property determines how children are positioned in
the cross direction. The justifyContent property determines how the
remaining free space (if any) in the main direction is allocated.

• Flexible: Mark this child as being flexible with the given flex ratio.

There is also a stacking layout model:

• Stack: Layout a list of child widgets on top of each other from back to
  front. Each child of a Stack widget is either positioned or
  non-positioned. The stack sizes itself to the contain all the
  non-positioned children, which are located at the top-left corner of the
  stack. The positioned children are then located relative to the stack
  according to their top, right, bottom, and left properties.

  • Positioned: Mark this child as positioned. If the top property is
    non-null, the top edge of this child will be positioned top layout units
    from the top of the stack widget. The right, bottom, and right
    properties work analogously. Note that if the both the top and bottom
    properties are non-null, then the child will be forced to have exactly the
    height required to satisfy both constraints. Similarly, setting the
    right and left properties to non-null values will force the child to
    have a particular width.

Positioning and sizing

• Padding Surround the child with empty space on the top, right, bottom, and
  left according to the given EdgeDims.

• Center Center the child widget within the space occupied by this widget.

• SizedBox Force the child widget to have a particular width or height
  (or both).

• ConstrainedBox Apply the given BoxConstraints to the child widget as
  additional constraints during layout. This widget is a generalization of
  SizedBox.

• AspectRatio Force the child widget’s width and height to have the given
  aspectRatio, expressed as a ratio of width to height.

• Transform Apply the given matrix to the child before painting the child.
  This widget is useful for adjusting the visual size and position of a widget
  without affecting layout.

• Viewport Layout the child widget at a larger size than fits in this widget
  and render only the portion of the child that is visually contained by this
  widget. When rendering, add offset to the child’s vertical position to
  control which part of the child is visible through the viewport.
  TODO(abarth): Add support for horizontal viewporting.

• SizeObserver Whenever the child widget changes size, this widget calls the
  callback. Warning: If the callback changes state that affects the size of
  the child widget, it is possible to create an infinite loop.

• ShrinkWrapWidth Force the child widget to have a width equal to its max
  intrinsic width. TODO(abarth): Add a link to the definition of max intrinsic
  width. Optionally, round up the child widget’s width or height (or both) to
  a multiple of stepWidth or stepHeight, respectively. Note: The layout
  performed by ShrinkWrapWidth is relatively expensive and should be used
  sparingly.

• Baseline If the child widget has a TextBaseline of the given
  baselineType, position the child such that its baseline is at baseline
  layout units from the top of this widget.

Painting effects

• Opacity Adjusts the opacity of the child widget, making the child partially
  transparent. The amount of transparency is controlled by opacity, with 0.0
  0.0 is fully transparent and 1.0 is fully opaque.

• ClipRect Apply a rectangular clip to the child widget. The dimensions of
  the clip match the dimensions of the child.

• ClipRRect Apply a rounded-rect clip the child widget. The bounds of the
  clip match the bounds of the child widget with xRadius and yRadius
  controlling the x and y radius of the rounded corner, respectively.

• ClipOval Apply an oval clip to the child widget. The oval will be
  axis-aligned, with its horizontal and vertical bounds matching the bounds of
  the child widget.

• DecoratedBox Draw the given BoxDecoration surrounding the child widget.

• ColorFilter Applies a color filter to the child widget, for example to
  tint the child a given color.

• CustomPaint Calls callback during the paint phase with the current
  Canvas and Size. The widget occupies the region of the canvas starting at
  the origin (i.e., x = 0.0 and y = 0.0) and of the given size (i.e.,
  x = size.width and y = size.height).

  Use the token to invalidate the painting. As long as the any new token
  is operator== the current token, the CustomPaint widget is permitted
  to retain a recording of the painting produced by the previous callback
  call.