Flutter web mobile. Enter fullscreen -> exit fullscreen -> enter fullscreen permission crash

To pass the browser security check the user has to interact with your website before you make a call to requestFullscreen.

We can solve this issue by showing a overlay which waits for the user to click before attempting to make the page fullscreen. It’s not the best solution but unfortunately it’s what you have to do.

import 'dart:html'
    as html; // universal_html should be used instead of dart:html

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web Fullscreen Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(
        title: 'Flutter Web Fullscreen Demo',
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future<void> requestFullscreen() async {
    // create two elemenets.
    html.Element overlay = html.document.createElement(
      'div',
    );
    html.Element child = html.document.createElement(
      'div',
    );

    // set the label to tell the user that
    // they need to confirm they want to enter
    // fullscreen mode.
    child.text = 'Click to enter fullscreen mode.';

    // make the overlay take up the entire screen.
    overlay.style.width = '100vw';
    overlay.style.height = '100vh';

    // make sure it's shown above the Flutter app.
    overlay.style.position = 'absolute';

    // the following lines are just to make it
    // look better.
    overlay.style.opacity = '0.7';
    overlay.style.background = 'black';
    overlay.style.color = 'white';
    overlay.style.display = 'flex';
    overlay.style.alignItems = 'center';
    overlay.style.justifyContent = 'center';

    // add click event listener to overlay.
    overlay.addEventListener(
      'click',
      (event) {
        // calls requestFullscreen after the user clicks
        // on the overlay to pass the browser security check.
        html.document.documentElement?.requestFullscreen().then(
          (
            _,
          ) {
            // we managed to go into fullscreen mode,
            // we remove the overlay.
            overlay.remove();
          },
        ).catchError(
          (
            Object object,
          ) {
            // oops... an error occurred.
            html.window.alert(
              'Error while trying to enter fullscreen mode: ${object.toString()}',
            );
            // remove the overlay again.
            overlay.remove();
          },
        );
      },
    );

    // add the elements created to document's body.
    // eg. make them appear on the page.
    overlay.append(
      child,
    );

    html.document.body?.append(
      overlay,
    );
  }

  void exitFullscreen() {
    html.document.exitFullscreen();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(
          widget.title,
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          requestFullscreen();
        },
        tooltip: 'Enter fullscreen mode',
        label: const Text(
          'Request fullscreen',
        ),
        icon: const Icon(
          Icons.fullscreen,
        ),
      ),
    );
  }
}

If you have any quesstions please let me know.