Fwftest - Flutter Web Fullscreen Tester

A Flutter web application designed to test and demonstrate the Fullscreen API behavior in both browser and PWA (Progressive Web App) modes. This is a developer tool for testing fullscreen functionality in Flutter web applications.

Features

• ✅ Fullscreen API Integration: Enter and exit fullscreen mode using the browser's Fullscreen API
• ✅ Real-time Status Display: Monitor fullscreen state, display mode, viewport size, and API support
• ✅ Display Mode Detection: Automatically detect whether running in browser, standalone PWA, or fullscreen PWA mode
• ✅ PWA Support: Installable as a Progressive Web App with fullscreen manifest configuration
• ✅ Color Cycling: Test fullscreen with 5 different background colors
• ✅ Automatic Text Contrast: Text color adjusts automatically for optimal readability
• ✅ Event-Driven Updates: Listens to fullscreen change events for real-time UI updates
• ✅ Viewport Tracking: Real-time display of viewport dimensions with resize detection
• ✅ Comprehensive Logging: Detailed console logs for debugging and testing
• ✅ Responsive Design: Works on desktop, tablet, and mobile browsers

Screenshots

Browser Mode

The app running in a regular browser tab with fullscreen controls.

PWA Mode

The app installed as a Progressive Web App with standalone window chrome.

Fullscreen Mode

The app in fullscreen mode with edge-to-edge content display.

Project Structure

lib/
├── constants/
│   ├── app_colors.dart      # Color presets and contrast utilities
│   └── app_strings.dart     # Centralized UI strings
├── screens/
│   └── fullscreen_tester_screen.dart  # Main screen UI
├── utils/
│   └── fullscreen_api.dart  # Fullscreen API wrapper
└── main.dart                # App entry point

web/
├── index.html               # HTML with PWA meta tags
├── manifest.json            # PWA manifest with fullscreen config
└── icons/                   # App icons

test/
└── widget_test.dart         # Basic widget tests

Technical Implementation

Fullscreen API

The app uses package:web and dart:js_interop to access the browser's Fullscreen API:

• enterFullscreen(): Requests fullscreen mode via document.documentElement.requestFullscreen()
• exitFullscreen(): Exits fullscreen via document.exitFullscreen()
• isFullscreen(): Checks if currently in fullscreen mode
• onFullscreenChange: Stream that emits fullscreen state changes

Display Mode Detection

Detects the current display mode using media queries and browser APIs:

• Browser: Regular browser tab
• Standalone: PWA running in its own window
• Fullscreen: PWA running in fullscreen mode
• Minimal UI: PWA with minimal browser UI (rare)

PWA Configuration

The manifest.json is configured with:

{
  "display": "fullscreen",
  "start_url": "/",
  "orientation": "any"
}

This ensures the PWA opens in fullscreen mode when installed.

Getting Started

Prerequisites

• Flutter SDK (3.9.2 or higher)
• A modern web browser (Chrome, Edge, Firefox, or Safari)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd fwftest

2. Install dependencies:

   flutter pub get

Running in Browser Mode

Run the app in Chrome:

flutter run -d chrome

Or run on a local web server:

flutter run -d web-server

Then open http://localhost:<port> in your browser.

Building for Production

Build the web app:

flutter build web --release

The built app will be in build/web/.

Testing as PWA

1. Serve the built app:

   cd build/web
   python3 -m http.server 8000

2. Open in browser: Navigate to http://localhost:8000

3. Install the PWA:

   • Look for the install icon in the address bar
   • Or go to browser menu → "Install Fwftest..."

4. Launch the installed app: The PWA should open in fullscreen mode automatically.

Usage

Controls

• Enter Fullscreen: Request fullscreen mode (requires Fullscreen API support)
• Exit Fullscreen: Exit fullscreen mode
• Previous Color: Cycle to the previous background color
• Next Color: Cycle to the next background color

Keyboard Shortcuts

• F11: Toggle fullscreen (browser native)
• Esc: Exit fullscreen

Status Display

The app displays real-time information:

• Fullscreen: Whether currently in fullscreen mode (Yes/No)
• Display Mode: Current display mode (Browser/Standalone/Fullscreen/Minimal UI)
• Viewport: Current viewport dimensions (width × height)
• Fullscreen API: Whether the Fullscreen API is supported (Supported/Not Supported)

Background Colors

Cycle through 5 preset colors:

1. Deep Blue (#2196F3)
2. Vibrant Red (#F44336)
3. Emerald Green (#4CAF50)
4. Deep Purple (#9C27B0)
5. Dark Gray (#424242)

Testing

See TESTING.md for comprehensive testing instructions covering:

• Browser mode testing
• PWA mode testing
• Display mode detection
• Fullscreen API behavior
• Cross-browser compatibility
• Console log verification

Running Tests

Run the widget tests:

flutter test

Browser Compatibility

Browser	Fullscreen API	PWA Support	Display Mode Detection
Chrome	✅ Full	✅ Full	✅ Full
Edge	✅ Full	✅ Full	✅ Full
Firefox	✅ Full	⚠️ Limited	✅ Full
Safari (macOS)	✅ Full	⚠️ Limited	✅ Full
Safari (iOS)	⚠️ Limited	✅ Full	✅ Full

Code Quality

The project follows Flutter and Dart best practices:

• ✅ Clean separation of concerns (UI, business logic, utilities)
• ✅ Type-safe throughout with null safety
• ✅ Immutable data structures where appropriate
• ✅ Comprehensive documentation and comments
• ✅ Organized directory structure
• ✅ Centralized constants and strings
• ✅ Performance-conscious implementation
• ✅ Proper error handling and user feedback

Dependencies

• flutter: Flutter SDK
• web: ^1.1.0 - Lightweight browser API bindings for zero-overhead JS interop
• cupertino_icons: ^1.0.8 - iOS-style icons

Development

Code Structure

• Pure Dart utilities: No Flutter dependencies in utility classes
• Stateful widgets: Proper lifecycle management with cleanup
• Event-driven: Uses streams for fullscreen change events
• Responsive: Adapts to different screen sizes

Logging

The app logs comprehensive diagnostic information to the console:

• Fullscreen API support detection
• Fullscreen state changes
• Display mode detection
• Viewport size changes
• Color changes
• User interactions

All logs are prefixed with [FullscreenAPI] or [FullscreenTester] for easy filtering.

Troubleshooting

Fullscreen API Not Supported

If the Fullscreen API is not supported:

• The fullscreen buttons will be disabled
• An orange warning message will be displayed
• Try using a modern browser like Chrome or Edge

PWA Won't Install

If the PWA installation doesn't work:

• Use Chrome or Edge for best PWA support
• Ensure you're serving over HTTPS (or localhost for testing)
• Check that manifest.json is properly configured

Display Mode Shows "Browser" in PWA

Some browsers have limited support for display mode detection. Check if the window has browser chrome (address bar, etc.) to determine if it's truly in standalone mode.

Contributing

This is a developer tool/reference implementation. Feel free to:

• Report issues
• Suggest improvements
• Use as reference for your own projects
• Fork and modify for your needs

License

This project is provided as-is for educational and testing purposes.

Resources

• Flutter Web Documentation
• Fullscreen API MDN
• PWA Documentation
• package:web Documentation
• dart:js_interop Documentation

Author

Created as a testing tool for Flutter web fullscreen functionality.

---

Note: This is a developer tool intended for testing and demonstration purposes. The comprehensive console logging is intentional and useful for debugging fullscreen behavior in Flutter web applications.