Skip to content

Fix formatting of some code alongside image cases #12723

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 19, 2025
+73 −74
Merged

Fix formatting of some code alongside image cases #12723

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
01a18fe
Fix formatting of some code alongside image cases
parlough Nov 19, 2025
378704c
Merge branch 'main' into fix/12717
parlough Nov 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 26 additions & 26 deletions src/content/get-started/fundamentals/layout.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,9 +203,9 @@ The first figure on this page used both.
This is the most basic example of using a `Row` widget.

{% render "docs/code-and-image.md",
image:"fwe/layout/row.png",
caption: "This figure shows a row widget with three children."
alt: "A screenshot of a row widget with three children"
image: "fwe/layout/row.png",
caption: "This figure shows a row widget with three children.",
alt: "A screenshot of a row widget with three children",
code:"
```dart
Widget build(BuildContext context) {
Expand All @@ -228,9 +228,9 @@ of the images in the example above using columns.


{% render "docs/code-and-image.md",
image:"fwe/layout/nested_row_column.png",
caption: "This figure shows a row widget with three children, each of which is a column."
alt: "A screenshot of a row of three widgets, each of which has a label underneath it."
image: "fwe/layout/nested_row_column.png",
caption: "This figure shows a row widget with three children, each of which is a column.",
alt: "A screenshot of a row of three widgets, each of which has a label underneath it.",
code:"
```dart
Widget build(BuildContext context) {
Expand Down Expand Up @@ -287,9 +287,9 @@ divides the free horizontal space evenly between,
before, and after each image.

{% render "docs/code-and-image.md",
image:"fwe/layout/space_evenly.png",
caption: "This figure shows a row widget with three children, which are aligned with the MainAxisAlignment.spaceEvenly constant."
alt: "A screenshot of three widgets, spaced evenly from each other."
image: "fwe/layout/space_evenly.png",
caption: "This figure shows a row widget with three children, which are aligned with the MainAxisAlignment.spaceEvenly constant.",
alt: "A screenshot of three widgets, spaced evenly from each other.",
code:"
```dart
Widget build(BuildContext context) {
Expand Down Expand Up @@ -340,9 +340,9 @@ images is too wide for its render box,
wrap each image with an [`Expanded`][] widget.

{% render "docs/code-and-image.md",
image:"fwe/layout/expanded_row.png",
caption: "This figure shows a row widget with three children that are wrapped with `Expanded` widgets."
alt: "A screenshot of three widgets, which take up exactly the amount of space available on the main axis. All three widgets are equal width."
image: "fwe/layout/expanded_row.png",
caption: "This figure shows a row widget with three children that are wrapped with `Expanded` widgets.",
alt: "A screenshot of three widgets, which take up exactly the amount of space available on the main axis. All three widgets are equal width.",
code:"
```dart
Widget build(BuildContext context) {
Expand Down Expand Up @@ -375,9 +375,9 @@ The following code sets the flex factor of the
middle image to 2:

{% render "docs/code-and-image.md",
image:"fwe/layout/flex_2_row.png",
caption: "This figure shows a row widget with three children which are wrapped with `Expanded` widgets. The center child has it's `flex` property set to 2."
alt: "A screenshot of three widgets, which take up exactly the amount of space available on the main axis. The widget in the center is twice as wide as the widgets on the left and right."
image: "fwe/layout/flex_2_row.png",
caption: "This figure shows a row widget with three children which are wrapped with `Expanded` widgets. The center child has it's `flex` property set to 2.",
alt: "A screenshot of three widgets, which take up exactly the amount of space available on the main axis. The widget in the center is twice as wide as the widgets on the left and right.",
code:"
```dart
Widget build(BuildContext context) {
Expand Down Expand Up @@ -470,9 +470,9 @@ all the available space on the cross axis,
as shown in the example below.

{% render "docs/code-and-image.md",
image:"fwe/layout/basic_listview.png",
caption: "This figure shows a ListView widget with three children."
alt: "A screenshot of three widgets laid out vertically. They have expanded to take up all available space on the cross axis."
image: "fwe/layout/basic_listview.png",
caption: "This figure shows a ListView widget with three children.",
alt: "A screenshot of three widgets laid out vertically. They have expanded to take up all available space on the cross axis.",
code:"
```dart
Widget build(BuildContext context) {
Expand Down Expand Up @@ -501,9 +501,9 @@ and therefore the number of todos is unknown.


{% render "docs/code-and-image.md",
image:"fwe/layout/listview_builder.png",
caption: "This figure shows the ListView.builder constructor to display an unknown number of children."
alt: "A screenshot of several widgets laid out vertically. They have expanded to take up all available space on the cross axis."
image: "fwe/layout/listview_builder.png",
caption: "This figure shows the ListView.builder constructor to display an unknown number of children.",
alt: "A screenshot of several widgets laid out vertically. They have expanded to take up all available space on the cross axis.",
code:"
```dart
final List<ToDo> items = Repository.fetchTodos();
Expand Down Expand Up @@ -599,9 +599,9 @@ or greater than 600 pixels.


{% render "docs/code-and-image.md",
image:"fwe/layout/layout_builder.png",
caption: "This figure shows a narrow layout, which lays out its children vertically, and a wider layout, which lays out its children in a grid."
alt: "Two screenshots, in which one shows a narrow layout and the other shows a wide layout."
image: "fwe/layout/layout_builder.png",
caption: "This figure shows a narrow layout, which lays out its children vertically, and a wider layout, which lays out its children in a grid.",
alt: "Two screenshots, in which one shows a narrow layout and the other shows a wide layout.",
code:"
```dart
Widget build(BuildContext context) {
Expand Down Expand Up @@ -667,8 +667,8 @@ the following example changes the
background color of every other list item.

{% render "docs/code-and-image.md",
image:"fwe/layout/alternating_list_items.png"
caption:"This figure shows a `ListView`, in which its children have alternating background colors. The background colors were determined programmatically based on the index of the child within the `ListView`."
image: "fwe/layout/alternating_list_items.png",
caption:"This figure shows a `ListView`, in which its children have alternating background colors. The background colors were determined programmatically based on the index of the child within the `ListView`.",
code:"
```dart
final List<ToDo> items = Repository.fetchTodos();
Expand Down
95 changes: 47 additions & 48 deletions src/content/get-started/fundamentals/user-input.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,9 @@ You can style a button based on its state using `WidgetStateProperty`.


{% render "docs/code-and-image.md",
image:"fwe/user-input/ElevatedButton.webp",
caption: "This figure shows an ElevatedButton with the text \"Enabled\" being clicked."
alt: "A GIF of an elevated button with the text 'Enabled'"
image: "fwe/user-input/ElevatedButton.webp",
caption: "This figure shows an ElevatedButton with the text \"Enabled\" being clicked.",
alt: "A GIF of an elevated button with the text 'Enabled'",
code:"
```dart
int count = 0;
Expand Down Expand Up @@ -166,9 +166,9 @@ but doesn't allow users to highlight or copy the text.
`SelectableText` displays a string of _user-selectable_ text.

{% render "docs/code-and-image.md",
image:"fwe/user-input/SelectableText.webp",
caption: "This figure shows a cursor highlighting a portion of a string of text."
alt: 'A GIF of a cursor highlighting two lines of text from a paragraph.'
image: "fwe/user-input/SelectableText.webp",
caption: "This figure shows a cursor highlighting a portion of a string of text.",
alt: 'A GIF of a cursor highlighting two lines of text from a paragraph.',
code:"
```dart
@override
Expand Down Expand Up @@ -196,9 +196,9 @@ different text styles. It's not for handling user input,
but is useful if you're allowing users edit and format text.

{% render "docs/code-and-image.md",
image:"fwe/user-input/RichText.png",
caption: "This figure shows a string of text formatted with different text styles."
alt: 'A screenshot of the text "Hello bold world!" with the word "bold" in bold font.'
image: "fwe/user-input/RichText.png",
caption: "This figure shows a string of text formatted with different text styles.",
alt: 'A screenshot of the text "Hello bold world!" with the word "bold" in bold font.',
code:"
```dart
@override
Expand Down Expand Up @@ -252,9 +252,9 @@ The class supports other configurable properties, such as
`readOnly` which prevents the user from changing the text.

{% render "docs/code-and-image.md",
image:"fwe/user-input/TextField.webp",
caption: "This figure shows text being typed into a TextField with a selected border and label."
alt: "A GIF of a text field with the label 'Mascot Name', purple focus border and the phrase 'Dash the hummingbird' being typed in."
image: "fwe/user-input/TextField.webp",
caption: "This figure shows text being typed into a TextField with a selected border and label.",
alt: "A GIF of a text field with the label 'Mascot Name', purple focus border and the phrase 'Dash the hummingbird' being typed in.",
code:"
```dart
final TextEditingController _controller = TextEditingController();
Expand Down Expand Up @@ -396,14 +396,13 @@ A `SegmentedButton` has a few relevant properties:
providing a way to configure a `selectedIcon`.

{% render "docs/code-and-image.md",
image:"fwe/user-input/segmented-button.webp",
image: "fwe/user-input/segmented-button.webp",
caption: "This figure shows a SegmentedButton, each segment with an icon and
text representing its value."
text representing its value.",
alt: "A GIF of a SegmentedButton with 4 segments: Day, Week, Month, and Year.
Each has a calendar icon to represent its value and a text label.
Day is first selected, then week and month, then year."
Day is first selected, then week and month, then year.",
code:"

```dart
enum Calendar { day, week, month, year }

Expand Down Expand Up @@ -471,11 +470,11 @@ multiple horizontal or vertical runs, to make sure your chips wrap and
don't get cut off at the edge of your app.

{% render "docs/code-and-image.md",
image:"fwe/user-input/chip.png",
image: "fwe/user-input/chip.png",
caption: "This figure shows two rows of Chip widgets, each containing a circular
leading profile image and content text."
leading profile image and content text.",
alt: "A screenshot of 4 Chips split over two rows with a leading circular
profile image with content text."
profile image with content text.",
code:"
```dart
@override
Expand Down Expand Up @@ -541,12 +540,12 @@ Configuration parameters include the following:
customizing the widget's look and behavior.

{% render "docs/code-and-image.md",
image:"fwe/user-input/dropdownmenu.webp",
image: "fwe/user-input/dropdownmenu.webp",
caption: "This figure shows a DropdownMenu widget with 5 value options. Each
option's text color is styled to represent the color value."
option's text color is styled to represent the color value.",
alt: "A GIF the DropdownMenu widget that is selected, it displays 5 options:
Blue, Pink, Green, Orange, and Grey. The option text is displayed in the color
of its value."
of its value.",
code:"
```dart
enum ColorLabel {
Expand Down Expand Up @@ -615,12 +614,12 @@ Configuration parameters for the `Slider` widget:


{% render "docs/code-and-image.md",
image:"fwe/user-input/slider.webp",
image: "fwe/user-input/slider.webp",
caption: "This figure shows a slider widget with a value ranging from 0.0 to 5.0
broken up into 5 divisions. It shows the current value as a label as the dial
is dragged."
is dragged.",
alt: "A GIF of a slider that has the dial dragged left to right in increments
of 1, from 0.0 to 5.0"
of 1, from 0.0 to 5.0",
code:"
```dart
double _currentVolume = 1;
Expand Down Expand Up @@ -682,10 +681,10 @@ The configuration for `Checkbox` and `Switch` contain:
### Checkbox

{% render "docs/code-and-image.md",
image:"fwe/user-input/checkbox.webp",
caption: "This figure shows a checkbox being checked and unchecked."
image: "fwe/user-input/checkbox.webp",
caption: "This figure shows a checkbox being checked and unchecked.",
alt: "A GIF that shows a pointer clicking a checkbox
and then clicking again to uncheck it."
and then clicking again to uncheck it.",
code:"
```dart
bool isChecked = false;
Expand All @@ -708,11 +707,11 @@ Widget build(BuildContext context) {
### Switch

{% render "docs/code-and-image.md",
image:"fwe/user-input/Switch.webp",
caption: "This figure shows a Switch widget that is toggled on and off."
image: "fwe/user-input/Switch.webp",
caption: "This figure shows a Switch widget that is toggled on and off.",
alt: "A GIF of a Switch widget that is toggled on and off. In its off state,
it is gray with dark gray borders. In its on state,
it is red with a light red border."
it is red with a light red border.",
code:"
```dart
bool light = true;
Expand Down Expand Up @@ -748,11 +747,11 @@ the other radio buttons are unselected.
gets triggered when users click it, like `Switch` and `Checkbox`.

{% render "docs/code-and-image.md",
image:"fwe/user-input/Radio.webp",
image: "fwe/user-input/Radio.webp",
caption: "This figure shows a column of ListTiles containing a radio button and
label, where only one radio button can be selected at a time."
label, where only one radio button can be selected at a time.",
alt: "A GIF of 4 ListTiles in a column, each containing a leading Radio button
and title text. The Radio buttons are selected in order from top to bottom."
and title text. The Radio buttons are selected in order from top to bottom.",
code:"
```dart
enum Character { musician, chef, firefighter, artist }
Expand Down Expand Up @@ -810,12 +809,12 @@ These convenience widgets are the same checkbox and switch widgets,
but support a label (as a `ListTile`).

{% render "docs/code-and-image.md",
image:"fwe/user-input/SpecialListTiles.webp",
image: "fwe/user-input/SpecialListTiles.webp",
caption: "This figure shows a column containing a CheckboxListTile and
a SwitchListTile being toggled."
a SwitchListTile being toggled.",
alt: "A ListTile with a leading icon, title text, and a trailing checkbox being
checked and unchecked. It also shows a ListTile with a leading icon, title text
and a switch being toggled on and off."
and a switch being toggled on and off.",
code:"
```dart
double timeDilation = 1.0;
Expand Down Expand Up @@ -893,12 +892,12 @@ which returns a `Future<DateTime>`,
so don't forget to await the asynchronous function call!

{% render "docs/code-and-image.md",
image:"fwe/user-input/DatePicker.webp",
image: "fwe/user-input/DatePicker.webp",
caption: "This figure shows a DatePicker that is displayed when the
'Pick a date' button is clicked."
'Pick a date' button is clicked.",
alt: "A GIF of a pointer clicking a button that says 'Pick a date',
then shows a date picker. The date Friday, August 30 is selected and the 'OK'
button is clicked."
button is clicked.",
code:"
```dart
DateTime? selectedDate;
Expand All @@ -910,7 +909,7 @@ Widget build(BuildContext context) {
return Column(children: [
Text(
date == null
? "You haven't picked a date yet."
? 'You haven\\\'t picked a date yet.'
: DateFormat('MM-dd-yyyy').format(date),
),
ElevatedButton.icon(
Expand Down Expand Up @@ -944,12 +943,12 @@ Instead of returning a `Future<DateTime>`,
Once again, don't forget to await the function call!

{% render "docs/code-and-image.md",
image:"fwe/user-input/TimePicker.webp",
image: "fwe/user-input/TimePicker.webp",
caption: "This figure shows a TimePicker that is displayed when the
'Pick a time' button is clicked."
'Pick a time' button is clicked.",
alt: "A GIF of a pointer clicking a button that says 'Pick a time', then shows
a time picker. The time picker shows a circular clock as the cursor moves the
hour hand, then minute hand, selects PM, then the 'OK' button is clicked."
hour hand, then minute hand, selects PM, then the 'OK' button is clicked.",
code:"
```dart
TimeOfDay? selectedTime;
Expand All @@ -960,7 +959,7 @@ Widget build(BuildContext context) {

return Column(children: [
Text(
time == null ? "You haven't picked a time yet." : time.format(context),
time == null ? 'You haven\\\'t picked a time yet.' : time.format(context),
),
ElevatedButton.icon(
icon: const Icon(Icons.calendar_today),
Expand Down Expand Up @@ -1015,11 +1014,11 @@ It has a number of configuration parameters, including:
identified from sibling `Dismissible` widgets in the widget tree.

{% render "docs/code-and-image.md",
image:"fwe/user-input/Dismissible.webp",
image: "fwe/user-input/Dismissible.webp",
caption: "This figure shows a list of Dismissible widgets that each contain a
ListTile. Swiping across the ListTile reveals a green background and makes the tile
disappear."
alt: "A screenshot of three widgets, spaced evenly from each other."
disappear.",
alt: "A screenshot of three widgets, spaced evenly from each other.",
code:"
```dart
List<int> items = List<int>.generate(100, (int index) => index);
Expand Down