diff --git a/src/get-started/flutter-for/web-devs.md b/src/get-started/flutter-for/web-devs.md index bb789ae6c1..28804f6979 100644 --- a/src/get-started/flutter-for/web-devs.md +++ b/src/get-started/flutter-for/web-devs.md @@ -4,14 +4,15 @@ description: Learn how to apply Web developer knowledge when building Flutter ap css-old: [two_column.css] --- -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. +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. -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][]. +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: @@ -21,21 +22,23 @@ The examples assume: ```css { - box-sizing: border-box; + 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: +* 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 = TextStyle( color: Colors.white, fontSize: 24, - fontWeight: FontWeight.w900, + fontWeight: FontWeight.bold, ); ``` {{site.alert.secondary}} - How is react-style, or _declarative_, programming different than the + How is react-style, or _declarative_, programming different from the traditional imperative style? For a comparison, see [Introduction to declarative UI][]. {{site.alert.end}} @@ -50,97 +53,100 @@ 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. +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. +In both HTML and Flutter, child elements or widgets +are anchored at the top left, by default.
{% prettify css %} -
- Lorem ipsum +
+ Lorem ipsum
-.greybox { - background-color: #e0e0e0; /* grey 300 */ - width: 320px; - height: 240px; - [[highlight]]font: 900 24px Georgia;[[/highlight]] - [[highlight]]text-align: center;[[/highlight]] - } +.grey-box { + background-color: #e0e0e0; /* grey 300 */ + width: 320px; + height: 240px; + [[highlight]]font: 900 24px Georgia;[[/highlight]] +} {% endprettify %}
{% prettify dart %} - var container = Container( // grey box - child: Text( - "Lorem ipsum", - [[highlight]]textAlign: TextAlign.center,[[/highlight]] - style: [[highlight]]TextStyle( - fontSize: 24, - fontWeight: FontWeight.w900, - fontFamily: "Georgia", - ),[[/highlight]] - ), - width: 320, - height: 240, - color: Colors.grey[300], - ); +final container = Container( // grey box + width: 320, + height: 240, + color: Colors.grey[300], + child: Text( + 'Lorem ipsum', + style: [[highlight]]const TextStyle( + fontFamily: 'Georgia', + fontSize: 24, + fontWeight: FontWeight.bold, + ),[[/highlight]] + [[highlight]]textAlign: TextAlign.center,[[/highlight]] + ), +); {% endprettify %}
### 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. +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.
{% prettify css %} -
+
Lorem ipsum
-.greybox { - [[highlight]]background-color: #e0e0e0;[[/highlight]] /* grey 300 */ - width: 320px; - height: 240px; - font: 900 24px Roboto; - } +.grey-box { + [[highlight]]background-color: #e0e0e0;[[/highlight]] /* grey 300 */ + width: 320px; + height: 240px; + font: 900 24px Roboto; +} {% endprettify %}
{% prettify dart %} - var container = Container( // grey box - child: Text( - "Lorem ipsum", - style: bold24Roboto, - ), - width: 320, - height: 240, - [[highlight]]color: Colors.grey[300],[[/highlight]] - ); +final container = Container( // grey box + width: 320, + height: 240, + [[highlight]]color: Colors.grey[300],[[/highlight]] + child: Text( + 'Lorem ipsum', + style: bold24Roboto, + ), +); {% endprettify %}
{% prettify dart %} - var container = Container( // grey box - child: Text( - "Lorem ipsum", - style: bold24Roboto, - ), - width: 320, - height: 240, - [[highlight]]decoration: BoxDecoration( - color: Colors.grey[300], - ),[[/highlight]] - ); +final container = Container( // grey box + width: 320, + height: 240, + [[highlight]]decoration: BoxDecoration( + color: Colors.grey[300], + ),[[/highlight]] + child: Text( + 'Lorem ipsum', + style: bold24Roboto, + ), +); {% endprettify %}
@@ -155,34 +161,34 @@ behavior.
{% prettify css %} -
+
Lorem ipsum
-.greybox { - background-color: #e0e0e0; /* grey 300 */ - width: 320px; - height: 240px; - font: 900 24px Roboto; - [[highlight]]display: flex; - align-items: center; - justify-content: center; [[/highlight]] +.grey-box { + background-color: #e0e0e0; /* grey 300 */ + width: 320px; + height: 240px; + font: 900 24px Roboto; + [[highlight]]display: flex; + align-items: center; + justify-content: center;[[/highlight]] } {% endprettify %}
{% prettify dart %} -var container = Container( // grey box - child: [[highlight]]Center( - child: [[/highlight]] Text( - "Lorem ipsum", - style: bold24Roboto, - ), - ), +final container = Container( // grey box width: 320, height: 240, color: Colors.grey[300], + child: [[highlight]]Center( + child:[[/highlight]] Text( + 'Lorem ipsum', + style: bold24Roboto, + ), + ), ); {% endprettify %}
@@ -190,128 +196,129 @@ var container = Container( // grey box ### 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`. +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.
{% prettify css %} -
-
+
+
Lorem ipsum
-.greybox { - background-color: #e0e0e0; /* grey 300 */ - [[highlight]]width: 320px; [[/highlight]] - height: 240px; - font: 900 24px Roboto; - display: flex; - align-items: center; - justify-content: center; +.grey-box { + background-color: #e0e0e0; /* grey 300 */ + [[highlight]]width: 320px;[[/highlight]] + 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]]width: 100%; - max-width: 240px; [[/highlight]] +.red-box { + background-color: #ef5350; /* red 400 */ + padding: 16px; + color: #ffffff; + [[highlight]]width: 100%; + max-width: 240px;[[/highlight]] } {% endprettify %}
{% prettify dart %} -var container = Container( // grey box +final container = Container( // grey box + [[highlight]]width: 320,[[/highlight]] + height: 240, + color: Colors.grey[300], child: Center( child: Container( // red box - child: Text( - "Lorem ipsum", - style: bold24Roboto, - ), + [[highlight]]width: 240,[[/highlight]]// max-width is 240 + padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: Colors.red[400], ), - padding: EdgeInsets.all(16), - [[highlight]]width: 240, [[/highlight]]//max-width is 240 + child: Text( + 'Lorem ipsum', + style: bold24Roboto, + ), ), ), - [[highlight]]width: 320, [[/highlight]] - height: 240, - color: Colors.grey[300], ); {% endprettify %}
## Manipulating position and size -The following examples show how to perform more complex operations on widget -position, size, and background. +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 a [`Positioned`][] -widget that is, in turn, nested in a [`Stack`][] widget. +nest it in a [`Positioned`][] widget that is, +in turn, nested in a [`Stack`][] widget.
{% prettify css %} -
-
+
+
Lorem ipsum
-.greybox { - background-color: #e0e0e0; /* grey 300 */ - width: 320px; - height: 240px; - font: 900 24px Roboto; - [[highlight]]position: relative; [[/highlight]] +.grey-box { + [[highlight]]position: relative;[[/highlight]] + background-color: #e0e0e0; /* grey 300 */ + width: 320px; + height: 240px; + font: 900 24px Roboto; } -.redbox { - background-color: #ef5350; /* red 400 */ - padding: 16px; - color: #ffffff; - [[highlight]]position: absolute; - top: 24px; - left: 24px; [[/highlight]] +.red-box { + background-color: #ef5350; /* red 400 */ + padding: 16px; + color: #ffffff; + [[highlight]]position: absolute; + top: 24px; + left: 24px;[[/highlight]] } {% endprettify %}
{% prettify dart %} -var container = Container( // grey box +final container = Container( // grey box + width: 320, + height: 240, + color: Colors.grey[300], [[highlight]]child: Stack( - children: [ + children:[[/highlight]] [ Positioned( // red box - child: [[/highlight]] Container( - child: Text( - "Lorem ipsum", - style: bold24Roboto, - ), + [[highlight]]left: 24, + top: 24,[[/highlight]] + child: Container( + padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: Colors.red[400], ), - padding: EdgeInsets.all(16), + child: Text( + 'Lorem ipsum', + style: bold24Roboto, + ), ), - [[highlight]]left: 24, - top: 24, ), ], - ), [[/highlight]] - width: 320, - height: 240, - color: Colors.grey[300], + ), ); {% endprettify %}
@@ -319,63 +326,65 @@ var container = Container( // grey box ### 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, +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). +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).
{% prettify 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; +.grey-box { + 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]]transform: rotate(15deg); [[/highlight]] +.red-box { + background-color: #ef5350; /* red 400 */ + padding: 16px; + color: #ffffff; + [[highlight]]transform: rotate(15deg);[[/highlight]] } {% endprettify %}
{% prettify dart %} -var container = Container( // gray box +final container = Container( // grey box + width: 320, + height: 240, + color: Colors.grey[300], child: Center( - child: [[highlight]]Transform( - child: [[/highlight]] Container( // red box + child: [[highlight]]Transform( + alignment: Alignment.center, + transform: Matrix4.identity() + ..rotateZ(15 * 3.1415927 / 180), + child:[[/highlight]] Container( // red box + padding: const EdgeInsets.all(16), + decoration: BoxDecoration( + color: Colors.red[400], + ), child: Text( - "Lorem ipsum", + 'Lorem ipsum', style: bold24Roboto, textAlign: TextAlign.center, ), - decoration: BoxDecoration( - color: Colors.red[400], - ), - padding: EdgeInsets.all(16), ), - [[highlight]]alignment: Alignment.center, - transform: Matrix4.identity() - ..rotateZ(15 * 3.1415927 / 180), - ), [[/highlight]] + ), ), - width: 320, - height: 240, - color: Colors.grey[300], ); {% endprettify %}
@@ -384,65 +393,66 @@ var container = Container( // gray box 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. +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. +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.
{% prettify 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; +.grey-box { + 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]]transform: scale(1.5); [[/highlight]] +.red-box { + background-color: #ef5350; /* red 400 */ + padding: 16px; + color: #ffffff; + [[highlight]]transform: scale(1.5);[[/highlight]] } {% endprettify %}
{% prettify dart %} -var container = Container( // gray box +final container = Container( // grey box + width: 320, + height: 240, + color: Colors.grey[300], child: Center( - child: [[highlight]]Transform( - child: [[/highlight]] Container( // red box + child: [[highlight]]Transform( + alignment: Alignment.center, + transform: Matrix4.identity() + ..scale(1.5), + child:[[/highlight]] Container( // red box + padding: const EdgeInsets.all(16), + decoration: BoxDecoration( + color: Colors.red[400], + ), child: Text( - "Lorem ipsum", + 'Lorem ipsum', style: bold24Roboto, textAlign: TextAlign.center, ), - decoration: BoxDecoration( - color: Colors.red[400], - ), - padding: EdgeInsets.all(16), ), - [[highlight]]alignment: Alignment.center, - transform: Matrix4.identity() - ..scale(1.5), - ), [[/highlight]] - width: 320, - height: 240, - color: Colors.grey[300], + ), + ), ); {% endprettify %}
@@ -466,53 +476,53 @@ The gradient “angle” is based on the Alignment (x, y) values:
{% prettify 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; +.grey-box { + background-color: #e0e0e0; /* grey 300 */ + width: 320px; + height: 240px; + font: 900 24px Roboto; + display: flex; + align-items: center; + justify-content: center; } -.redbox { - padding: 16px; - color: #ffffff; - [[highlight]]background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%); [[/highlight]] +.red-box { + padding: 16px; + color: #ffffff; + [[highlight]]background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%);[[/highlight]] } {% endprettify %}
{% prettify dart %} -var container = Container( // grey box +final container = Container( // grey box + width: 320, + height: 240, + color: Colors.grey[300], child: Center( child: Container( // red box - child: Text( - "Lorem ipsum", - style: bold24Roboto, - ), - [[highlight]]decoration: BoxDecoration( + [[highlight]]decoration: const BoxDecoration( gradient: LinearGradient( - begin: const Alignment(0.0, -1.0), - end: const Alignment(0.0, 0.6), + begin: Alignment.topCenter, + end: Alignment(0.0, 0.6), colors: [ - const Color(0xffef5350), - const Color(0x00ef5350) + Color(0xffef5350), + Color(0x00ef5350), ], ), - ), [[/highlight]] - padding: EdgeInsets.all(16), + ),[[/highlight]] + padding: const EdgeInsets.all(16), + child: Text( + 'Lorem ipsum', + style: bold24Roboto, + ), ), ), - width: 320, - height: 240, - color: Colors.grey[300], ); {% endprettify %}
@@ -521,53 +531,53 @@ var container = Container( // grey box
{% prettify 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; +.grey-box { + background-color: #e0e0e0; /* grey 300 */ + width: 320px; + height: 240px; + font: 900 24px Roboto; + display: flex; + align-items: center; + justify-content: center; } -.redbox { - padding: 16px; - color: #ffffff; - [[highlight]]background: linear-gradient(90deg, #ef5350, rgba(0, 0, 0, 0) 80%); [[/highlight]] +.red-box { + padding: 16px; + color: #ffffff; + [[highlight]]background: linear-gradient(90deg, #ef5350, rgba(0, 0, 0, 0) 80%);[[/highlight]] } {% endprettify %}
{% prettify dart %} -var container = Container( // grey box +final container = Container( // grey box + width: 320, + height: 240, + color: Colors.grey[300], child: Center( child: Container( // red box - child: Text( - "Lorem ipsum", - style: bold24Roboto, - ), - [[highlight]]decoration: BoxDecoration( + padding: const EdgeInsets.all(16), + [[highlight]]decoration: const BoxDecoration( gradient: LinearGradient( - begin: const Alignment(-1.0, 0.0), - end: const Alignment(0.6, 0.0), + begin: Alignment(-1.0, 0.0), + end: Alignment(0.6, 0.0), colors: [ - const Color(0xffef5350), - const Color(0x00ef5350) + Color(0xffef5350), + Color(0x00ef5350), ], ), - ), [[/highlight]] - padding: EdgeInsets.all(16), + ),[[/highlight]] + child: Text( + 'Lorem ipsum', + style: bold24Roboto, + ), ), ), - width: 320, - height: 240, - color: Colors.grey[300], ); {% endprettify %}
@@ -585,50 +595,50 @@ object that specifies the radius for rounding each corner.
{% prettify 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; +.grey-box { + 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]]border-radius: 8px; [[/highlight]] +.red-box { + background-color: #ef5350; /* red 400 */ + padding: 16px; + color: #ffffff; + [[highlight]]border-radius: 8px;[[/highlight]] } {% endprettify %}
{% prettify dart %} -var container = Container( // grey box +final container = Container( // grey box + width: 320, + height: 240, + color: Colors.grey[300], child: Center( child: Container( // red circle - child: Text( - "Lorem ipsum", - style: bold24Roboto, - ), + padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: Colors.red[400], [[highlight]]borderRadius: BorderRadius.all( const Radius.circular(8), - ), [[/highlight]] + ),[[/highlight]] + ), + child: Text( + 'Lorem ipsum', + style: bold24Roboto, ), - padding: EdgeInsets.all(16), ), ), - width: 320, - height: 240, - color: Colors.grey[300], ); {% endprettify %}
@@ -639,8 +649,8 @@ 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` +* `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 the `boxShadow` property of `BoxDecoration` to create a list of @@ -650,63 +660,63 @@ to customize the shadow depth, color, and so on.
{% prettify 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; +.grey-box { + 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]]box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), +.red-box { + background-color: #ef5350; /* red 400 */ + padding: 16px; + color: #ffffff; + [[highlight]]box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 6px 20px rgba(0, 0, 0, 0.5);[[/highlight]] } {% endprettify %}
{% prettify dart %} -var container = Container( // grey box +final container = Container( // grey box + width: 320, + height: 240, + margin: const EdgeInsets.only(bottom: 16), + decoration: BoxDecoration( + color: Colors.grey[300], + ), child: Center( child: Container( // red box - child: Text( - "Lorem ipsum", - style: bold24Roboto, - ), + padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: Colors.red[400], - [[highlight]]boxShadow: [ - BoxShadow ( - color: const Color(0xcc000000), + [[highlight]]boxShadow: const [ + BoxShadow( + color: Color(0xcc000000), offset: Offset(0, 2), blurRadius: 4, ), - BoxShadow ( - color: const Color(0x80000000), + BoxShadow( + color: Color(0x80000000), offset: Offset(0, 6), blurRadius: 20, ), - ], [[/highlight]] + ],[[/highlight]] + ), + child: Text( + 'Lorem ipsum', + style: bold24Roboto, ), - padding: EdgeInsets.all(16), ), ), - width: 320, - height: 240, - decoration: BoxDecoration( - color: Colors.grey[300], - ), - margin: EdgeInsets.only(bottom: 16), ); {% endprettify %}
@@ -717,60 +727,61 @@ 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`][], Flutter provides a `shape` property with -[`BoxShape` enum][] for this purpose. +While this approach is supported +with the `borderRadius` property of [`BoxDecoration`][], +Flutter provides a `shape` property +with [`BoxShape` enum][] for this purpose.
{% prettify 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; +.grey-box { + background-color: #e0e0e0; /* grey 300 */ + width: 320px; + height: 240px; + font: 900 24px Roboto; + display: flex; + align-items: center; + justify-content: center; } -.redcircle { - background-color: #ef5350; /* red 400 */ - padding: 16px; - color: #ffffff; - [[highlight]]text-align: center; - width: 160px; - height: 160px; - border-radius: 50%; [[/highlight]] +.red-circle { + background-color: #ef5350; /* red 400 */ + padding: 16px; + color: #ffffff; + [[highlight]]text-align: center; + width: 160px; + height: 160px; + border-radius: 50%;[[/highlight]] } {% endprettify %}
{% prettify dart %} -var container = Container( // grey box +final container = Container( // grey box + width: 320, + height: 240, + color: Colors.grey[300], child: Center( child: Container( // red circle - child: Text( - "Lorem ipsum", - style: bold24Roboto, - [[highlight]]textAlign: TextAlign.center, [[/highlight]] - ), decoration: BoxDecoration( color: Colors.red[400], - [[highlight]]shape: BoxShape.circle, [[/highlight]] + [[highlight]]shape: BoxShape.circle,[[/highlight]] ), - padding: EdgeInsets.all(16), + padding: const EdgeInsets.all(16), [[highlight]]width: 160, - height: 160, [[/highlight]] + height: 160,[[/highlight]] + child: Text( + 'Lorem ipsum', + style: bold24Roboto, + [[highlight]]textAlign: TextAlign.center,[[/highlight]] + ), ), ), - width: 320, - height: 240, - color: Colors.grey[300], ); {% endprettify %}
@@ -781,125 +792,131 @@ 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 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 the `letterSpacing` and `wordSpacing` properties of a -[`TextStyle`][] child of a `Text` widget. +for the `letterSpacing` and `wordSpacing` properties +of a [`TextStyle`][] child of a `Text` widget.
{% prettify 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; +.grey-box { + 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]] +.red-box { + background-color: #ef5350; /* red 400 */ + padding: 16px; + color: #ffffff; + [[highlight]]letter-spacing: 4px;[[/highlight]] } {% endprettify %}
{% prettify dart %} -var container = Container( // grey box +final container = Container( // grey box + width: 320, + height: 240, + color: Colors.grey[300], child: Center( child: Container( // red box - child: Text( - "Lorem ipsum", + 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, - [[highlight]]letterSpacing: 4, [[/highlight]] + [[highlight]]letterSpacing: 4,[[/highlight]] ), ), - decoration: BoxDecoration( - color: Colors.red[400], - ), - padding: EdgeInsets.all(16), ), ), - width: 320, - height: 240, - color: Colors.grey[300], ); {% endprettify %}
### Making inline formatting changes -A [`Text`][] 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 a [`RichText`][] -widget instead. Its `text` property can specify one or more -[`TextSpan`][] widgets +A [`Text`][] 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 a [`RichText`][]widget instead. +Its `text` property can specify one or more [`TextSpan`][] widgets that can be individually styled. -In the following example, "Lorem" is in a `TextSpan` widget with the default -(inherited) text styling, and "ipsum" is in a separate `TextSpan` with custom -styling. - +In the following example, "Lorem" is in a `TextSpan` widget +with the default (inherited) text styling, +and "ipsum" is in a separate `TextSpan` with custom styling.
{% prettify css %} -
-
+
+
[[highlight]]Lorem ipsum[[/highlight]]
-.greybox { - background-color: #e0e0e0; /* grey 300 */ - width: 320px; - height: 240px; - [[highlight]]font: 900 24px Roboto;[[/highlight]] - display: flex; - align-items: center; - justify-content: center; +.grey-box { + background-color: #e0e0e0; /* grey 300 */ + width: 320px; + height: 240px; + [[highlight]]font: 900 24px Roboto;[[/highlight]] + display: flex; + align-items: center; + justify-content: center; } -.redbox { - background-color: #ef5350; /* red 400 */ - padding: 16px; - color: #ffffff; +.red-box { + background-color: #ef5350; /* red 400 */ + padding: 16px; + color: #ffffff; } - [[highlight]].redbox em { - font: 300 48px Roboto; - font-style: italic; -} [[/highlight]] +[[highlight]].red-box em { + font: 300 48px Roboto; + font-style: italic; +}[[/highlight]] {% endprettify %}
{% prettify dart %} -var container = Container( // grey box +final container = Container( // grey box + width: 320, + height: 240, + color: Colors.grey[300], child: Center( child: Container( // red box - child: [[highlight]]RichText( + decoration: BoxDecoration( + color: Colors.red[400], + ), + padding: const EdgeInsets.all(16), + child: [[highlight]]RichText( text: TextSpan( style: bold24Roboto, - children: [ - TextSpan(text: "Lorem "), + children: const [ + TextSpan(text: 'Lorem '), TextSpan( - text: "ipsum", + text: 'ipsum', style: TextStyle( fontWeight: FontWeight.w300, fontStyle: FontStyle.italic, @@ -908,16 +925,9 @@ var container = Container( // grey box ), ], ), - ), [[/highlight]] - decoration: BoxDecoration( - color: Colors.red[400], - ), - padding: EdgeInsets.all(16), + ),[[/highlight]] ), ), - width: 320, - height: 240, - color: Colors.grey[300], ); {% endprettify %}
@@ -929,57 +939,57 @@ and handles the overflow text, often using an ellipsis. In HTML/CSS an excerpt can be no longer than one line. Truncating after multiple lines requires some JavaScript code. -In Flutter, use the `maxLines` property of a [`Text`][] -widget to specify the number of lines to include in the excerpt, +In Flutter, 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 overflow text.
{% prettify css %} -
-
+
+
Lorem ipsum dolor sit amet, consec etur
-.greybox { - background-color: #e0e0e0; /* grey 300 */ - width: 320px; - height: 240px; - font: 900 24px Roboto; - display: flex; - align-items: center; - justify-content: center; +.grey-box { + 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]]overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; [[/highlight]] +.red-box { + background-color: #ef5350; /* red 400 */ + padding: 16px; + color: #ffffff; + [[highlight]]overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap;[[/highlight]] } {% endprettify %}
{% prettify dart %} -var container = Container( // grey box +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: Text( - "Lorem ipsum dolor sit amet, consec etur", + 'Lorem ipsum dolor sit amet, consec etur', style: bold24Roboto, [[highlight]]overflow: TextOverflow.ellipsis, - maxLines: 1, [[/highlight]] + maxLines: 1,[[/highlight]] ), - decoration: BoxDecoration( - color: Colors.red[400], - ), - padding: EdgeInsets.all(16), ), ), - width: 320, - height: 240, - color: Colors.grey[300], ); {% endprettify %}