@@ -956,12 +1068,17 @@ ListTile _tile(String title, String subtitle, IconData icon) {
+[`Colors`]: {{api}}/material/Colors-class.html
+[Material 2 Design palette]: {{site.material2}}/design/color/the-color-system.html#tools-for-picking-colors
+
### Stack
Use [`Stack`][] to arrange widgets on top of a base
widget—often an image. The widgets can completely
or partially overlap the base widget.
+[`Stack`]: {{api}}/widgets/Stack-class.html
+
#### Summary (Stack)
* Use for widgets that overlap another widget
@@ -1043,6 +1160,13 @@ For a list of supported elevation values, see [Elevation][] in the
[Material guidelines][Material Design].
Specifying an unsupported value disables the drop shadow entirely.
+[`Card`]: {{api}}/material/Card-class.html
+[Elevation]: {{site.material}}/styles/elevation
+[`ListTile`]: {{api}}/material/ListTile-class.html
+[Material Design]: {{site.material}}/styles
+[`SizedBox`]: {{api}}/widgets/SizedBox-class.html
+[Material library]: {{api}}/material/material-library.html
+
#### Summary (Card)
* Implements a [Material card][]
@@ -1053,6 +1177,9 @@ Specifying an unsupported value disables the drop shadow entirely.
* A `Card`'s content can't scroll
* From the [Material library][]
+[Material card]: {{site.material}}/components/cards
+[Material library]: {{api}}/material/material-library.html
+
#### Examples (Card)
@@ -1120,6 +1247,11 @@ containing up to 3 lines of text and optional leading
and trailing icons. `ListTile` is most commonly used in
[`Card`][] or [`ListView`][], but can be used elsewhere.
+[`Card`]: {{api}}/material/Card-class.html
+[`ListTile`]: {{api}}/material/ListTile-class.html
+[`ListView`]: {{api}}/widgets/ListView-class.html
+[Material library]: {{api}}/material/material-library.html
+
#### Summary (ListTile)
* A specialized row that contains up to 3 lines of text and
@@ -1127,6 +1259,8 @@ and trailing icons. `ListTile` is most commonly used in
* Less configurable than `Row`, but easier to use
* From the [Material library][]
+[Material library]: {{api}}/material/material-library.html
+
#### Examples (ListTile)
@@ -1156,6 +1290,8 @@ to learn how Flutter positions and sizes
the components in a layout. For more information,
see [Understanding constraints][].
+[Understanding constraints]: /ui/layout/constraints
+
## Videos
The following videos, part of the
@@ -1178,6 +1314,8 @@ focuses on a widget. Several of them includes layout widgets.
[Flutter Widget of the Week playlist]({{site.yt.playlist}}PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG)
+[Flutter in Focus]: {{site.yt.watch}}?v=wgTBLj7rMPM&list=PLjxrf2q8roU2HdJQDjJzOeO6J3FoFLWr2
+
## Other resources
The following resources might help when writing layout code.
@@ -1201,48 +1339,9 @@ The following resources might help when writing layout code.
[Zero to One with Flutter][]
: One person's experience writing his first Flutter app.
-[Cupertino library]: {{api}}/cupertino/cupertino-library.html
-[`CupertinoPageScaffold`]: {{api}}/cupertino/CupertinoPageScaffold-class.html
-[Adding assets and images]: /ui/assets/assets-and-images
-[API reference docs]: {{api}}
-[`build()`]: {{api}}/widgets/StatelessWidget/build.html
-[`Card`]: {{api}}/material/Card-class.html
-[`Center`]: {{api}}/widgets/Center-class.html
-[`Column`]: {{api}}/widgets/Column-class.html
-[Common layout widgets]: #common-layout-widgets
-[`Colors`]: {{api}}/material/Colors-class.html
-[`Container`]: {{api}}/widgets/Container-class.html
-[`CrossAxisAlignment`]: {{api}}/rendering/CrossAxisAlignment.html
-[`DataTable`]: {{api}}/material/DataTable-class.html
-[Elevation]: {{site.material}}/styles/elevation
-[`Expanded`]: {{api}}/widgets/Expanded-class.html
-[Flutter in Focus]: {{site.yt.watch}}?v=wgTBLj7rMPM&list=PLjxrf2q8roU2HdJQDjJzOeO6J3FoFLWr2
-[`GridView`]: {{api}}/widgets/GridView-class.html
-[`GridTile`]: {{api}}/material/GridTile-class.html
-[HTML/CSS Analogs in Flutter]: /get-started/flutter-for/web-devs
-[`Icon`]: {{api}}/material/Icons-class.html
-[`Image`]: {{api}}/widgets/Image-class.html
[Layout tutorial]: /ui/layout/tutorial
-[layout widgets]: /ui/widgets/layout
-[`ListTile`]: {{api}}/material/ListTile-class.html
-[`ListView`]: {{api}}/widgets/ListView-class.html
-[`MainAxisAlignment`]: {{api}}/rendering/MainAxisAlignment.html
-[Material card]: {{site.material}}/components/cards
-[Material Design]: {{site.material}}/styles
-[Material 2 Design palette]: {{site.material2}}/design/color/the-color-system.html#tools-for-picking-colors
-[Material library]: {{api}}/material/material-library.html
-[pubspec file]: {{examples}}/layout/pavlova/pubspec.yaml
-[`pubspec.yaml` file]: {{examples}}/layout/row_column/pubspec.yaml
-[`Row`]: {{api}}/widgets/Row-class.html
-[`Scaffold`]: {{api}}/material/Scaffold-class.html
-[`SizedBox`]: {{api}}/widgets/SizedBox-class.html
-[`Stack`]: {{api}}/widgets/Stack-class.html
-[`Table`]: {{api}}/widgets/Table-class.html
-[`Text`]: {{api}}/widgets/Text-class.html
-[tutorial]: /ui/layout/tutorial
-[widgets library]: {{api}}/widgets/widgets-library.html
[Widget catalog]: /ui/widgets
-[Debugging layout issues visually]: /tools/devtools/inspector#debugging-layout-issues-visually
-[Understanding constraints]: /ui/layout/constraints
-[Using the Flutter inspector]: /tools/devtools/inspector
+[HTML/CSS Analogs in Flutter]: /get-started/flutter-for/web-devs
+[API reference docs]: {{api}}
+[Adding assets and images]: /ui/assets/assets-and-images
[Zero to One with Flutter]: {{site.medium}}/@mravn/zero-to-one-with-flutter-43b13fd7b354
@@ -57,17 +56,30 @@ that allows you to customize its child widget. Use a `Container` when
you want to add padding, margins, borders, or background color,
to name some of its capabilities.
-In this example, each [`Text`][] widget is placed in a `Container`
+Each [`Text`][] widget is placed in a `Container`
to add margins. The entire [`Row`][] is also placed in a
`Container` to add padding around the row.
-The rest of the UI in this example is controlled by properties.
+The rest of the UI is controlled by properties.
Set an [`Icon`][]'s color using its `color` property.
Use the `Text.style` property to set the font, its color, weight, and so on.
Columns and rows have properties that allow you to specify how their
children are aligned vertically or horizontally, and how much space
the children should occupy.
+:::note
+Most of the screenshots in this tutorial are displayed with
+`debugPaintSizeEnabled` set to `true` so you can see the
+visual layout. For more information, see
+[Debugging layout issues visually][].
+:::
+
+[`Container`]: {{api}}/widgets/Container-class.html
+[Debugging layout issues visually]: /tools/devtools/inspector#debugging-layout-issues-visually
+[`Icon`]: {{api}}/material/Icons-class.html
+[`Row`]: {{api}}/widgets/Row-class.html
+[`Text`]: {{api}}/widgets/Text-class.html
+
## Lay out a widget
How do you lay out a single widget in Flutter? This section
@@ -80,36 +92,42 @@ or an image on the screen.
### 1. Select a layout widget
Choose from a variety of [layout widgets][] based
-on how you want to align or constrain the visible widget,
+on how you want to align or constrain a visible widget,
as these characteristics are typically passed on to the
contained widget.
-This example uses [`Center`][] which centers its content
-horizontally and vertically.
-
-### 2. Create a visible widget
-
-For example, create a [`Text`][] widget:
+For example, you could use the
+[`Center`][] layout widget to center a visible widget
+horizontally and vertically:
-
```dart
-Text('Hello World'),
+Center(
+ //content here
+)
```
-Create an [`Image`][] widget:
+[`Center`]: {{api}}/widgets/Center-class.html
+[layout widgets]: /ui/widgets/layout
-
-```dart
-return Image.asset(image, fit: BoxFit.cover);
-```
+### 2. Create a visible widget
+
+Choose a [visible widget][] for your app to contain
+visible elements, such as [text][], [images][], or
+[icons][].
-Create an [`Icon`][] widget:
+For example, you could use the [`Text`][] widget display
+some text:
-
```dart
-Icon(Icons.star, color: Colors.red[500]),
+Text('Hello World')
```
+[icons]: {{api}}/material/Icons-class.html
+[images]: {{api}}/widgets/Image-class.html
+[text]: {{api}}/widgets/Text-class.html
+[`Text`]: {{api}}/widgets/Text-class.html
+[visible widget]: /ui/widgets
+
### 3. Add the visible widget to the layout widget
@@ -136,7 +154,48 @@ A Flutter app is itself a widget, and most widgets have a [`build()`][]
method. Instantiating and returning a widget in the app's `build()` method
displays the widget.
-#### Material apps
+
+
+
+
+{% tabs "app-type-tabs" %}
+
+{% tab "Standard apps" %}
+
+For a general app, you can add the `Container` widget to
+the app's `build()` method:
+
+
+
+```dart
+class MyApp extends StatelessWidget {
+ const MyApp({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ decoration: const BoxDecoration(color: Colors.white),
+ child: const Center(
+ child: Text(
+ 'Hello World',
+ textDirection: TextDirection.ltr,
+ style: TextStyle(fontSize: 32, color: Colors.black87),
+ ),
+ ),
+ );
+ }
+}
+```
+
+By default, a general app doesn't include an `AppBar`,
+title, or background color. If you want these features in a
+general app, you have to build them yourself. This app
+changes the background color to white and the text to
+dark grey to mimic a Material app.
+
+{% endtab %}
+
+{% tab "Material apps" %}
For a `Material` app, you can use a [`Scaffold`][] widget;
it provides a default banner, background color,
@@ -175,7 +234,9 @@ libraries, you can customize existing widgets,
or you can build your own set of custom widgets.
:::
-#### Cupertino apps
+{% endtab %}
+
+{% tab "Cupertino apps" %}
To create a `Cupertino` app, use `CupertinoApp` and [`CupertinoPageScaffold`][] widgets.
@@ -235,47 +296,28 @@ You can mix widgets from both libraries, you can customize existing widgets,
or you can build your own set of custom widgets.
:::
+{% endtab %}
+
+{% endtabs %}
+
[`CupertinoColors`]: {{api}}/cupertino/CupertinoColors-class.html
+[`CupertinoPageScaffold`]: {{api}}/cupertino/CupertinoPageScaffold-class.html
[`CupertinoThemeData`]: {{api}}/cupertino/CupertinoThemeData-class.html
[`CupertinoNavigationBar`]: {{api}}/cupertino/CupertinoNavigationBar-class.html
+[Cupertino library]: {{api}}/cupertino/cupertino-library.html
[Apple's Human Interface Guidelines for iOS]: {{site.apple-dev}}/design/human-interface-guidelines/designing-for-ios
+[`build()`]: {{api}}/widgets/StatelessWidget/build.html
+[Material library]: {{api}}/material/material-library.html
+[`Scaffold`]: {{api}}/material/Scaffold-class.html
+[widgets library]: {{api}}/widgets/widgets-library.html
-#### Non-Material apps
-
-For a non-Material app, you can add the `Container` widget to the app's
-`build()` method:
-
-
-
-```dart
-class MyApp extends StatelessWidget {
- const MyApp({super.key});
-
- @override
- Widget build(BuildContext context) {
- return Container(
- decoration: const BoxDecoration(color: Colors.white),
- child: const Center(
- child: Text(
- 'Hello World',
- textDirection: TextDirection.ltr,
- style: TextStyle(fontSize: 32, color: Colors.black87),
- ),
- ),
- );
- }
-}
-```
-
-By default, a non-Material app doesn't include an `AppBar`, title,
-or background color. If you want these features in a non-Material app,
-you have to build them yourself. This app changes the background
-color to white and the text to dark grey to mimic a Material app.
+### 5. Run your app