Reports

Although @Daniel answers was working and correct, but I think using user agent is not working in all of the cases and we should check every browser with the version to understand if its compatible or not.
At the end I came up with this solution that I am checking with the "flutter-view" element to see if its available or not and if not so I conclude that the browser is not supporting.
I would appreciate if anyone came up with a better solution.

for this solution i changed my index.html in this way:

<body>
  <!-- Flutter App Container -->
  <div id="flutter-app" style="display: none;">
    <script src="flutter_bootstrap.js"></script>
  </div>

  <script>

    (function() {
      var MIN_VERSIONS = {
        chrome: 120,
        firefox: 72,
        safari: 14,
        edge: 84
      };

      function checkFlutterView() {
        setTimeout(function() {
          const flutterViewElement = document.querySelector('flutter-view');

          if (flutterViewElement) {
            console.log("Browser supported. Showing app.");
          } else {
            console.log("Browser NOT supported. Showing error message.");
            showUnsupportedBrowserMessage();
          }
        }, 2000); // Wait 2 seconds to allow Flutter to load
      }

      function showUnsupportedBrowserMessage() {
        var messageDiv = document.createElement('div');
        messageDiv.style.position = 'fixed';
        messageDiv.style.top = '0';
        messageDiv.style.left = '0';
        messageDiv.style.width = '100%';
        messageDiv.style.height = '100%';
        messageDiv.style.backgroundColor = '#ffffff';
        messageDiv.style.display = 'flex';
        messageDiv.style.flexDirection = 'column';
        messageDiv.style.alignItems = 'center';
        messageDiv.style.justifyContent = 'center';
        messageDiv.style.padding = '20px';
        messageDiv.style.textAlign = 'center';
        messageDiv.style.fontFamily = 'Arial, sans-serif';
        messageDiv.style.zIndex = '9999';

        var header = document.createElement('h1');
        header.style.color = '#e53935';
        header.style.marginBottom = '20px';
        header.textContent = 'Browser Not Supported';

        var message = document.createElement('p');
        message.style.maxWidth = '600px';
        message.style.lineHeight = '1.5';
        message.style.marginBottom = '20px';
        message.textContent = 'Your browser is not supported by this application. Please use one of the following browsers:';

        var browserList = document.createElement('ul');
        browserList.style.listStylePosition = 'inside';
        browserList.style.textAlign = 'left';
        browserList.style.display = 'inline-block';
        browserList.style.marginBottom = '30px';

        var browsers = [
          'Google Chrome (version ' + MIN_VERSIONS.chrome + ' or later)',
          'Mozilla Firefox (version ' + MIN_VERSIONS.firefox + ' or later)',
          'Microsoft Edge (version ' + MIN_VERSIONS.edge + ' or later)',
          'Safari (version ' + MIN_VERSIONS.safari + ' or later)'
        ];

        browsers.forEach(function(browserText) {
          var item = document.createElement('li');
          item.style.margin = '10px 0';
          item.textContent = browserText;
          browserList.appendChild(item);
        });

        var updateMessage = document.createElement('p');
        updateMessage.style.fontWeight = 'bold';
        updateMessage.textContent = 'Please update your browser or switch to a supported one to continue.';

        messageDiv.appendChild(header);
        messageDiv.appendChild(message);
        messageDiv.appendChild(browserList);
        messageDiv.appendChild(updateMessage);
        
        document.body.innerHTML = '';
        document.body.appendChild(messageDiv);
      }

      // Run the check once the document is fully loaded
      document.addEventListener('DOMContentLoaded', checkFlutterView);
    })();
  </script>

</body>
</html>

79526028