How to Detect the User's Platform in Flutter

When developing a Flutter application, it is often necessary to determine the platform on which the application is running. This information can help in providing platform-specific behavior or customizing the user experience. In this post, we will explore two approaches to detecting the user's platform in a Flutter application: one for mobile platforms using the dart:io library, and another for web platforms using the dart:html library.

Detecting Platform on Mobile

In Flutter, the dart:io library provides the Platform class, which offers a straightforward way to detect the user's platform on mobile. Let us see how we can use it:

import 'package:flutter/material.dart';
import 'dart:io';

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

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

  String getPlatform() {
    if (Platform.isAndroid) return 'Running on Android!';
    if (Platform.isIOS) return 'Running on iOS!';
    if (Platform.isMacOS) return 'Running on macOS!';
    if (Platform.isWindows) return 'Running on Windows!';
    if (Platform.isLinux) return 'Running on Linux!';
    if (Platform.isFuchsia) return 'Running on Fuchsia!';

    return 'Running on an unknown platform!';
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Unit test demo',
      home: Scaffold(
        body: Center(
          child: Text(
            getPlatform(),
            style: TextStyle(fontSize: 30),
          ),
        ),
      ),
    );
  }
}

In this approach, we import the dart:io library and use the Platform class to access platform-specific properties. By checking these properties, such as isAndroid, isIOS, or isMacOS, we can determine the current platform and execute platform-specific code as needed. When we run this code in an Android emulator you will see the following:

Please note that this approach is only suitable for mobile and cannot be used in web applications. This is because the dart:io library is not available on the web.

To run Flutter in a web browser, use the command flutter run -d chrome and replace chrome with your preferred browser.

Detecting Platforms on Web Platforms

In Flutter we can use the kIsWeb constant from the foundation library to determine if the application is running on the web. Let us take a look:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:io';

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

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

  String getPlatform() {
    if (kIsWeb) return 'Running on Web';
    
    if (Platform.isAndroid) return 'Running on Android!';
    if (Platform.isIOS) return 'Running on iOS!';
    if (Platform.isMacOS) return 'Running on macOS!';
    if (Platform.isWindows) return 'Running on Windows!';
    if (Platform.isLinux) return 'Running on Linux!';
    if (Platform.isFuchsia) return 'Running on Fuchsia!';

    return 'Running on an unknown platform!';
  }

  @override
  Widget build(BuildContext context) { ... }
}

In this approach, we import the kIsWeb constant from the foundation library. By checking the value of kIsWeb, which is true if the application is running on the web and false otherwise, we can conditionally execute code specific to the web platform. This way we no longer run into errors on the web because we are not accessing the dart:io library:

It is important to note that the kIsWeb constant provides a simple way to detect the web platform in Flutter. However, it does not show us which platform is being used. For this, we can use the dart:html library. This library includes the Window class which we can use to detect the user's platform, see the example below:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:io';

import 'dart:html' hide Platform;

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

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

  String getPlatform() {
    if (kIsWeb) return getPlatformOnWeb();

    if (Platform.isAndroid) return 'Running on Android!';
    if (Platform.isIOS) return 'Running on iOS!';
    if (Platform.isMacOS) return 'Running on macOS!';
    if (Platform.isWindows) return 'Running on Windows!';
    if (Platform.isLinux) return 'Running on Linux!';
    if (Platform.isFuchsia) return 'Running on Fuchsia!';

    return 'Running on an unknown platform!';
  }

  String getPlatformOnWeb() {
    if (window.navigator.userAgent.contains('Android')) return 'Running on Android!';
    if (window.navigator.userAgent.contains('iPhone') || window.navigator.userAgent.contains('iPad')) return 'Running on iOS!';
    if (window.navigator.userAgent.contains('Mac OS')) return 'Running on macOS!';
    if (window.navigator.userAgent.contains('Windows')) return 'Running on Windows!';
    if (window.navigator.userAgent.contains('Linux')) return 'Running on Linux!';
    if (window.navigator.userAgent.contains('Fuchsia')) return 'Running on Fuchsia!';

    return 'Running on an unknown platform!';
  }

  @override
  Widget build(BuildContext context) { ... }
}

If we run our application in the browser again on a Windows machine we will see the following:

Conflicts between libraries

To use both libraries in your application you might run into problems. For example, if you want to use both the dart:io library and dart:html library in the same file you have to hide the Platfrom class from the dart:html library because both libraries have a Platform class.

import 'dart:html' hide Platform;
import 'dart:io';

However, this only solves a part of the problem, because now you will only be able to run your application in the browser. The import of the dart:html library is enough to crash the application on mobile.

To solve this we can use the universal_html package. If we install the package by executing flutter pub add universal_html and replace our import of dart:html to the new package, like so:

import 'dart:io';
import 'package:universal_html/html.dart' hide Platform;

Then we will be able to run our code on both the web and mobile.

If you attempt to implement this in the complete code of this post, you have to hide the Text widget as well from the universal_html package import. When implementing your own code, it is better to have the detection functions in their own files so the package does not interfere with your widgets.

Conclusion

Detecting the user's platform in a Flutter application is important for providing platform-specific behavior and optimizing the user experience. In this post, we explored two approaches to platform detection: one for mobile platforms using the dart:io library, and another for web platforms using the dart:html library. We also learned how to determine if the platform is web-based and discussed solutions for using both libraries together without conflicts.

Tags

• Flutter
• Dart