此页面适用于熟悉HTML和CSS语法的用户。它将HTML / CSS代码片段映射到的Flutter / Dart代码片段。

这些例子假定:

  • HTML文档以HTML DOCTYPE开始, 并且所有HTML的box-sizing为 border-box, 以便与Flutter模型一致.
    1.  <!DOCTYPE html>
    2.  {
    3.    box-sizing: border-box;
    4.  }
  • 在Flutter中，“Lorem ipsum”文本的默认样式由bold24Roboto变量定义 如下，以保持简单的语法:
    1. TextStyle bold24Roboto = new TextStyle(
    2.     color: Colors.white,
    3.     fontSize: 24.0,
    4.     fontWeight: FontWeight.w900,
    5. );

执行基本布局操作

以下示例显示如何执行最常见的UI布局任务。

给文本添加样式

CSS中的字体样式, 大小, 和一些其它文本属性在Flutter中对应了Text 的TextStyle属性。

在 HTML 和 Flutter中, 默认情况下，子元素或widget都固定在左上角

  1. <div class="greybox">
  2.     Lorem ipsum
  3. </div>
  3. .greybox {
  4.       background-color: #e0e0e0; /* grey 300 */
  5.       width: 320px;
  6.       height: 240px;
  7. [[highlight]]      font: 900 24px Georgia;[[/highlight]]
  8.     }
  1.   var container = new Container( // grey box
  2.     child: new Text(
  3.       "Lorem ipsum",
  4.       style: [[highlight]]new TextStyle(
  5.         fontSize: 24.0
  6.         fontWeight: FontWeight.w900,
  7.         fontFamily: "Georgia",
  8.       ),[[/highlight]]
  9.     ),
  10.     width: 320.0,
  11.     height: 240.0,
  12.     color: Colors.grey[300],
  13.   );

设置背景颜色

在Flutter中，您可以在Container的 decoration 属性中设置背景颜色.

下面CSS示例中使用的十六进制颜色值与Flutter Material调色板中所对应的颜色相同：

  1. <div class="greybox">
  2.   Lorem ipsum
  3. </div>
  2. .greybox {
  3. [[highlight]]      background-color: #e0e0e0; [[/highlight]] /* grey 300 */
  4.       width: 320px;
  5.       height: 240px;
  6.       font: 900 24px Roboto;
  7.     }
  1.   var container = new Container( // grey box
  2.     child: new Text(
  3.       "Lorem ipsum",
  4.       style: bold24Roboto,
  5.     ),
  6.     width: 320.0,
  7.     height: 240.0,
  8. [[highlight]]    color: Colors.grey[300],[[/highlight]]
  9.   );

居中组件

Center widget 可以使其子widget在水平和垂直方向居中.

为了在CSS中实现类似效果，父元素使用flex或table-cell。此页面上的示例使用了flex布局。

  1. <div class="greybox">
  2.   Lorem ipsum
  3. </div>
  2. .greybox {
  3.   background-color: #e0e0e0; /* grey 300 */
  4.   width: 320px;
  5.   height: 240px;
  6.   font: 900 24px Roboto;
  7. [[highlight]]  display: flex;
  8.   align-items: center;
  9.   justify-content: center; [[/highlight]]
  10. }
  1. var container = new Container( // grey box
  2.   child: [[highlight]] new Center(
  3.     child: [[/highlight]] new Text(
  4.       "Lorem ipsum",
  5.       style: bold24Roboto,
  6.     ),
  7.   ),
  8.   width: 320.0,
  9.   height: 240.0,
  10.   color: Colors.grey[300],
  11. );

设置容器宽度

要指定Container的宽度，请设置其width属性。 这是一个固定的宽度，不像CSS中max-width属性，它可以设置容器宽度最大值。要在Flutter中模拟这种效果，请使用容器的constraints属性。 创建一个新的BoxConstraints来设置minWidth或maxWidth。

对于嵌套容器，如果父级的宽度小于子级宽度，则子级容器将自行调整大小以匹配父级。

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum
  4.   </div>
  5. </div>
  2. .greybox {
  3.   background-color: #e0e0e0; /* grey 300 */
  4. [[highlight]]  width: 320px; [[/highlight]]
  5.   height: 240px;
  6.   font: 900 24px Roboto;
  7.   display: flex;
  8.   align-items: center;
  9.   justify-content: center;
  10. }
  11. .redbox {
  12.   background-color: #ef5350; /* red 400 */
  13.   padding: 16px;
  14.   color: #ffffff;
  15. [[highlight]]    width: 100%;
  16.   max-width: 240px; [[/highlight]]
  17. }
  1. var container = new Container( // grey box
  2.   child: new Center(
  3.     child: new Container( // red box
  4.       child: new Text(
  5.         "Lorem ipsum",
  6.         style: bold24Roboto,
  7.       ),
  8.       decoration: new BoxDecoration(
  9.         color: Colors.red[400],
  10.       ),
  11.       padding: new EdgeInsets.all(16.0),
  12. [[highlight]]      width: 240.0, [[/highlight]]//max-width is 240.0
  13.     ),
  14.   ),
  15. [[highlight]]  width: 320.0, [[/highlight]]
  16.   height: 240.0,
  17.   color: Colors.grey[300],
  18. );

控制位置和大小

以下示例显示如何在widget的位置、大小和背景上执行更复杂的操作。

设置绝对位置

默认情况下，widget相对于其父widget定位。

要将widget的绝对位置指定为x-y坐标，请将其嵌套在Positionedwidget中， 该widget又嵌套在Stack widget中。

```shell

Lorem ipsum 

  2. ```css
  4. .greybox {
  5.   background-color: #e0e0e0; /* grey 300 */
  6.   width: 320px;
  7.   height: 240px;
  8.   font: 900 24px Roboto;
  9. [[highlight]]  position: relative; [[/highlight]]
  10. }
  11. .redbox {
  12.   background-color: #ef5350; /* red 400 */
  13.   padding: 16px;
  14.   color: #ffffff;
  15. [[highlight]]  position: absolute;
  16.   top: 24px;
  17.   left: 24px; [[/highlight]]
  18. }
  1. var container = new Container( // grey box
  2. [[highlight]]  child: new Stack(
  3.     children: [
  4.       new Positioned( // red box
  5.         child: [[/highlight]] new Container(
  6.           child: new Text(
  7.             "Lorem ipsum",
  8.             style: bold24Roboto,
  9.           ),
  10.           decoration: new BoxDecoration(
  11.             color: Colors.red[400],
  12.           ),
  13.           padding: new EdgeInsets.all(16.0),
  14.         ),
  15. [[highlight]]        left: 24.0,
  16.         top: 24.0,
  17.       ),
  18.     ],
  19.   ), [[/highlight]]
  20.   width: 320.0,
  21.   height: 240.0,
  22.   color: Colors.grey[300],
  23. );

