Scribd
Upload
5 views26 pages

Flutter For Web Developpers

This document serves as a guide for web developers transitioning to Flutter, providing mappings between HTML/CSS and Flutter/Dart code. It covers fundamental differences in layout design, including constraints, text styling, and component alignment. The document includes practical examples for common UI tasks such as setting background colors, centering components, and applying gradients.

Uploaded by

dieuavecnous225
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views26 pages

Flutter For Web Developpers

This document serves as a guide for web developers transitioning to Flutter, providing mappings between HTML/CSS and Flutter/Dart code. It covers fundamental differences in layout design, including constraints, text styling, and component alignment. The document includes practical examples for common UI tasks such as setting background colors, centering components, and applying gradients.

Uploaded by

dieuavecnous225
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

Flutter for web developers | Flutter https://docs.flutter.

dev/get-started/flutter-for/web-devs

 On this pageManipulating text

Flu�er for web developers


Get started  Flu�er for  Flu�er for web developers

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 Flu�er/Dart
code equivalents.

Flu�er is a framework for building cross-pla�orm applications that uses the Dart
programming language. To understand some di�erences between programming with Dart
and programming with Javascript, see Learning Dart as a JavaScript Developer.

One of the fundamental di�erences between designing a web layout and a Flu�er 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 Flu�er model.

css
{
box-sizing: border-box;
}

• In Flu�er, the default styling of the 'Lorem ipsum' text is de�ned by the
bold24Roboto variable as follows, to keep the syntax simple:

1 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

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

How is react-style, or declarative, programming di�erent from the traditional


imperative style? For a comparison, see Introduction to declarative UI.

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 a�ributes 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 Flu�er, child elements or widgets are anchored at the top le�, 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;
}

2 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

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,
),
);

Se�ing background color


In Flu�er, 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 pale�e.

3 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

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,
),
);

4 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

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 e�ect in CSS, the parent element uses either a �ex or table-cell
display behavior. The examples on this page show the �ex 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(

5 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

// grey box
width: 320,
height: 240,
color: Colors.grey[300],
child: Center(
child: Text(
'Lorem ipsum',
style: bold24Roboto,
),
),
);

Se�ing container width


To specify the width of a Container widget, use its width property. This is a �xed width,
unlike the CSS max-width property that adjusts the container width up to a maximum
value. To mimic that e�ect in Flu�er, 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>
</div>

.grey-box {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}

6 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

.red-box {
background-color: #ef5350; /* red 400 */
padding: 16px;
color: #ffffff;
width: 100%;
max-width: 240px;
}

dart
final container = Container(
// grey box
width: 320,
height: 240,
color: Colors.grey[300],
child: Center(
child: Container(
// red box
width: 240, // max-width is 240
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.red[400],
),
child: Text(
'Lorem ipsum',
style: bold24Roboto,
),
),
),
);

Manipulating position and size


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

Se�ing absolute position

7 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

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.

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

.grey-box {
position: relative;
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Roboto;
}
.red-box {
background-color: #ef5350; /* red 400 */
padding: 16px;
color: #ffffff;
position: absolute;
top: 24px;
left: 24px;
}

dart
final container = Container(
// grey box
width: 320,
height: 240,
color: Colors.grey[300],
child: Stack(
children: [
Positioned(
// red box

8 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

left: 24,
top: 24,
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.red[400],
),
child: Text(
'Lorem ipsum',
style: bold24Roboto,
),
),
),
],
),
);

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, in which the widget is rotated on the Z axis, create a new
Matrix4 identity object and use its rotateZ() method to specify the rotation factor
using radians (degrees × π / 180).

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

.grey-box {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;

9 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

font: 900 24px Roboto;


display: flex;
align-items: center;
justify-content: center;
}
.red-box {
background-color: #ef5350; /* red 400 */
padding: 16px;
color: #ffffff;
transform: rotate(15deg);
}

10 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

dart
final container = Container(
// grey box
width: 320,
height: 240,
color: Colors.grey[300],
child: Center(
child: Transform(
alignment: Alignment.center,
transform: Matrix4.identity()..rotateZ(15 * 3.1415927 / 180),
child: Container(
// red box
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.red[400],
),
child: Text(
'Lorem ipsum',
style: bold24Roboto,
textAlign: TextAlign.center,
),
),
),
),
);

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.

css
<div class="grey-box">

11 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

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

.grey-box {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.red-box {
background-color: #ef5350; /* red 400 */
padding: 16px;
color: #ffffff;
transform: scale(1.5);
}

dart
final container = Container(
// grey box
width: 320,
height: 240,
color: Colors.grey[300],
child: Center(
child: Transform(
alignment: Alignment.center,
transform: Matrix4.identity()..scale(1.5),
child: Container(
// red box
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.red[400],
),

12 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

child: Text(
'Lorem ipsum',
style: bold24Roboto,
textAlign: TextAlign.center,
),
),
),
),
);

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 �ll.

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

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

.grey-box {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}

13 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

.red-box {
padding: 16px;
color: #ffffff;
background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%);
}

dart
final container = Container(
// grey box
width: 320,
height: 240,
color: Colors.grey[300],
child: Center(
child: Container(
// red box
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment(0.0, 0.6),
colors: <Color>[
Color(0xffef5350),
Color(0x00ef5350),
],
),
),
padding: const EdgeInsets.all(16),
child: Text(
'Lorem ipsum',
style: bold24Roboto,
),
),
),
);

Horizontal gradient

14 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

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

