SIGN IN SIGN UP

Gallery improvements part 1: mobile layout and platform fixes for examples (#6844)

* fix(examples): make horizontal_alignment row scrollable on narrow screens

Columns overflowed and were unreachable on mobile since the demo Row
had no scroll enabled.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(examples): restrict column scroll_events to web/desktop

on_scroll results are only printed to the console, which isn't
visible on mobile platforms.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(examples): make scroll_to_key button row scrollable on narrow screens

Section D's button overflowed off-screen and was unreachable on
mobile since the row had no scroll enabled.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(examples): recategorize types showcases from Layout/Container to Utility/Types

These 66 enum/type comparison demos under controls/core/types/ were
tagged Layout/Container, likely because their preview uses a
Container. They belong under Utility/Types, matching the 3 existing
sibling examples in the same tree.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(examples): make container clickable row scrollable on narrow screens

Four fixed-width containers overflowed off-screen on mobile since the
row had no scroll enabled.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(examples): restrict hover and theme-toggle container examples to web/desktop

handling_hovers relies on pointer hover events (not applicable on
touch), and page_dark_and_light_themes' layout doesn't fit mobile
screens.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(examples): shorten CupertinoListTile notched example titles for mobile

Long titles didn't fit on narrow screens alongside the leading icon,
trailing icon, and additional info.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(examples): make data_table handling_events horizontally scrollable

The table's fixed width (700) plus column_spacing (200) exceeded
mobile screen width with no way to scroll, clipping the second
column and its border.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(examples): make data_table sortable_and_selectable horizontally scrollable

Same overflow as handling_events: fixed width (700) plus
column_spacing (200) exceeded mobile screen width with no way to
scroll.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(examples): make layout_control offset example horizontally scrollable

The 460px-wide Stack was slightly too wide for mobile screens with no
way to scroll to see the full demo.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(examples): make rotated_box lanes horizontally scrollable on mobile

Each lane is fixed at width=540, wider than a phone screen, with no
way to scroll, so the "Normal controls" lane got clipped.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(examples): use page.width instead of page.window.width in row wrap example

page.window.width is the desktop OS window width and is None on
mobile (no OS window there), which crashed the Slider/Row on phones.
page.width is the cross-platform viewport width.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(examples): fix dataclass mutable default crash in dynamic_tab_addition

ft.Alignment.CENTER returns a mutable Alignment instance, which
dataclasses reject as a direct field default. Use default_factory
instead, fixing a crash on startup.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(examples): make vertical_divider example fill available screen space

Fixed width=180, height=100 made the demo look tiny on larger/mobile
screens. Use expand=True instead.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(examples): recategorize SegmentedButton example under Buttons

Was tagged Input/SegmentedButton, inconsistent with its Cupertino
siblings (Buttons/CupertinoSegmentedButton,
Buttons/CupertinoSlidingSegmentedButton), which kept it out of the
Buttons gallery category.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(examples): wrap filter chips onto multiple lines on narrow screens

Five chips with long labels overflowed a non-wrapping Row on phone
width. wrap=True lets them flow onto multiple lines, matching
standard filter-chip behavior.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(examples): add mobile-only hide-keyboard button to code_editor example

On mobile there was no way to dismiss the on-screen keyboard after
tapping into the code editor. Add a "hide keyboard" icon button, top
right, that focuses itself to move focus off the editor; visible only
on mobile platforms.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Add mobile hide keyboard button

Add a mobile-only toolbar button to the code editor selection handling example that shifts focus away from the editor to dismiss the on-screen keyboard. This makes the example easier to use on mobile devices without affecting desktop behavior.

* fix(examples): restrict context_menu triggers example to web/desktop

The example is built around primary/secondary/tertiary mouse click
triggers, which don't apply on touch-only mobile platforms.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
I
InesaFitsner committed
85b72dbbf98e87f709f75f1634353b4ead9cedfe
Parent: bcfb443
Committed by GitHub <noreply@github.com> on 9/14/2026, 7:26:34 PM