HTML/CSS Analogs in Flutter

This page is for users who are familiar with the HTML and CSS syntax for arranging components of an application’s UI. It maps HTML/CSS code snippets to their Flutter/Dart code equivalents.

Performing Basic Layout Operations

The following examples show how to perform the most common UI layout tasks.

Aligning Text

In both HTML and Flutter, by default child elements or widgets are anchored at the top left.

<div class="greybox">
    Lorem ipsum
</div>

.greybox {
      background-color: #e0e0e0; /* grey 300 */
      width: 320px;
      height: 240px;
      font: 900 24px Roboto;
    }
var container = new Container( // grey box
  child: new Text(
    "Lorem ipsum",
    style: bold24Roboto,
  ),
  width: 320.0,
  height: 240.0,
  decoration: new BoxDecoration(
    backgroundColor: Colors.grey[300],
  ),
);

Setting Background Color

In Flutter, you set background color in a Container’s decoration property.

The CSS examples use the hex color equivalents to the Material color palette.

<div class="greybox">
  Lorem ipsum
</div>

.greybox {
      background-color: #e0e0e0;  /* grey 300 */
      width: 320px;
      height: 240px;
      font: 900 24px Roboto;
    }
var container = new Container( // grey box
    child: new Text(
      "Lorem ipsum",
      style: bold24Roboto,
    ),
    width: 320.0,
    height: 240.0,
    decoration: new BoxDecoration(
      backgroundColor: Colors.grey[300],
    ),
  );

Centering Components

A Center widget centers its child both horizontally and vertically.

To accomplish a similar effect in CSS, the parent element uses either a “flex” or “table-cell” display behavior. The examples on this page show the flex behavior.

<div class="greybox">
  Lorem ipsum
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center; 
}
var container = new Container( // grey box
  child:  new Center(
    child:  new Text(
      "Lorem ipsum",
      style: bold24Roboto,
    ),
  ),
  width: 320.0,
  height: 240.0,
  decoration: new BoxDecoration(
    backgroundColor: Colors.grey[300],
  ),
);

Setting Container Width

To specify the width of a Container widget you set its width property. This is equivalent to specifying the CSS max-width property.

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

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px; 
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
    width: 100%; 
  max-width: 240px; 
}
var container = new Container( // grey box
  child: new Center(
    child: new Container( // red box
      child: new Text(
        "Lorem ipsum",
        style: bold24Roboto,
      ),
      decoration: new BoxDecoration(
        backgroundColor: Colors.red[400],
      ),
      padding: new EdgeInsets.all(16.0),
      width: 240.0, //max-width is 240.0
    ),
  ),
  width: 320.0, 
  height: 240.0,
  decoration: new BoxDecoration(
    backgroundColor: Colors.grey[300],
  ),
);

Manipulating Position and Size

The following examples show how to perform more complex operations on widget position, size, and background.

Setting Absolute Position

By default, widgets are positioned relative to their parent.

To specify an absolute position for a widget as x-y coordinates, nest it in a Positioned widget that is in turn nested in a Stack widget.

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  position: relative; 
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  position: absolute;
  top: 24px;
  left: 24px; 
}
var container = new Container( // grey box
  child: new Stack(
    children: [
      new Positioned( // red box
        child:  new Container(
          child: new Text(
            "Lorem ipsum",
            style: bold24Roboto,
          ),
          decoration: new BoxDecoration(
            backgroundColor: Colors.red[400],
          ),
          padding: new EdgeInsets.all(16.0),
        ),
        left: 24.0,
        top: 24.0,
      ),
    ],
  ), 
  width: 320.0,
  height: 240.0,
  decoration: new BoxDecoration(
    backgroundColor: Colors.grey[300],
  ), 
);

Rotating Components

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

