Setting container width

To specify the width of a
Container
widget, use its width property. This is a fixed width, unlike the
CSS max-width property that adjusts the container width up to a maximum value.
To mimic that effect in Flutter, use the constraints property of the
Container. Create a new
BoxConstraints
widget with a minWidth or maxWidth.

For nested Containers, if the parent’s width is less than the child’s width,
the child Container sizes itself to match the parent.

Scaling components

To scale a widget up or down, nest it in a
Transform
widget. Use the Transform widget’s alignment and origin
properties to specify the transform origin (fulcrum) in relative or
absolute terms, respectively.

For a simple scaling operation along the x-axis, create a new
Matrix4
identity object and use its scale() method to specify the scaling factor.

When you scale a parent widget, its child widgets are scaled accordingly.

Applying a linear gradient

To apply a linear gradient to a widget’s background, nest it in a
Container
widget. Then use the Container widget’s decoration property to create a
BoxDecoration
object, and use BoxDecoration’s gradient property to transform the
background
fill.

The gradient “angle” is based on the Alignment (x, y) values:

If the beginning and ending x values are equal, the gradient is vertical
(0° | 180°).

If the beginning and ending y values are equal, the gradient is horizontal
(90° | 270°).

Adding box shadows

In CSS you can specify shadow offset and blur in shorthand,
using the box-shadow property. This example shows two box shadows,
with properties:

xOffset: 0px, yOffset: 2px, blur: 4px, color: black @80% alpha

xOffset: 0px, yOffset: 06x, blur: 20px, color: black @50% alpha

In Flutter, each property and value is specified separately.
Use the boxShadow property of BoxDecoration to create a list of
BoxShadow
widgets. You can define one or multiple BoxShadow widgets, which can be stacked
to customize the shadow depth, color, etc.

Manipulating text

The following examples show how to specify fonts and other text attributes. They
also show how to transform text strings, customize spacing, and create excerpts.

Adjusting text spacing

In CSS you specify the amount of white space between each letter or word by
giving a length value for the letter-spacing and word-spacing properties,
respectively. The amount of space can be in px, pt, cm, em, etc.

In Flutter, you specify white space as logical pixels
(negative values are allowed)
for the letterSpacing and wordSpacing properties of a
TextStyle
child of a Text widget.

Making inline formatting changes

A Text widget lets
you display text with the same formatting characteristics. To
display text that uses multiple styles (in this example, a single word with
emphasis), use a
RichText
widget instead. Its text property can specify one or more
TextSpan widgets
that can be individually styled.

In the following example, “Lorem” is in a TextSpan widget with the default
(inherited) text styling, and “ipsum” is in a separate TextSpan with custom
styling.

Creating text excerpts

An excerpt displays the initial line(s) of text in a paragraph, and handles the
overflow text, often using an ellipsis. In HTML/CSS an excerpt can be no longer
than one line. Truncating after multiple lines requires some JavaScript code.

In Flutter, use the maxLines property of a
Text
widget to specify the number of lines to include in the excerpt, and the
overflow property for handling overflow text.