Start a lesson, open a mini-game, play Guess the term, run the flashcards or open Term of the Day, and there is a solid strip pinned across the top of the screen: Flutter's stock bar, filled in the page colour, there from the first frame to the last.
The design does not draw one. These are full-screen flows — the card is the screen — so it floats the controls over the page instead: nothing behind them while you are at the top, and once the content moves under them, the page pulled over itself, blurred, with a hairline underneath. It is the same chrome the tab header and the back bar wear.
Where this comes from
#395 made the lesson player immersive and settled what its bar carries — close on the left, the bean with its 01 / 08 count in the middle, save on the right. It left the bar itself a stock AppBar, because the chrome to put it on did not exist yet.
It does now. #441 built HeaderChrome, and #513 put every page opened from a tab on it. The two reward screens already use FloatTopbar, which is this shape — so this is the last set of screens hand-rolling a bar.
The six
lesson_screen.dart · mini_game_intro_screen.dart · mini_game_player_screen.dart · vocab_game_screen.dart · flashcards_screen.dart · term_of_day_screen.dart
They are not all the same job. The lesson player's bar carries three things and the design gives it its own layout; the other five carry a close control and sometimes a bookmark, which is what FloatTopbar already draws. A guard in test/unit/pushed_pages_wear_the_design_bar_test.dart lists all six and will fail when one is converted, so the list cannot go stale.
Acceptance criteria
Start a lesson, open a mini-game, play Guess the term, run the flashcards or open Term of the Day, and there is a solid strip pinned across the top of the screen: Flutter's stock bar, filled in the page colour, there from the first frame to the last.
The design does not draw one. These are full-screen flows — the card is the screen — so it floats the controls over the page instead: nothing behind them while you are at the top, and once the content moves under them, the page pulled over itself, blurred, with a hairline underneath. It is the same chrome the tab header and the back bar wear.
Where this comes from
#395 made the lesson player immersive and settled what its bar carries — close on the left, the bean with its
01 / 08count in the middle, save on the right. It left the bar itself a stockAppBar, because the chrome to put it on did not exist yet.It does now. #441 built
HeaderChrome, and #513 put every page opened from a tab on it. The two reward screens already useFloatTopbar, which is this shape — so this is the last set of screens hand-rolling a bar.The six
lesson_screen.dart·mini_game_intro_screen.dart·mini_game_player_screen.dart·vocab_game_screen.dart·flashcards_screen.dart·term_of_day_screen.dartThey are not all the same job. The lesson player's bar carries three things and the design gives it its own layout; the other five carry a close control and sometimes a bookmark, which is what
FloatTopbaralready draws. A guard intest/unit/pushed_pages_wear_the_design_bar_test.dartlists all six and will fail when one is converted, so the list cannot go stale.Acceptance criteria
AppBar; each is transparent at rest and takes the design's fill, blur and hairline once its content has moveddart format,flutter analyze, the metrics gate and the full suite clean, with a changelog bullet