For a simple 2D rotation, the widget is rotated on the Z axis using radians. (degrees × π / 180)

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  transform: rotate(15deg); 
}
var container = new Container( // gray box
  child: new Center(
    child:  new Transform(
      child:  new Container( // red box
        child: new Text(
          "Lorem ipsum",
          style: bold24Roboto,
          textAlign: TextAlign.center,
        ),
        decoration: new BoxDecoration(
          backgroundColor: Colors.red[400],
        ),
        padding: new EdgeInsets.all(16.0),
      ),
      alignment: FractionalOffset.center,
      transform: new Matrix4.identity()
        ..rotateZ(15 * 3.1415927 / 180),
    ), 
  ),
  width: 320.0,
  height: 240.0,
  decoration: new BoxDecoration(
    backgroundColor: Colors.grey[300],
  ),
);

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 and 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, all its child widgets are scaled accordingly.

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  transform: scale(1.5); 
}
var container = new Container( // gray box
  child: new Center(
    child:  new Transform(
      child:  new Container( // red box
        child: new Text(
          "Lorem ipsum",
          style: bold24Roboto,
          textAlign: TextAlign.center,
        ),
        decoration: new BoxDecoration(
          backgroundColor: Colors.red[400],
        ),
        padding: new EdgeInsets.all(16.0),
      ),
      alignment: FractionalOffset.center,
      transform: new Matrix4.identity()
        ..scale(1.5),
     ), 
  width: 320.0,
  height: 240.0,
  decoration: new BoxDecoration(
    backgroundColor: Colors.grey[300],
  ),
);

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 FractionalOffset (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°).

Vertical Gradient

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  padding: 16px;
  color: #ffffff;
  background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%); 
}
var container = new Container( // grey box
  child: new Center(
    child: new Container( // red box
      child: new Text(
        "Lorem ipsum",
        style: bold24Roboto,
      ),
      decoration: new BoxDecoration(
        gradient: new LinearGradient(
          begin: const FractionalOffset(0.5, 0.0),
          end: const FractionalOffset(0.5, 0.8),
          colors: <Color>[
            const Color(0xffef5350), 
            const Color(0x00ef5350)
          ],
        ),
      ), 
      padding: new EdgeInsets.all(16.0),
    ),
  ),
  width: 320.0,
  height: 240.0,
  decoration: new BoxDecoration(
    backgroundColor: Colors.grey[300],
  ),
);

Horizontal Gradient

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  padding: 16px;
  color: #ffffff;
  background: linear-gradient(90deg, #ef5350, rgba(0, 0, 0, 0) 80%); 
}
var container = new Container( // grey box
  child: new Center(
    child: new Container( // red box
      child: new Text(
        "Lorem ipsum",
        style: bold24Roboto,
      ),
      decoration: new BoxDecoration(
        gradient: new LinearGradient(
          begin: const FractionalOffset(0.0, 0.5),
          end: const FractionalOffset(0.8, 0.5),
          colors: <Color>[
            const Color(0xffef5350), 
            const Color(0x00ef5350)
          ],
        ),
      ), 
      padding: new EdgeInsets.all(16.0),
    ),
  ),
  width: 320.0,
  height: 240.0,
  decoration: new BoxDecoration(
    backgroundColor: Colors.grey[300],
  ),
);

Manipulating Shapes

The following examples show how to make and customize shapes.

Rounding Corners

To round the corners of a rectangular shape, use the borderRadius property of a BoxDecoration widget. Create a new BorderRadius widget that specifies the radii for rounding each corner.

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* gray 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  border-radius: 8px; 
}
var container = new Container( // grey box
  child: new Center(
    child: new Container( // red circle
      child: new Text(
        "Lorem ipsum",
        style: bold24Roboto,
      ),
      decoration: new BoxDecoration(
        backgroundColor: Colors.red[400],
        borderRadius: new BorderRadius.all(
          const Radius.circular(8.0),
        ), 
      ),
      padding: new EdgeInsets.all(16.0),
    ),
  ),
  width: 320.0,
  height: 240.0,
  decoration: new BoxDecoration(
    backgroundColor: Colors.grey[300],
  ),
);

Adding Box Shadows

In CSS you can specify shadow offset and blur in shorthand, using the box-shadow property. In this example, the shadow properties are xOffset: 0px, yOffset: 3px, blur: 12px, color: black @40% alpha.

In Flutter, each property and value is specified separately. Use the boxShadow property of BoxDecoration to create a new BoxShadow widget. Multiple BoxShadow widgets can be stacked to customize the shadow depth, color, etc.

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4); 
}
var container = new Container( // grey box
  child: new Center(
    child: new Container( // red box
      child: new Text(
        "Lorem ipsum",
        style: bold24Roboto,
      ),
      decoration: new BoxDecoration(
        backgroundColor: Colors.red[400],
        boxShadow: <BoxShadow>[
          new BoxShadow (
            color: const Color(0x66000000), 
            offset: new Offset(0.0, 3.0),
            blurRadius: 12.0,
          ),
        ], 
      ),
      padding: new EdgeInsets.all(16.0),
    ),
  ),
  width: 320.0,
  height: 240.0,
  decoration: new BoxDecoration(
    backgroundColor: Colors.grey[300],
  ),
  margin: new EdgeInsets.only(bottom: 16.0),
);

Making Circles and Ellipses

Making a circle in CSS requires a workaround of applying a border-radius of 50% to all four sides of a rectangle.

While this approach is supported with the borderRadius property of BoxDecoration, Flutter provides a shape property with BoxShape enum for this purpose.