旋转组件

要旋转一个widget，将它嵌套在一个Transform中。 使设置其alignment和origin属性分别以相对和绝对值指定变换原点。

对于简单的2D旋转，widget在Z轴上旋转。（度数×π/ 180）

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum
  4.   </div>
  5. </div>
  2. .greybox {
  3.   background-color: #e0e0e0; /* grey 300 */
  4.   width: 320px;
  5.   height: 240px;
  6.   font: 900 24px Roboto;
  7.   display: flex;
  8.   align-items: center;
  9.   justify-content: center;
  10. }
  11. .redbox {
  12.   background-color: #ef5350; /* red 400 */
  13.   padding: 16px;
  14.   color: #ffffff;
  15. [[highlight]]  transform: rotate(15deg); [[/highlight]]
  16. }
  1. var container = new Container( // gray box
  2.   child: new Center(
  3.     child: [[highlight]] new Transform(
  4.       child: [[/highlight]] new Container( // red box
  5.         child: new Text(
  6.           "Lorem ipsum",
  7.           style: bold24Roboto,
  8.           textAlign: TextAlign.center,
  9.         ),
  10.         decoration: new BoxDecoration(
  11.           color: Colors.red[400],
  12.         ),
  13.         padding: new EdgeInsets.all(16.0),
  14.       ),
  15. [[highlight]]      alignment: Alignment.center,
  16.       transform: new Matrix4.identity()
  17.         ..rotateZ(15 * 3.1415927 / 180),
  18.     ), [[/highlight]]
  19.   ),
  20.   width: 320.0,
  21.   height: 240.0,
  22.   color: Colors.grey[300],
  23. );

缩放组件

要向上或向下缩放widget，请将其嵌套在Transform中。 并设置其alignment和origin属性分别以相对和绝对值指定变换原点。

对于沿x轴的简单缩放操作，请创建一个新的Matrix4， 标识对象并使用其scale（）方法指定缩放因子。

当缩放父widget时，所有子widget都会相应地缩放。

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum
  4.   </div>
  5. </div>
  2. .greybox {
  3.   background-color: #e0e0e0; /* grey 300 */
  4.   width: 320px;
  5.   height: 240px;
  6.   font: 900 24px Roboto;
  7.   display: flex;
  8.   align-items: center;
  9.   justify-content: center;
  10. }
  11. .redbox {
  12.   background-color: #ef5350; /* red 400 */
  13.   padding: 16px;
  14.   color: #ffffff;
  15. [[highlight]]  transform: scale(1.5); [[/highlight]]
  16. }
  1. var container = new Container( // gray box
  2.   child: new Center(
  3.     child: [[highlight]] new Transform(
  4.       child: [[/highlight]] new Container( // red box
  5.         child: new Text(
  6.           "Lorem ipsum",
  7.           style: bold24Roboto,
  8.           textAlign: TextAlign.center,
  9.         ),
  10.         decoration: new BoxDecoration(
  11.           color: Colors.red[400],
  12.         ),
  13.         padding: new EdgeInsets.all(16.0),
  14.       ),
  15. [[highlight]]      alignment: Alignment.center,
  16.       transform: new Matrix4.identity()
  17.         ..scale(1.5),
  18.      ), [[/highlight]]
  19.   width: 320.0,
  20.   height: 240.0,
  21.   color: Colors.grey[300],
  22. );

应用线性渐变

要将线性渐变应用于widget的背景，请将其嵌套到Containerwidget中。 然后使用Container的decoration属性来创建BoxDecoration对象， 并使用BoxDecoration的gradient属性来转换背景填充。

渐变“角度”基于Alignment（x，y）值:

  • 如果开始和结束的x值相等，则渐变是垂直的（0°| 180°）。
  • 如果开始和结束的y值相等，则渐变为水平（90°| 270°）

垂直渐变

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum
  4.   </div>
  5. </div>
  2. .greybox {
  3.   background-color: #e0e0e0; /* grey 300 */
  4.   width: 320px;
  5.   height: 240px;
  6.   font: 900 24px Roboto;
  7.   display: flex;
  8.   align-items: center;
  9.   justify-content: center;
  10. }
  11. .redbox {
  12.   padding: 16px;
  13.   color: #ffffff;
  14. [[highlight]]  background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%); [[/highlight]]
  15. }
  1. var container = new Container( // grey box
  2.   child: new Center(
  3.     child: new Container( // red box
  4.       child: new Text(
  5.         "Lorem ipsum",
  6.         style: bold24Roboto,
  7.       ),
  8. [[highlight]]      decoration: new BoxDecoration(
  9.         gradient: new LinearGradient(
  10.           begin: const Alignment(0.0, -1.0),
  11.           end: const Alignment(0.0, 0.6),
  12.           colors: <Color>[
  13.             const Color(0xffef5350),
  14.             const Color(0x00ef5350)
  15.           ],
  16.         ),
  17.       ), [[/highlight]]
  18.       padding: new EdgeInsets.all(16.0),
  19.     ),
  20.   ),
  21.   width: 320.0,
  22.   height: 240.0,
  23.   color: Colors.grey[300],
  24. );

