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,
  
```