How should I make some differences between Flutter mobile and web version of my app?

user_7856349 0
Viewed 717

If I want to use one codebase for my application, but add some specific widgets/features for mobile app and some for web version of my app, how should I do that? Should I write all the code and just add an if statement before those specific widgets to see what platform the application is running on by the user and show/hide that widget/feature, or I must separate mobile and web widgets in different files?

For example I want to show a camera feature on mobile version and another feature on web version. How should I do that?

flutter web mobile platform
2 Answers

You can check de platform of the device, and then display or not your content.

You can do this by few ways, the easyes one is:

import 'dart:io' show Platform;

    if (Platform.isAndroid) {
      // Android-specific code
    } else if (Platform.isIOS) {
      // iOS-specific code
    }

The options are:

Platform.isAndroid
Platform.isFuchsia
Platform.isIOS
Platform.isLinux
Platform.isMacOS
Platform.isWindows

Specific for web:

import 'package:flutter/foundation.dart' show kIsWeb;

if (kIsWeb) {
  // web
} else {
  // not web
}

Or you can also calculate the dimensions of the screen using MediaQuery.

To show or not the feature you can use the Widget Visibility

https://api.flutter.dev/flutter/widgets/Visibility-class.html

user_173179850

You can check your app is run on the web like that

import 'package:flutter/foundation.dart' show kIsWeb;

if (kIsWeb) {
  // It's running on the web!
} else {
  // NOT running on the web!
  // You can also check for additional platforms here.
  // Or you only develop for web and mobile this is mobile
}

Read Documentation from this Link for more understanding : https://api.flutter.dev/flutter/foundation/kIsWeb-constant.html

user_123006030
Related