feat: Fullscreen support on Mobile & Web

[ndonkoHenri]

Fix #4551

Example

import flet as ft


def main(page: ft.Page):
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    def handle_fullscreen_change(e: ft.Event[ft.Switch]):
        page.full_screen = e.control.value

    page.add(
        ft.SafeArea(
            ft.Switch(
                value=page.full_screen,
                label="Toggle Fullscreen",
                on_change=handle_fullscreen_change,
            ),
        )
    )


ft.run(main)

Summary by Sourcery

Enable cross-platform fullscreen support by adding Page.full_screen to the Python SDK and set_fullscreen handling in the Dart layer, backed by new IO and web interfaces, and update documentation with usage examples.

New Features:

• Add Page.full_screen property in Python to toggle fullscreen mode across platforms
• Implement set_fullscreen method in Dart PageControl to enable fullscreen on desktop, web, and mobile
• Introduce io_interface.dart and web_interface.dart for unified window fullscreen control

Enhancements:

• Refactor user_fonts imports to use web_interface or io_interface based on platform
• Update main.dart desktop detection to rely on isDesktopPlatform()
• Remove obsolete user_fonts_web.dart

Documentation:

• Add Toggle Fullscreen section and example to page.md
• Include a Python fullscreen.py example file

Summary by Sourcery

Enable cross-platform fullscreen support by adding a new Page.full_screen property in the Python SDK and implementing platform-specific fullscreen logic in the Dart layer, backed by unified IO and web interfaces, and update documentation with usage examples.

New Features:

• Add Page.full_screen property in Python SDK to enable cross-platform fullscreen toggling
• Implement fullscreen handling in Dart PageControl with unified setWindowFullScreen for desktop, web, and mobile

Enhancements:

• Refactor user_fonts imports to use new web_interface/io_interface conditional imports
• Streamline desktop detection in main.dart to use isDesktopPlatform()

Documentation:

• Add Toggle Fullscreen section and example to page.md
• Include fullscreen.py example in Python examples

Chores:

• Remove obsolete user_fonts_web.dart file

[Copilot]

Pull Request Overview

This PR adds fullscreen support for mobile and web platforms to complement the existing desktop-only window.full_screen capability. The implementation adds a new cross-platform Page.full_screen property that works across mobile, desktop, and web environments.

Key Changes:

• Added a new full_screen property to the Python Page class that works across all platforms
• Implemented platform-specific fullscreen handlers (web uses Fullscreen API, mobile uses SystemUIMode, desktop uses existing window API)
• Refactored Dart utility files to consolidate web/IO interfaces for better code organization

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
sdk/python/packages/flet/src/flet/controls/page.py	Adds cross-platform full_screen property with getter/setter to Page class
sdk/python/packages/flet/docs/controls/page.md	Documents the new fullscreen toggle feature with usage notes
sdk/python/examples/controls/page/fullscreen.py	Provides example implementation of fullscreen toggle functionality
packages/flet/lib/src/utils/web_interface.dart	Creates web-specific interface with fullscreen implementation using Fullscreen API
packages/flet/lib/src/utils/user_fonts_web.dart	Removes font-only utilities (consolidated into web_interface.dart)
packages/flet/lib/src/utils/user_fonts.dart	Updates import to use new consolidated interface files
packages/flet/lib/src/utils/io_interface.dart	Adds fullscreen delegation to desktop implementation
packages/flet/lib/src/controls/page.dart	Implements platform-specific fullscreen handling in page control
client/lib/main.dart	Refactors platform check to use utility function

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[sourcery-ai]

We've reviewed this pull request using the Sourcery rules engine

[cloudflare-workers-and-pages]

Deploying flet-docs with    Cloudflare Pages

Latest commit:	808d1e1
Status:	✅  Deploy successful!
Preview URL:	https://4042584b.flet-docs.pages.dev
Branch Preview URL:	https://fullscreen.flet-docs.pages.dev

View logs

[sourcery-ai]

We've reviewed this pull request using the Sourcery rules engine

[Copilot]

Pull Request Overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[FeodorFitsner]

Issue 1: The page state is getting unsynchronized when a user exits full screen mode by clicking "exit full screen" button (green one on macOS) in a window title. Try running this example:

import logging

import flet as ft

logging.basicConfig(level=logging.INFO)


def main(page: ft.Page) -> None:
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    def on_window_event(e: ft.WindowEvent):
        if e.type == ft.WindowEventType.LEAVE_FULL_SCREEN:
            full_screen_mode.value = False

    page.window.on_event = on_window_event

    def handle_fullscreen_change(e: ft.Event[ft.Switch]):
        page.full_screen = e.control.value

    page.add(
        ft.SafeArea(
            full_screen_mode := ft.Switch(
                value=page.full_screen,
                label="Toggle Fullscreen",
                on_change=handle_fullscreen_change,
            ),
        )
    )


ft.run(main)

Exit with a button in window title. Switch will return to False. Click Switch again - window is not maximized.

Issue 2: It's impossible to detect full screen mode change in web mode.

Run the app above in web mode. Switch to full screen. Exit full screen with ESC button.

[FeodorFitsner]

This is how full screen mode change can be detected in web mode - just an idea:

import 'dart:html' as html;

class _FullscreenExampleState extends State<FullscreenExample> {
  bool _isFullscreen = false;

  @override
  void initState() {
    super.initState();
    // Listen for fullscreen changes (enter/exit, ESC pressed, etc.)
    html.document.onFullscreenChange.listen((_) {
      final isNowFullscreen = html.document.fullscreenElement != null;
      setState(() => _isFullscreen = isNowFullscreen);
      debugPrint("Fullscreen mode: $_isFullscreen");
    });
  }

  ...