水平渐变

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum
  4.   </div>
  5. </div>
  1. .greybox {
  2.   background-color: #e0e0e0; /* grey 300 */
  3.   width: 320px;
  4.   height: 240px;
  5.   font: 900 24px Roboto;
  6.   display: flex;
  7.   align-items: center;
  8.   justify-content: center;
  9. }
  10. .redbox {
  11.   padding: 16px;
  12.   color: #ffffff;
  13. [[highlight]]  background: linear-gradient(90deg, #ef5350, rgba(0, 0, 0, 0) 80%); [[/highlight]]
  14. }
  1. var container = new Container( // grey box
  2.   child: new Center(
  3.     child: new Container( // red box
  4.       child: new Text(
  5.         "Lorem ipsum",
  6.         style: bold24Roboto,
  7.       ),
  8. [[highlight]]      decoration: new BoxDecoration(
  9.         gradient: new LinearGradient(
  10.           begin: const Alignment(-1.0, 0.0),
  11.           end: const Alignment(0.6, 0.0),
  12.           colors: <Color>[
  13.             const Color(0xffef5350),
  14.             const Color(0x00ef5350)
  15.           ],
  16.         ),
  17.       ), [[/highlight]]
  18.       padding: new EdgeInsets.all(16.0),
  19.     ),
  20.   ),
  21.   width: 320.0,
  22.   height: 240.0,
  23.   color: Colors.grey[300],
  24. );

处理形状

以下示例显示如何自定义形状。

圆角

要给矩形添加圆角请使用BoxDecoration对象的borderRadius属性 。 创建一个新的BorderRadius对象，给该对象指定一个的半径（会四舍五入）。

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum
  4.   </div>
  5. </div>
  1. .greybox {
  2.   background-color: #e0e0e0; /* gray 300 */
  3.   width: 320px;
  4.   height: 240px;
  5.   font: 900 24px Roboto;
  6.   display: flex;
  7.   align-items: center;
  8.   justify-content: center;
  9. }
  10. .redbox {
  11.   background-color: #ef5350; /* red 400 */
  12.   padding: 16px;
  13.   color: #ffffff;
  14. [[highlight]]  border-radius: 8px; [[/highlight]]
  15. }
  1. var container = new Container( // grey box
  2.   child: new Center(
  3.     child: new Container( // red circle
  4.       child: new Text(
  5.         "Lorem ipsum",
  6.         style: bold24Roboto,
  7.       ),
  8.       decoration: new BoxDecoration(
  9.         color: Colors.red[400],
  10. [[highlight]]        borderRadius: new BorderRadius.all(
  11.           const Radius.circular(8.0),
  12.         ), [[/highlight]]
  13.       ),
  14.       padding: new EdgeInsets.all(16.0),
  15.     ),
  16.   ),
  17.   width: 320.0,
  18.   height: 240.0,
  19.   color: Colors.grey[300],
  20. );

添加阴影

在CSS中，您可以使用box-shadow属性来快速指定阴影偏移和模糊。

在Flutter中，每个属性和值都单独指定。使用BoxDecoration的boxShadow属性创建BoxShadow列表。 您可以定义一个或多个BoxShadow，它们可以叠加出自定义阴影深度、颜色等。

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum
  4.   </div>
  5. </div>
  2. .greybox {
  3.   background-color: #e0e0e0; /* grey 300 */
  4.   width: 320px;
  5.   height: 240px;
  6.   font: 900 24px Roboto;
  7.   display: flex;
  8.   align-items: center;
  9.   justify-content: center;
  10. }
  11. .redbox {
  12.   background-color: #ef5350; /* red 400 */
  13.   padding: 16px;
  14.   color: #ffffff;
  15. [[highlight]]  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8),
  16.               0 6px 20px rgba(0, 0, 0, 0.5);[[/highlight]]
  17. }
  1. var container = new Container( // grey box
  2.   child: new Center(
  3.     child: new Container( // red box
  4.       child: new Text(
  5.         "Lorem ipsum",
  6.         style: bold24Roboto,
  7.       ),
  8.       decoration: new BoxDecoration(
  9.         color: Colors.red[400],
  10. [[highlight]]        boxShadow: <BoxShadow>[
  11.           new BoxShadow (
  12.             color: const Color(0xcc000000),
  13.             offset: new Offset(0.0, 2.0),
  14.             blurRadius: 4.0,
  15.           ),
  16.           new BoxShadow (
  17.             color: const Color(0x80000000),
  18.             offset: new Offset(0.0, 6.0),
  19.             blurRadius: 20.0,
  20.           ),
  21.         ], [[/highlight]]
  22.       ),
  23.       padding: new EdgeInsets.all(16.0),
  24.     ),
  25.   ),
  26.   width: 320.0,
  27.   height: 240.0,
  28.   decoration: new BoxDecoration(
  29.     color: Colors.grey[300],
  30.   ),
  31.   margin: new EdgeInsets.only(bottom: 16.0),
  32. );

圆和椭圆

在CSS中制作一个圆需要将矩形的四条边的border-radius设置为50%。

虽然BoxDecoration的borderRadius属性支持此方法， 但Flutter为此提供了一个shape属性, 值为BoxShape枚举 。

  1. <div class="greybox">
  2.   <div class="redcircle">
  3.     Lorem ipsum
  4.   </div>
  5. </div>
  1. .greybox {
  2.   background-color: #e0e0e0; /* gray 300 */
  3.   width: 320px;
  4.   height: 240px;
  5.   font: 900 24px Roboto;
  6.   display: flex;
  7.   align-items: center;
  8.   justify-content: center;
  9. }
  10. .redcircle {
  11.   background-color: #ef5350; /* red 400 */
  12.   padding: 16px;
  13.   color: #ffffff;
  14. [[highlight]]  text-align: center;
  15.   width: 160px;
  16.   height: 160px;
  17.   border-radius: 50%; [[/highlight]]
  18. }
  1. var container = new Container( // grey box
  2.   child: new Center(
  3.     child: new Container( // red circle
  4.       child: new Text(
  5.         "Lorem ipsum",
  6.         style: bold24Roboto,
  7. [[highlight]]        textAlign: TextAlign.center, [[/highlight]]
  8.       ),
  9.       decoration: new BoxDecoration(
  10.         color: Colors.red[400],
  11. [[highlight]]        shape: BoxShape.circle, [[/highlight]]
  12.       ),
  13.       padding: new EdgeInsets.all(16.0),
  14. [[highlight]]      width: 160.0,
  15.       height: 160.0, [[/highlight]]
  16.     ),
  17.   ),
  18.   width: 320.0,
  19.   height: 240.0,
  20.   color: Colors.grey[300],
  21. );

操作文本

