Movatterモバイル変換

[0]ホーム
URL:

Skip to main content

docs.flutter.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic.

Learn more

Don't miss ourDecember livestream, with updates on Flutter and live Q&A!

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, seeLearning 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, seeUnderstanding constraints.

The examples assume:

  • The HTML document starts with<!DOCTYPE html>, and the CSS box model for all HTML elements is set toborder-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 thebold24Roboto variable as follows, to keep the syntax simple:

    dart
    TextStylebold24Roboto=constTextStyle(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 aTextStyle child of aText widget.

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

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

css
<div>  Lorem ipsum</div>.grey-box {    background-color: #e0e0e0; /* grey 300 */    width: 320px;    height: 240px;    font: 900 24px Georgia;}
dart
finalcontainer=Container(// grey boxwidth:320,height:240,color:Colors.grey[300],child:constText('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 thecolor property or thedecoration property of aContainer. However, you cannot supply both, since it would potentially result in the decoration drawing over the background color. Thecolor property should be preferred when the background is a simple color. For other cases, such as gradients or images, use thedecoration property.

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

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

Centering components

#

ACenter 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>  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
finalcontainer=Container(// grey boxwidth:320,height:240,color:Colors.grey[300],child:Center(child:Text('Lorem ipsum',style:bold24Roboto,),),);

Setting container width

#

To specify the width of aContainer widget, use itswidth 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 theconstraints property of the Container. Create a newBoxConstraints widget with aminWidth ormaxWidth.

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>  <div>    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;    width: 100%;    max-width: 240px;}
dart
finalcontainer=Container(// grey boxwidth:320,height:240,color:Colors.grey[300],child:Center(child:Container(// red boxwidth:240,// max-width is 240padding:constEdgeInsets.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.

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 aPositioned widget that is, in turn, nested in aStack widget.

css
<div>  <div>    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
finalcontainer=Container(// grey boxwidth:320,height:240,color:Colors.grey[300],child:Stack(children:[Positioned(// red boxleft:24,top:24,child:Container(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:Colors.red[400],),child:Text('Lorem ipsum',style:bold24Roboto,),),),],),);

Rotating components

#

To rotate a widget, nest it in aTransform widget. Use theTransform widget'salignment andorigin 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 newMatrix4 identity object and use itsrotateZ() method to specify the rotation factor using radians (degrees × π / 180).

css
<div>  <div>    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: rotate(15deg);}
dart
finalcontainer=Container(// grey boxwidth: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 boxpadding:constEdgeInsets.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 aTransform widget. Use the Transform widget'salignment andorigin properties to specify the transform origin (fulcrum) in relative or absolute terms, respectively.

For a simple scaling operation along the x-axis, create a newMatrix4 identity object and use itsscale() method to specify the scaling factor.

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

css
<div>  <div>    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
finalcontainer=Container(// grey boxwidth:320,height:240,color:Colors.grey[300],child:Center(child:Transform(alignment:Alignment.center,transform:Matrix4.identity()..scaleByDouble(1.5,1.5,1.5,1.5),child:Container(// red boxpadding:constEdgeInsets.all(16),decoration:BoxDecoration(color:Colors.red[400],),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 aContainer widget. Then use theContainer widget'sdecoration property to create aBoxDecoration object, and useBoxDecoration'sgradient 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°).

Vertical gradient

#
css
<div>  <div>    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(180deg, #ef5350, rgba(0, 0, 0, 0) 80%);}
dart
finalcontainer=Container(// grey boxwidth:320,height:240,color:Colors.grey[300],child:Center(child:Container(// red boxdecoration:constBoxDecoration(gradient:LinearGradient(begin:Alignment.topCenter,end:Alignment(0.0,0.6),colors:<Color>[Color(0xffef5350),Color(0x00ef5350),],),),padding:constEdgeInsets.all(16),child:Text('Lorem ipsum',style:bold24Roboto,),),),);

Horizontal gradient

#
css
<div>  <div>    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
finalcontainer=Container(// grey boxwidth:320,height:240,color:Colors.grey[300],child:Center(child:Container(// red boxpadding:constEdgeInsets.all(16),decoration:constBoxDecoration(gradient:LinearGradient(begin:Alignment(-1.0,0.0),end:Alignment(0.6,0.0),colors:<Color>[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 theborderRadius property of aBoxDecoration object. Create a newBorderRadius object that specifies the radius for rounding each corner.

css
<div>  <div>    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;    border-radius: 8px;}
dart
finalcontainer=Container(// grey boxwidth:320,height:240,color:Colors.grey[300],child:Center(child:Container(// red circlepadding:constEdgeInsets.all(16),decoration:BoxDecoration(color:Colors.red[400],borderRadius:constBorderRadius.all(Radius.circular(8),),),child:Text('Lorem ipsum',style:bold24Roboto,),),),);

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 theboxShadow property ofBoxDecoration to create a list ofBoxShadow widgets. You can define one or multipleBoxShadow widgets, which can be stacked to customize the shadow depth, color, and so on.

css
<div>  <div>    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
finalcontainer=Container(// grey boxwidth:320,height:240,margin:constEdgeInsets.only(bottom:16),decoration:BoxDecoration(color:Colors.grey[300],),child:Center(child:Container(// red boxpadding:constEdgeInsets.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 arebasic shapes.

While this approach is supported with theborderRadius property ofBoxDecoration, Flutter provides ashape property withBoxShape enum for this purpose.

css
<div>  <div>    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
finalcontainer=Container(// grey boxwidth:320,height:240,color:Colors.grey[300],child:Center(child:Container(// red circledecoration:BoxDecoration(color:Colors.red[400],shape:BoxShape.circle,),padding:constEdgeInsets.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 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 theletterSpacing andwordSpacing properties of aTextStyle child of aText widget.

css
<div>  <div>    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;    letter-spacing: 4px;}
dart
finalcontainer=Container(// grey boxwidth:320,height:240,color:Colors.grey[300],child:Center(child:Container(// red boxpadding:constEdgeInsets.all(16),decoration:BoxDecoration(color:Colors.red[400],),child:constText('Lorem ipsum',style:TextStyle(color:Colors.white,fontSize:24,fontWeight:FontWeight.w900,letterSpacing:4,),),),),);

Making inline formatting changes

#

AText widget lets you display text with some formatting characteristics. To display text that uses multiple styles (in this example, a single word with emphasis), use aRichText widget instead. Itstext property can specify one or moreTextSpan objects that can be individually styled.

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

css
<div>  <div>    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;}
dart
finalcontainer=Container(// grey boxwidth:320,height:240,color:Colors.grey[300],child:Center(child:Container(// red boxdecoration:BoxDecoration(color:Colors.red[400],),padding:constEdgeInsets.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 overflow text, often using an ellipsis.

In Flutter, use themaxLines property of aText widget to specify the number of lines to include in the excerpt, and theoverflow property for handling overflow text.

css
<div>  <div>    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
finalcontainer=Container(// grey boxwidth:320,height:240,color:Colors.grey[300],child:Center(child:Container(// red boxdecoration:BoxDecoration(color:Colors.red[400],),padding:constEdgeInsets.all(16),child:Text('Lorem ipsum dolor sit amet, consec etur',style:bold24Roboto,overflow:TextOverflow.ellipsis,maxLines:1,),),),);
Was this page's content helpful?

Unless stated otherwise, the documentation on this site reflects Flutter 3.38.1. Page last updated on 2025-10-30.View source orreport an issue.

[8]ページ先頭
©2009-2025 Movatter.jp