Trace: • Screen styles
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
flutterui:screen_styles [2026/03/23 13:56] admin |
flutterui:screen_styles [2026/03/23 14:29] (current) admin |
||
|---|---|---|---|
| Line 4: | Line 4: | ||
| A simple screen is shown with a safe-area around it, to be able to click/tap all components. Many devices have a rounded case and the UI should work without problems, e.g. | A simple screen is shown with a safe-area around it, to be able to click/tap all components. Many devices have a rounded case and the UI should work without problems, e.g. | ||
| - | {{:flutterui:no_safe_area.png?nolink&400|}} | + | {{:flutterui:no_safe_area_screen.png?nolink&400|}} |
| + | {{:flutterui:safe_area_screen.png?nolink&400|}} | ||
| + | The first screenshot doesn't use a safe-area and the table overlaps the case. The second screenshot uses a safe-area and everything fits. | ||
| + | But if you need the full-size. It's possible to disable the safe-area with following style: | ||
| + | ''f_full_size'' | ||
| + | |||
| + | We have more style options: | ||
| + | |||
| + | * ''f_background_in_title'' | ||
| + | * ''f_simple_menu'' | ||
| + | * ''f_no_menu'' | ||
| + | * ''f_no_back'' | ||
| + | * ''f_overview_back'' | ||
| + | * ''f_secure'' | ||
| + | |||
| + | The ''f_background_in_title'' will use the background color of the screen for the title as well. This will override the general [[flutterui:mobile_style|screen title color]]. | ||
| + | The ''f_simple_menu'' will show a minimalistic menu instead of the full drawer menu. | ||
| + | |||
| + | {{:flutterui:simple_menu.png?nolink&400|}} | ||
| + | |||
| + | Above screenshot shows both styles in action. | ||
| + | |||
| + | The ''f_no_menu'' hides the men, ''f_no_back'' removes the back arrow, ''f_overview_back'' navigates to the application overview instead the menu. | ||