以下示例显示如何指定字体和其他文本属性。他们还展示了如何变换文本字符串，自定义间距和创建摘要。

调整文本间距

在CSS中，通过分别给出letter-spacing和word-spacing属性的长度值，指定每个字母或单词之间的空白间距。长度单位可以是px，pt，cm，em等。

在Flutter中，您将空白区域指定为Text的TextStyle的letterSpacing和wordSpacing属性， 值为逻辑像素（允许为负值）

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum
  4.   </div>
  5. </div>
  2. .greybox {
  3.   background-color: #e0e0e0; /* grey 300 */
  4.   width: 320px;
  5.   height: 240px;
  6.   font: 900 24px Roboto;
  7.   display: flex;
  8.   align-items: center;
  9.   justify-content: center;
  10. }
  11. .redbox {
  12.   background-color: #ef5350; /* red 400 */
  13.   padding: 16px;
  14.   color: #ffffff;
  15. [[highlight]]  letter-spacing: 4px; [[/highlight]]
  16. }
  1. var container = new Container( // grey box
  2.   child: new Center(
  3.     child: new Container( // red box
  4.       child: new Text(
  5.         "Lorem ipsum",
  6.         style: new TextStyle(
  7.           color: Colors.white,
  8.           fontSize: 24.0,
  9.           fontWeight: FontWeight.w900,
  10. [[highlight]]          letterSpacing: 4.0, [[/highlight]]
  11.         ),
  12.       ),
  13.       decoration: new BoxDecoration(
  14.         color: Colors.red[400],
  15.       ),
  16.       padding: new EdgeInsets.all(16.0),
  17.     ),
  18.   ),
  19.   width: 320.0,
  20.   height: 240.0,
  21.   color: Colors.grey[300],
  22. );

转换文本

在HTML / CSS中，您可以使用text-transform属性执行简单大小写转换

在Flutter中，使用 dart:core库中的String 类的方法来转换Text的内容。

  1. <div class="greybox">
  2.   <div class="redbox">
  3. [[highlight]]    Lorem ipsum [[/highlight]]
  4.   </div>
  5. </div>
  1. .greybox {
  2.   background-color: #e0e0e0; /* grey 300 */
  3.   width: 320px;
  4.   height: 240px;
  5.   font: 900 24px Roboto;
  6.   display: flex;
  7.   align-items: center;
  8.   justify-content: center;
  9. }
  10. .redbox {
  11.   background-color: #ef5350; /* red 400 */
  12.   padding: 16px;
  13.   color: #ffffff;
  14. [[highlight]]  text-transform: uppercase; [[/highlight]]
  15. }
  1. var container = new Container( // grey box
  2.   child: new Center(
  3.     child: new Container( // red box
  4.       child: new Text(
  5. [[highlight]]        "Lorem ipsum".toUpperCase(), [[/highlight]]
  6.         style: bold24Roboto,
  7.       ),
  8.       decoration: new BoxDecoration(
  9.         color: Colors.red[400],
  10.       ),
  11.       padding: new EdgeInsets.all(16.0),
  12.     ),
  13.   ),
  14.   width: 320.0,
  15.   height: 240.0,
  16.   color: Colors.grey[300],
  17. );

进行内联格式更改

Text widget控件，可以用相同的格式显示文本。 要显示使用多个样式的文本（在本例中为带有重点的单个单词），请改用RichText。 它的text属性可以指定一个或多个可单独设置样式的TextSpanwidget。

在以下示例中，“Lorem”位于具有默认（继承）文本样式的TextSpan小部件中，“ipsum”位于具有自定义样式的单独TextSpan中。

  1. <div class="greybox">
  2.   <div class="redbox">
  3. [[highlight]]    Lorem <em>ipsum</em> [[/highlight]]
  4.   </div>
  5. </div>
  3. .greybox {
  4.   background-color: #e0e0e0; /* grey 300 */
  5.   width: 320px;
  6.   height: 240px;
  7. [[highlight]]  font: 900 24px Roboto; [[/highlight]]
  8.   display: flex;
  9.   align-items: center;
  10.   justify-content: center;
  11. }
  12. .redbox {
  13.   background-color: #ef5350; /* red 400 */
  14.   padding: 16px;
  15.   color: #ffffff;
  16. }
  17. [[highlight]] .redbox em {
  18.   font: 300 48px Roboto;
  19.   font-style: italic;
  20. } [[/highlight]]
  1. var container = new Container( // grey box
  2.   child: new Center(
  3.     child: new Container( // red box
  4.       child: [[highlight]] new RichText(
  5.         text: new TextSpan(
  6.           style: bold24Roboto,
  7.           children: <TextSpan>[
  8.             new TextSpan(text: "Lorem "),
  9.             new TextSpan(
  10.               text: "ipsum",
  11.               style: new TextStyle(
  12.                 fontWeight: FontWeight.w300,
  13.                 fontStyle: FontStyle.italic,
  14.                 fontSize: 48.0,
  15.               ),
  16.             ),
  17.           ],
  18.         ),
  19.       ), [[/highlight]]
  20.       decoration: new BoxDecoration(
  21.         backgroundColor: Colors.red[400],
  22.       ),
  23.       padding: new EdgeInsets.all(16.0),
  24.     ),
  25.   ),
  26.   width: 320.0,
  27.   height: 240.0,
  28.   color: Colors.grey[300],
  29. );

创建文本摘要

摘录显示段落中文本的最初行，并且通常使用省略号处理溢出文本。在HTML / CSS中，摘要不能超过一行。截断多行需要一些JavaScript代码。