<div class="greybox">
  <div class="redcircle">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* gray 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redcircle {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  text-align: center;
  width: 160px;
  height: 160px;
  border-radius: 50%; 
}
var container = new Container( // grey box
  child: new Center(
    child: new Container( // red circle
      child: new Text(
        "Lorem ipsum",
        style: bold24Roboto,
        textAlign: TextAlign.center, 
      ),
      decoration: new BoxDecoration(
        backgroundColor: Colors.red[400],
        shape: BoxShape.circle, 
      ),
      padding: new EdgeInsets.all(16.0),
      width: 160.0,
      height: 160.0, 
    ),
  ),
  width: 320.0,
  height: 240.0,
  decoration: new BoxDecoration(
    backgroundColor: Colors.grey[300],
  ),
);

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.

Specifying Fonts

Font style, size, and other text attributes that CSS handles with the “font” and “color” properties are individual properties of a TextStyle child of a Text widget.

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  font: normal 24px Georgia; 
}
var container = new Container( // grey box
  child: new Center(
    child: new Container( // red box
      child: new Text(
        "Lorem ipsum",
        style: new TextStyle(
          fontFamily: "Georgia",
          fontSize: 24.0,
          fontWeight: FontWeight.normal,
          color: Colors.white,
        ), 
      ),
      decoration: new BoxDecoration(
        backgroundColor: Colors.red[400],
      ),
      padding: new EdgeInsets.all(16.0),
    ),
  ),
  width: 320.0,
  height: 240.0,
  decoration: new BoxDecoration(
    backgroundColor: Colors.grey[300],
  ),
);

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.

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  letter-spacing: 4px; 
}
var container = new Container( // grey box
  child: new Center(
    child: new Container( // red box
      child: new Text(
        "Lorem ipsum",
        style: new TextStyle(
          color: Colors.white,
          fontSize: 24.0,
          fontWeight: FontWeight.w900,
          letterSpacing: 4.0, 
        ),
      ),
      decoration: new BoxDecoration(
        backgroundColor: Colors.red[400],
      ),
      padding: new EdgeInsets.all(16.0),
    ),
  ),
  width: 320.0,
  height: 240.0,
  decoration: new BoxDecoration(
    backgroundColor: Colors.grey[300],
  ),
);

Transforming Text

In HTML/CSS, you perform simple case transformations using the text-transform property.

In Flutter, you transform the contents of a Text widget using the methods and operators of the String class in the dart:core library.

<div class="greybox">
  <div class="redbox">
    Lorem ipsum 
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  text-transform: uppercase; 
}
var container = new Container( // grey box
  child: new Center(
    child: new Container( // red box
      child: new Text(
        "Lorem ipsum".toUpperCase(), 
        style: bold24Roboto,
      ),
      decoration: new BoxDecoration(
        backgroundColor: Colors.red[400],
      ),
      padding: new EdgeInsets.all(16.0),
    ),
  ),
  width: 320.0,
  height: 240.0,
  decoration: new BoxDecoration(
    backgroundColor: Colors.grey[300],
  ),
);

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.

<div class="greybox">
  <div class="redbox">
    Lorem <em>ipsum</em> 
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto; 
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
}
 .redbox em {
  font: 300 48px Roboto;
  font-style: italic;
} 
var container = new Container( // grey box
  child: new Center(
    child: new Container( // red box
      child:  new RichText(
        text: new TextSpan(
          style: bold24Roboto,
          children: <TextSpan>[
            new TextSpan(text: "Lorem "),
            new TextSpan(
              text: "ipsum",
              style: new TextStyle(
                fontWeight: FontWeight.w300,
                fontStyle: FontStyle.italic,
                fontSize: 48.0,
              ),
            ),
          ],
        ),
      ), 
      decoration: new BoxDecoration(
        backgroundColor: Colors.red[400],
      ),
      padding: new EdgeInsets.all(16.0),
    ),
  ),
  width: 320.0,
  height: 240.0,
  decoration: new BoxDecoration(
    backgroundColor: Colors.grey[300],
  ),
);

Creating Text Excerpts

An excerpt displays the initial line(s) of text in a paragraph, and handles the overflow text in some way. 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.

<div class="greybox">
  <div class="redbox">
    Lorem ipsum dolor sit amet, consec etur
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
}
var container = new Container( // grey box
  child: new Center(
    child: new Container( // red box
      child: new Text(
        "Lorem ipsum dolor sit amet, consec etur",
        style: bold24Roboto,
        overflow: TextOverflow.ellipsis,
        maxLines: 1, 
      ),
      decoration: new BoxDecoration(
        backgroundColor: Colors.red[400],
      ),
      padding: new EdgeInsets.all(16.0),
    ),
  ),
  width: 320.0,
  height: 240.0,
  decoration: new BoxDecoration(
    backgroundColor: Colors.grey[300],
  ),
);