.grey-box {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.red-box {
padding: 16px;
color: #ffffff;
background: linear-gradient(90deg, #ef5350, rgba(0, 0, 0, 0) 80%);
}

dart
final container = Container(
// grey box
width: 320,
height: 240,
color: Colors.grey[300],
child: Center(
child: Container(
// red box
padding: const EdgeInsets.all(16),
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment(-1.0, 0.0),
end: Alignment(0.6, 0.0),
colors: <Color>[

15 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

Color(0xffef5350),
Color(0x00ef5350),
],
),
),
child: Text(
'Lorem ipsum',
style: bold24Roboto,
),
),
),
);

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 object. Create a new BorderRadius object that speci�es the radius for
rounding each corner.

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

.grey-box {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;

16 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

}
.red-box {
background-color: #ef5350; /* red 400 */
padding: 16px;
color: #ffffff;
border-radius: 8px;
}

dart
final container = Container(
// grey box
width: 320,
height: 240,
color: Colors.grey[300],
child: Center(
child: Container(
// red circle
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.red[400],
borderRadius: const BorderRadius.all(
Radius.circular(8),
),
),
child: Text(
'Lorem ipsum',
style: bold24Roboto,
),
),
),
);

Adding box shadows


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

17 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

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

In Flu�er, each property and value is speci�ed separately. Use the boxShadow property of
BoxDecoration to create a list of BoxShadow widgets. You can de�ne one or multiple
BoxShadow widgets, which can be stacked to customize the shadow depth, color, and so
on.

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

.grey-box {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.red-box {
background-color: #ef5350; /* red 400 */
padding: 16px;
color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8),
0 6px 20px rgba(0, 0, 0, 0.5);
}

dart
final container = Container(
// grey box
width: 320,
height: 240,
margin: const EdgeInsets.only(bottom: 16),

18 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

decoration: BoxDecoration(
color: Colors.grey[300],
),
child: Center(
child: Container(
// red box
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.red[400],
boxShadow: const <BoxShadow>[
BoxShadow(
color: Color(0xcc000000),
offset: Offset(0, 2),
blurRadius: 4,
),
BoxShadow(
color: Color(0x80000000),
offset: Offset(0, 6),
blurRadius: 20,
),
],
),
child: Text(
'Lorem ipsum',
style: bold24Roboto,
),
),
),
);

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, though there are basic shapes.

While this approach is supported with the borderRadius property of BoxDecoration ,


Flu�er provides a shape property with BoxShape enum for this purpose.

19 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

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

.grey-box {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.red-circle {
background-color: #ef5350; /* red 400 */
padding: 16px;
color: #ffffff;
text-align: center;
width: 160px;
height: 160px;
border-radius: 50%;
}

dart
final container = Container(
// grey box
width: 320,
height: 240,
color: Colors.grey[300],
child: Center(
child: Container(
// red circle
decoration: BoxDecoration(
color: Colors.red[400],

20 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

shape: BoxShape.circle,
),
padding: const EdgeInsets.all(16),
width: 160,
height: 160,
child: Text(
'Lorem ipsum',
style: bold24Roboto,
textAlign: TextAlign.center,
),
),
),
);

Manipulating text
The following examples show how to specify fonts and other text a�ributes. 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 le�er or word by giving a
length value for the le�er-spacing and word-spacing properties, respectively. The amount
of space can be in px, pt, cm, em, etc.

In Flu�er, 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.

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

.grey-box {
background-color: #e0e0e0; /* grey 300 */
width: 320px;

21 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.red-box {
background-color: #ef5350; /* red 400 */
padding: 16px;
color: #ffffff;
letter-spacing: 4px;
}

dart
final container = Container(
// grey box
width: 320,
height: 240,
color: Colors.grey[300],
child: Center(
child: Container(
// red box
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.red[400],
),
child: const Text(
'Lorem ipsum',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.w900,
letterSpacing: 4,
),
),
),
),

22 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

);

Making inline forma�ing changes


A Text widget lets you display text with some forma�ing 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 objects that can be
individually styled.

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

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

.grey-box {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.red-box {
background-color: #ef5350; /* red 400 */
padding: 16px;
color: #ffffff;
}
.red-box em {
font: 300 48px Roboto;
font-style: italic;
}

23 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

dart
final container = Container(
// grey box
width: 320,
height: 240,
color: Colors.grey[300],
child: Center(
child: Container(
// red box
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: const EdgeInsets.all(16),
child: RichText(
text: TextSpan(
style: bold24Roboto,
children: const <TextSpan>[
TextSpan(text: 'Lorem '),
TextSpan(
text: 'ipsum',
style: TextStyle(
fontWeight: FontWeight.w300,
fontStyle: FontStyle.italic,
fontSize: 48,
),
),
],
),
),
),
),
);

Creating text excerpts


An excerpt displays the initial line(s) of text in a paragraph, and handles the over�ow text,
o�en using an ellipsis.

24 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

In Flu�er, 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 over�ow text.

css
<div class="grey-box">
<div class="red-box">
Lorem ipsum dolor sit amet, consec etur
</div>
</div>

.grey-box {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.red-box {
background-color: #ef5350; /* red 400 */
padding: 16px;
color: #ffffff;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

dart
final container = Container(
// grey box
width: 320,
height: 240,
color: Colors.grey[300],
child: Center(
child: Container(

25 of 26 19/06/2025 13:52
Flutter for web developers | Flutter https://docs.flutter.dev/get-started/flutter-for/web-devs

// red box
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: const EdgeInsets.all(16),
child: Text(
'Lorem ipsum dolor sit amet, consec etur',
style: bold24Roboto,
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
),
),
);

Was this page's content helpful?

 

Flu�er logo

Except as otherwise noted, this site is licensed under a Creative Commons A�ribution 4.0 International
License, and code samples are licensed under the 3-Clause BSD License.

Terms Brand Privacy Security

26 of 26 19/06/2025 13:52

You might also like