在Flutter中，使用Text小部件的maxLines属性来指定要包含在摘要中的行数，以及用于处理溢出文本的属性overflow。

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum dolor sit amet, consec etur
  4.   </div>
  5. </div>
  1. .greybox {
  2.   background-color: #e0e0e0; /* grey 300 */
  3.   width: 320px;
  4.   height: 240px;
  5.   font: 900 24px Roboto;
  6.   display: flex;
  7.   align-items: center;
  8.   justify-content: center;
  9. }
  10. .redbox {
  11.   background-color: #ef5350; /* red 400 */
  12.   padding: 16px;
  13.   color: #ffffff;
  14. [[highlight]]  overflow: hidden;
  15.   text-overflow: ellipsis;
  16.   white-space: nowrap; [[/highlight]]
  17. }
  1. var container = new Container( // grey box
  2.   child: new Center(
  3.     child: new Container( // red box
  4.       child: new Text(
  5.         "Lorem ipsum dolor sit amet, consec etur",
  6.         style: bold24Roboto,
  7. [[highlight]]        overflow: TextOverflow.ellipsis,
  8.         maxLines: 1, [[/highlight]]
  9.       ),
  10.       decoration: new BoxDecoration(
  11.         backgroundColor: Colors.red[400],
  12.       ),
  13.       padding: new EdgeInsets.all(16.0),
  14.     ),
  15.   ),
  16.   width: 320.0,
  17.   height: 240.0,
  18.   color: Colors.grey[300],
  19. );

此页面适用于熟悉HTML和CSS语法的用户。它将HTML / CSS代码片段映射到的Flutter / Dart代码片段。

这些例子假定:

  • HTML文档以HTML DOCTYPE开始, 并且所有HTML的box-sizing为 border-box, 以便与Flutter模型一致.

```css<!DOCTYPE html>

{ box-sizing: border-box; }

  2. * 在Flutter中，“Lorem ipsum”文本的默认样式由`bold24Roboto`变量定义 如下，以保持简单的语法:
  4. ```shell
  5.   TextStyle bold24Roboto = new TextStyle(
  6.       color: Colors.white,
  7.       fontSize: 24.0,
  8.       fontWeight: FontWeight.w900,
  9.   );

执行基本布局操作

以下示例显示如何执行最常见的UI布局任务。

给文本添加样式

CSS中的字体样式, 大小, 和一些其它文本属性在Flutter中对应了Text 的TextStyle属性。

在 HTML 和 Flutter中, 默认情况下，子元素或widget都固定在左上角

  1. <div class="greybox">
  2.     Lorem ipsum
  3. </div>
  2. .greybox {
  3.       background-color: #e0e0e0; /* grey 300 */
  4.       width: 320px;
  5.       height: 240px;
  6. [[highlight]]      font: 900 24px Georgia;[[/highlight]]
  7.     }
  1.   var container = new Container( // grey box
  2.     child: new Text(
  3.       "Lorem ipsum",
  4.       style: [[highlight]]new TextStyle(
  5.         fontSize: 24.0
  6.         fontWeight: FontWeight.w900,
  7.         fontFamily: "Georgia",
  8.       ),[[/highlight]]
  9.     ),
  10.     width: 320.0,
  11.     height: 240.0,
  12.     color: Colors.grey[300],
  13.   );

设置背景颜色

在Flutter中，您可以在Container的 decoration 属性中设置背景颜色.

下面CSS示例中使用的十六进制颜色值与Flutter Material调色板中所对应的颜色相同：

  1. <div class="greybox">
  2.   Lorem ipsum
  3. </div>
  2. .greybox {
  3. [[highlight]]      background-color: #e0e0e0; [[/highlight]] /* grey 300 */
  4.       width: 320px;
  5.       height: 240px;
  6.       font: 900 24px Roboto;
  7.     }
  1.   var container = new Container( // grey box
  2.     child: new Text(
  3.       "Lorem ipsum",
  4.       style: bold24Roboto,
  5.     ),
  6.     width: 320.0,
  7.     height: 240.0,
  8. [[highlight]]    color: Colors.grey[300],[[/highlight]]
  9.   );

居中组件

Center widget 可以使其子widget在水平和垂直方向居中.

为了在CSS中实现类似效果，父元素使用flex或table-cell。此页面上的示例使用了flex布局。

  1. <div class="greybox">
  2.   Lorem ipsum
  3. </div>
  2. .greybox {
  3.   background-color: #e0e0e0; /* grey 300 */
  4.   width: 320px;
  5.   height: 240px;
  6.   font: 900 24px Roboto;
  7. [[highlight]]  display: flex;
  8.   align-items: center;
  9.   justify-content: center; [[/highlight]]
  10. }
  1. var container = new Container( // grey box
  2.   child: [[highlight]] new Center(
  3.     child: [[/highlight]] new Text(
  4.       "Lorem ipsum",
  5.       style: bold24Roboto,
  6.     ),
  7.   ),
  8.   width: 320.0,
  9.   height: 240.0,
  10.   color: Colors.grey[300],
  11. );

设置容器宽度

要指定Container的宽度，请设置其width属性。 这是一个固定的宽度，不像CSS中max-width属性，它可以设置容器宽度最大值。要在Flutter中模拟这种效果，请使用容器的constraints属性。 创建一个新的BoxConstraints来设置minWidth或maxWidth。

对于嵌套容器，如果父级的宽度小于子级宽度，则子级容器将自行调整大小以匹配父级。

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum
  4.   </div>
  5. </div>
  2. .greybox {
  3.   background-color: #e0e0e0; /* grey 300 */
  4. [[highlight]]  width: 320px; [[/highlight]]
  5.   height: 240px;
  6.   font: 900 24px Roboto;
  7.   display: flex;
  8.   align-items: center;
  9.   justify-content: center;
  10. }
  11. .redbox {
  12.   background-color: #ef5350; /* red 400 */
  13.   padding: 16px;
  14.   color: #ffffff;
  15. [[highlight]]    width: 100%;
  16.   max-width: 240px; [[/highlight]]
  17. }
  1. var container = new Container( // grey box
  2.   child: new Center(
  3.     child: new Container( // red box
  4.       child: new Text(
  5.         "Lorem ipsum",
  6.         style: bold24Roboto,
  7.       ),
  8.       decoration: new BoxDecoration(
  9.         color: Colors.red[400],
  10.       ),
  11.       padding: new EdgeInsets.all(16.0),
  12. [[highlight]]      width: 240.0, [[/highlight]]//max-width is 240.0
  13.     ),
  14.   ),
  15. [[highlight]]  width: 320.0, [[/highlight]]
  16.   height: 240.0,
  17.   color: Colors.grey[300],
  18. );

控制位置和大小

以下示例显示如何在widget的位置、大小和背景上执行更复杂的操作。

设置绝对位置

默认情况下，widget相对于其父widget定位。

