Skip to main content

Flutter for web developers

Learn how to apply Web developer knowledge when building Flutter apps.

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.

Flutter is a framework for building cross-platform applications that uses the Dart programming language. To understand some differences between programming with Dart and programming with JavaScript, see Learning Dart as a JavaScript Developer.

One of the fundamental differences between designing a web layout and a Flutter layout, is learning how constraints work, and how widgets are sized and positioned. To learn more, see Understanding constraints.

The examples assume:

  • The HTML document starts with <!DOCTYPE html>, and the CSS box model for all HTML elements is set to border-box, for consistency with the Flutter model.

    css
    {
    box-sizing: border-box;
}

  • In Flutter, the default styling of the 'Lorem ipsum' text is defined by the bold24Roboto variable as follows, to keep the syntax simple:

    dart
    TextStyle bold24Roboto = const TextStyle(
  color: Colors.white,
  fontSize: 24,
  fontWeight: FontWeight.bold,
);

Performing basic layout operations

#

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

Styling and aligning text

#

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.

For text-align property in CSS that is used for aligning text, there is a textAlign property of a Text widget.

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

css 
<div class="grey-box">
  Lorem ipsum
</div>
​
.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Georgia;
}
dart 
final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: const Text(
    'Lorem ipsum',
    style: TextStyle(
      fontFamily: 'Georgia',
      fontSize: 24,
      fontWeight: FontWeight.bold,
    ),
    textAlign: TextAlign.center,
  ),
);

Setting background color

#

In Flutter, you set the background color using the color property or the decoration property of a Container. However, you cannot supply both, since it would potentially result in the decoration drawing over the background color. The color property should be preferred when the background is a simple color. For other cases, such as gradients or images, use the decoration property.

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

css 
<div class="grey-box">
  Lorem ipsum
</div>
​
.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
}
dart 
final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Text(
    'Lorem ipsum',
    style: bold24Roboto,
  ),
);
dart 
final container = Container(
  // grey box
  width: 320,
  height: 240,
  decoration: BoxDecoration(
    color: Colors.grey[300],
  ),
  child: Text(
    'Lorem ipsum',
    style: bold24Roboto,
  ),
);

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.

css 
<div class="grey-box">
  Lorem ipsum
</div>
​
.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
dart 
final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Text(
      'Lorem ipsum',
      style: bold24Roboto,
    ),
  ),
);

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.

css 
<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>