要将widget的绝对位置指定为x-y坐标，请将其嵌套在Positionedwidget中， 该widget又嵌套在Stack widget中。

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum
  4.   </div>
  5. </div>
  2. .greybox {
  3.   background-color: #e0e0e0; /* grey 300 */
  4.   width: 320px;
  5.   height: 240px;
  6.   font: 900 24px Roboto;
  7. [[highlight]]  position: relative; [[/highlight]]
  8. }
  9. .redbox {
  10.   background-color: #ef5350; /* red 400 */
  11.   padding: 16px;
  12.   color: #ffffff;
  13. [[highlight]]  position: absolute;
  14.   top: 24px;
  15.   left: 24px; [[/highlight]]
  16. }
  1. var container = new Container( // grey box
  2. [[highlight]]  child: new Stack(
  3.     children: [
  4.       new Positioned( // red box
  5.         child: [[/highlight]] new Container(
  6.           child: new Text(
  7.             "Lorem ipsum",
  8.             style: bold24Roboto,
  9.           ),
  10.           decoration: new BoxDecoration(
  11.             color: Colors.red[400],
  12.           ),
  13.           padding: new EdgeInsets.all(16.0),
  14.         ),
  15. [[highlight]]        left: 24.0,
  16.         top: 24.0,
  17.       ),
  18.     ],
  19.   ), [[/highlight]]
  20.   width: 320.0,
  21.   height: 240.0,
  22.   color: Colors.grey[300],
  23. );

旋转组件

要旋转一个widget，将它嵌套在一个Transform中。 使设置其alignment和origin属性分别以相对和绝对值指定变换原点。

对于简单的2D旋转，widget在Z轴上旋转。（度数×π/ 180）

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum
  4.   </div>
  5. </div>
  1. .greybox {
  2.   background-color: #e0e0e0; /* grey 300 */
  3.   width: 320px;
  4.   height: 240px;
  5.   font: 900 24px Roboto;
  6.   display: flex;
  7.   align-items: center;
  8.   justify-content: center;
  9. }
  10. .redbox {
  11.   background-color: #ef5350; /* red 400 */
  12.   padding: 16px;
  13.   color: #ffffff;
  14. [[highlight]]  transform: rotate(15deg); [[/highlight]]
  15. }
  1. var container = new Container( // gray box
  2.   child: new Center(
  3.     child: [[highlight]] new Transform(
  4.       child: [[/highlight]] new Container( // red box
  5.         child: new Text(
  6.           "Lorem ipsum",
  7.           style: bold24Roboto,
  8.           textAlign: TextAlign.center,
  9.         ),
  10.         decoration: new BoxDecoration(
  11.           color: Colors.red[400],
  12.         ),
  13.         padding: new EdgeInsets.all(16.0),
  14.       ),
  15. [[highlight]]      alignment: Alignment.center,
  16.       transform: new Matrix4.identity()
  17.         ..rotateZ(15 * 3.1415927 / 180),
  18.     ), [[/highlight]]
  19.   ),
  20.   width: 320.0,
  21.   height: 240.0,
  22.   color: Colors.grey[300],
  23. );

缩放组件

要向上或向下缩放widget，请将其嵌套在Transform中。 并设置其alignment和origin属性分别以相对和绝对值指定变换原点。

对于沿x轴的简单缩放操作，请创建一个新的Matrix4， 标识对象并使用其scale（）方法指定缩放因子。

当缩放父widget时，所有子widget都会相应地缩放。

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum
  4.   </div>
  5. </div><div class="greybox">
  6.   <div class="redbox">
  7.     Lorem ipsum
  8.   </div>
  9. </div>
  1. .greybox {
  2.   background-color: #e0e0e0; /* grey 300 */
  3.   width: 320px;
  4.   height: 240px;
  5.   font: 900 24px Roboto;
  6.   display: flex;
  7.   align-items: center;
  8.   justify-content: center;
  9. }
  10. .redbox {
  11.   background-color: #ef5350; /* red 400 */
  12.   padding: 16px;
  13.   color: #ffffff;
  14. [[highlight]]  transform: scale(1.5); [[/highlight]]
  15. }
  1. var container = new Container( // gray box
  2.   child: new Center(
  3.     child: [[highlight]] new Transform(
  4.       child: [[/highlight]] new Container( // red box
  5.         child: new Text(
  6.           "Lorem ipsum",
  7.           style: bold24Roboto,
  8.           textAlign: TextAlign.center,
  9.         ),
  10.         decoration: new BoxDecoration(
  11.           color: Colors.red[400],
  12.         ),
  13.         padding: new EdgeInsets.all(16.0),
  14.       ),
  15. [[highlight]]      alignment: Alignment.center,
  16.       transform: new Matrix4.identity()
  17.         ..scale(1.5),
  18.      ), [[/highlight]]
  19.   width: 320.0,
  20.   height: 240.0,
  21.   color: Colors.grey[300],
  22. );

应用线性渐变

要将线性渐变应用于widget的背景，请将其嵌套到Containerwidget中。 然后使用Container的decoration属性来创建BoxDecoration对象， 并使用BoxDecoration的gradient属性来转换背景填充。

渐变“角度”基于Alignment（x，y）值:

  • 如果开始和结束的x值相等，则渐变是垂直的（0°| 180°）。
  • 如果开始和结束的y值相等，则渐变为水平（90°| 270°）

垂直渐变

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum
  4.   </div>
  5. </div>
  1. .greybox {
  2.   background-color: #e0e0e0; /* grey 300 */
  3.   width: 320px;
  4.   height: 240px;
  5.   font: 900 24px Roboto;
  6.   display: flex;
  7.   align-items: center;
  8.   justify-content: center;
  9. }
  10. .redbox {
  11.   padding: 16px;
  12.   color: #ffffff;
  13. [[highlight]]  background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%); [[/highlight]]
  14. }
  1. var container = new Container( // grey box
  2.   child: new Center(
  3.     child: new Container( // red box
  4.       child: new Text(
  5.         "Lorem ipsum",
  6.         style: bold24Roboto,
  7.       ),
  8. [[highlight]]      decoration: new BoxDecoration(
  9.         gradient: new LinearGradient(
  10.           begin: const Alignment(0.0, -1.0),
  11.           end: const Alignment(0.0, 0.6),
  12.           colors: <Color>[
  13.             const Color(0xffef5350),
  14.             const Color(0x00ef5350)
  15.           ],
  16.         ),
  17.       ), [[/highlight]]
  18.       padding: new EdgeInsets.all(16.0),
  19.     ),
  20.   ),
  21.   width: 320.0,
  22.   height: 240.0,
  23.   color: Colors.grey[300],
  24. );

水平渐变

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum
  4.   </div>
  5. </div>
  1. .greybox {
  2.   background-color: #e0e0e0; /* grey 300 */
  3.   width: 320px;
  4.   height: 240px;
  5.   font: 900 24px Roboto;
  6.   display: flex;
  7.   align-items: center;
  8.   justify-content: center;
  9. }
  10. .redbox {
  11.   padding: 16px;
  12.   color: #ffffff;
  13. [[highlight]]  background: linear-gradient(90deg, #ef5350, rgba(0, 0, 0, 0) 80%); [[/highlight]]
  14. }

dart var container = new Container( // grey box child: new Center( child: new Container( // red box child: new Text( "Lorem ipsum", style: bold24Roboto, ), [[highlight]] decoration: new BoxDecoration( gradient: new LinearGradient( begin: const Alignment(-1.0, 0.0), end: const Alignment(0.6, 0.0), colors: <Color>[ const Color(0xffef5350), const Color(0x00ef5350) ], ), ), [[/highlight]] padding: new EdgeInsets.all(16.0), ), ), width: 320.0, height: 240.0, color: Colors.grey[300], );

处理形状

以下示例显示如何自定义形状。

圆角

要给矩形添加圆角请使用BoxDecoration对象的borderRadius属性 。 创建一个新的BorderRadius对象，给该对象指定一个的半径（会四舍五入）。

```css
Lorem ipsum

.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; [[highlight]] border-radius: 8px; [[/highlight]] }

  1. </div>
  2. <div class="righthighlight">
  3. ```dart
  4. var container = new Container( // grey box
  5.   child: new Center(
  6.     child: new Container( // red circle
  7.       child: new Text(
  8.         "Lorem ipsum",
  9.         style: bold24Roboto,
  10.       ),
  11.       decoration: new BoxDecoration(
  12.         color: Colors.red[400],
  13. [[highlight]]        borderRadius: new BorderRadius.all(
  14.           const Radius.circular(8.0),
  15.         ), [[/highlight]]
  16.       ),
  17.       padding: new EdgeInsets.all(16.0),
  18.     ),
  19.   ),
  20.   width: 320.0,
  21.   height: 240.0,
  22.   color: Colors.grey[300],
  23. );

添加阴影

在CSS中，您可以使用box-shadow属性来快速指定阴影偏移和模糊。

在Flutter中，每个属性和值都单独指定。使用BoxDecoration的boxShadow属性创建BoxShadow列表。 您可以定义一个或多个BoxShadow，它们可以叠加出自定义阴影深度、颜色等。

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum
  4.   </div>
  5. </div>
  2. .greybox {
  3.   background-color: #e0e0e0; /* grey 300 */
  4.   width: 320px;
  5.   height: 240px;
  6.   font: 900 24px Roboto;
  7.   display: flex;
  8.   align-items: center;
  9.   justify-content: center;
  10. }
  11. .redbox {
  12.   background-color: #ef5350; /* red 400 */
  13.   padding: 16px;
  14.   color: #ffffff;
  15. [[highlight]]  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8),
  16.               0 6px 20px rgba(0, 0, 0, 0.5);[[/highlight]]
  17. }
  1. var container = new Container( // grey box
  2.   child: new Center(
  3.     child: new Container( // red box
  4.       child: new Text(
  5.         "Lorem ipsum",
  6.         style: bold24Roboto,
  7.       ),
  8.       decoration: new BoxDecoration(
  9.         color: Colors.red[400],
  10. [[highlight]]        boxShadow: <BoxShadow>[
  11.           new BoxShadow (
  12.             color: const Color(0xcc000000),
  13.             offset: new Offset(0.0, 2.0),
  14.             blurRadius: 4.0,
  15.           ),
  16.           new BoxShadow (
  17.             color: const Color(0x80000000),
  18.             offset: new Offset(0.0, 6.0),
  19.             blurRadius: 20.0,
  20.           ),
  21.         ], [[/highlight]]
  22.       ),
  23.       padding: new EdgeInsets.all(16.0),
  24.     ),
  25.   ),
  26.   width: 320.0,
  27.   height: 240.0,
  28.   decoration: new BoxDecoration(
  29.     color: Colors.grey[300],
  30.   ),
  31.   margin: new EdgeInsets.only(bottom: 16.0),
  32. );

圆和椭圆

在CSS中制作一个圆需要将矩形的四条边的border-radius设置为50%。

虽然BoxDecoration的borderRadius属性支持此方法， 但Flutter为此提供了一个shape属性, 值为BoxShape枚举 。

  1. <div class="greybox">
  2.   <div class="redcircle">
  3.     Lorem ipsum
  4.   </div>
  5. </div>
  7. .greybox {
  8.   background-color: #e0e0e0; /* gray 300 */
  9.   width: 320px;
  10.   height: 240px;
  11.   font: 900 24px Roboto;
  12.   display: flex;
  13.   align-items: center;
  14.   justify-content: center;
  15. }
  16. .redcircle {
  17.   background-color: #ef5350; /* red 400 */
  18.   padding: 16px;
  19.   color: #ffffff;
  20. [[highlight]]  text-align: center;
  21.   width: 160px;
  22.   height: 160px;
  23.   border-radius: 50%; [[/highlight]]
  24. }

dart var container = new Container( // grey box child: new Center( child: new Container( // red circle child: new Text( "Lorem ipsum", style: bold24Roboto, [[highlight]] textAlign: TextAlign.center, [[/highlight]] ), decoration: new BoxDecoration( color: Colors.red[400], [[highlight]] shape: BoxShape.circle, [[/highlight]] ), padding: new EdgeInsets.all(16.0), [[highlight]] width: 160.0, height: 160.0, [[/highlight]] ), ), width: 320.0, height: 240.0, color: Colors.grey[300], );

操作文本

以下示例显示如何指定字体和其他文本属性。他们还展示了如何变换文本字符串，自定义间距和创建摘要。

调整文本间距

在CSS中，通过分别给出letter-spacing和word-spacing属性的长度值，指定每个字母或单词之间的空白间距。长度单位可以是px，pt，cm，em等。

在Flutter中，您将空白区域指定为Text的TextStyle的letterSpacing和wordSpacing属性， 值为逻辑像素（允许为负值）

```css
Lorem ipsum

.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; [[highlight]] letter-spacing: 4px; [[/highlight]] }

  1. </div>
  2. <div class="righthighlight">
  3. ```dart
  4. var container = new Container( // grey box
  5.   child: new Center(
  6.     child: new Container( // red box
  7.       child: new Text(
  8.         "Lorem ipsum",
  9.         style: new TextStyle(
  10.           color: Colors.white,
  11.           fontSize: 24.0,
  12.           fontWeight: FontWeight.w900,
  13. [[highlight]]          letterSpacing: 4.0, [[/highlight]]
  14.         ),
  15.       ),
  16.       decoration: new BoxDecoration(
  17.         color: Colors.red[400],
  18.       ),
  19.       padding: new EdgeInsets.all(16.0),
  20.     ),
  21.   ),
  22.   width: 320.0,
  23.   height: 240.0,
  24.   color: Colors.grey[300],
  25. );

转换文本

在HTML / CSS中，您可以使用text-transform属性执行简单大小写转换

在Flutter中，使用 dart:core库中的String 类的方法来转换Text的内容。

{% prettify css%}
[[highlight]] Lorem ipsum [[/highlight]]

.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; [[highlight]] text-transform: uppercase; [[/highlight]] }

  1. </div>
  3. <div class="righthighlight">
  4. ```shell
  5. var container = new Container( // grey box
  6.   child: new Center(
  7.     child: new Container( // red box
  8.       child: new Text(
  9. [[highlight]]        "Lorem ipsum".toUpperCase(), [[/highlight]]
  10.         style: bold24Roboto,
  11.       ),
  12.       decoration: new BoxDecoration(
  13.         color: Colors.red[400],
  14.       ),
  15.       padding: new EdgeInsets.all(16.0),
  16.     ),
  17.   ),
  18.   width: 320.0,
  19.   height: 240.0,
  20.   color: Colors.grey[300],
  21. );

进行内联格式更改

Text widget控件，可以用相同的格式显示文本。 要显示使用多个样式的文本（在本例中为带有重点的单个单词），请改用RichText。 它的text属性可以指定一个或多个可单独设置样式的TextSpanwidget。

在以下示例中，“Lorem”位于具有默认（继承）文本样式的TextSpan小部件中，“ipsum”位于具有自定义样式的单独TextSpan中。

  1. <div class="greybox">
  2.   <div class="redbox">
  3. [[highlight]]    Lorem <em>ipsum</em> [[/highlight]]
  4.   </div>
  5. </div>
  1. .greybox {
  2.   background-color: #e0e0e0; /* grey 300 */
  3.   width: 320px;
  4.   height: 240px;
  5. [[highlight]]  font: 900 24px Roboto; [[/highlight]]
  6.   display: flex;
  7.   align-items: center;
  8.   justify-content: center;
  9. }
  10. .redbox {
  11.   background-color: #ef5350; /* red 400 */
  12.   padding: 16px;
  13.   color: #ffffff;
  14. }
  15. [[highlight]] .redbox em {
  16.   font: 300 48px Roboto;
  17.   font-style: italic;
  18. } [[/highlight]]
  1. var container = new Container( // grey box
  2.   child: new Center(
  3.     child: new Container( // red box
  4.       child: [[highlight]] new RichText(
  5.         text: new TextSpan(
  6.           style: bold24Roboto,
  7.           children: <TextSpan>[
  8.             new TextSpan(text: "Lorem "),
  9.             new TextSpan(
  10.               text: "ipsum",
  11.               style: new TextStyle(
  12.                 fontWeight: FontWeight.w300,
  13.                 fontStyle: FontStyle.italic,
  14.                 fontSize: 48.0,
  15.               ),
  16.             ),
  17.           ],
  18.         ),
  19.       ), [[/highlight]]
  20.       decoration: new BoxDecoration(
  21.         backgroundColor: Colors.red[400],
  22.       ),
  23.       padding: new EdgeInsets.all(16.0),
  24.     ),
  25.   ),
  26.   width: 320.0,
  27.   height: 240.0,
  28.   color: Colors.grey[300],
  29. );

创建文本摘要

摘录显示段落中文本的最初行，并且通常使用省略号处理溢出文本。在HTML / CSS中，摘要不能超过一行。截断多行需要一些JavaScript代码。

在Flutter中，使用Text小部件的maxLines属性来指定要包含在摘要中的行数，以及用于处理溢出文本的属性overflow。

  1. <div class="greybox">
  2.   <div class="redbox">
  3.     Lorem ipsum dolor sit amet, consec etur
  4.   </div>
  5. </div>
  7. .greybox {
  8.   background-color: #e0e0e0; /* grey 300 */
  9.   width: 320px;
  10.   height: 240px;
  11.   font: 900 24px Roboto;
  12.   display: flex;
  13.   align-items: center;
  14.   justify-content: center;
  15. }
  16. .redbox {
  17.   background-color: #ef5350; /* red 400 */
  18.   padding: 16px;
  19.   color: #ffffff;
  20. [[highlight]]  overflow: hidden;
  21.   text-overflow: ellipsis;
  22.   white-space: nowrap; [[/highlight]]
  23. }
  1. var container = new Container( // grey box
  2.   child: new Center(
  3.     child: new Container( // red box
  4.       child: new Text(
  5.         "Lorem ipsum dolor sit amet, consec etur",
  6.         style: bold24Roboto,
  7. [[highlight]]        overflow: TextOverflow.ellipsis,
  8.         maxLines: 1, [[/highlight]]
  9.       ),
  10.       decoration: new BoxDecoration(
  11.         backgroundColor: Colors.red[400],
  12.       ),
  13.       padding: new EdgeInsets.all(16.0),
  14.     ),
  15.   ),
  16.   width: 320.0,
  17.   height: 240.0,
  18.   color: Colors.grey[300],
  19. );

```