39

My flutter code isn't running on web.

I found that "bool kisweb" can be used to detect the platform. But my code is failing at "FirebaseAuth.instance". Does this mean I can't use Firebaseauth on web as it might be depending on dart:io?

Launching lib\main.dart on Chrome in debug mode... Debug service listening on ws://127.0.0.1:54007/NghsYaNRLKE= compiled for web ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ The following UnsupportedError was thrown building MultiProvider: Unsupported operation: Platform._operatingSystem The relevant error-causing widget was: MultiProvider org-dartlang-app:///packages/My_App/main.dart:30:10 When the exception was thrown, this was the stack: package:build_web_compilers/src/dev_compiler/dart_sdk.js 3996:11
throw_ package:build_web_compilers/src/dev_compiler/dart_sdk.js 57810:17 _operatingSystem package:build_web_compilers/src/dev_compiler/dart_sdk.js 57859:27 get operatingSystem package:build_web_compilers/src/dev_compiler/dart_sdk.js 57772:27 get _operatingSystem package:build_web_compilers/src/dev_compiler/dart_sdk.js 5020:17 get package:build_web_compilers/src/dev_compiler/dart_sdk.js 57796:26 get isIOS package:build_web_compilers/src/dev_compiler/dart_sdk.js 5020:17 get package:firebase_core/src%5Cfirebase_app.dart 15:16
get defaultAppName package:build_web_compilers/src/dev_compiler/dart_sdk.js 5020:17 get package:firebase_core/src%5Cfirebase_app.dart 51:57 get instance package:build_web_compilers/src/dev_compiler/dart_sdk.js 5020:17 get package:firebase_auth/src%5Cfirebase_auth.dart 25:67
get instance package:build_web_compilers/src/dev_compiler/dart_sdk.js 5020:17 get internalCallback ════════════════════════════════════════════════════════════════════════════════════════════════════ Exited

Please help me resolve this issue.

1

10 Answers 10

66

I reopen this issue to give a more appropriate answer which is now available in native in flutter:

import 'package:flutter/foundation.dart';
if (defaultTargetPlatform == TargetPlatform.iOS || defaultTargetPlatform == TargetPlatform.android) {
    // Some android/ios specific code
}
else if (defaultTargetPlatform == TargetPlatform.linux || defaultTargetPlatform == TargetPlatform.macOS || defaultTargetPlatform == TargetPlatform.windows) {
    // Some desktop specific code there
}
else {
    // Some web specific code there
}
3
19

You can use a try-catch block to prevent the exception from breaking the flow:

bool kisweb;
try{
    if(Platform.isAndroid||Platform.isIOS) {
        kisweb=false;
    } else {
        kisweb=true;
    }
} catch(e){
    kisweb=true;
}
2
  • 1
    This is a bit dangerous, as kisweb is a kind of well-known keyword to detect if the current platform is web, which your code is not doing. Indeed, Platform.isAndroid is true on mobile browsers. See api.flutter.dev/flutter/foundation/kIsWeb-constant.html
    – MappaM
    Mar 22, 2021 at 10:31
  • This answer is wrong. as @MappaM mentioned, Platform.isAndroid or Platform.isIOS is true on mobile browsers.
    – Pars
    Sep 15, 2021 at 8:10
10

No, the FlutterFire group of plugins is in no way supported on Flutter Web. They rely on platform-specific APIs and are currently only implemented for Android and iOS.

Update May 2021: As pointed out by Moslem Deris, FlutterFire is now officially supported on the web: https://firebase.google.com/docs/flutter/setup?platform=web (thanks to Heikkisorsa for commenting the new link)

2
8

I have spent last 4 hours researching this issue. All that was already mentioned is correct. However, I'm so happy I found a working solution for web, too: universal_io package.

Just remember not to use the 1.0.1 version cause v1.0.1 and other versions don't detect iOS correctly. I was able to go away with it by just downgrading to 0.2.0 version. By the time you read this post it may have been fixed, check out the issue status here: https://github.com/dint-dev/universal_io/issues/8

IMPLEMENTATION (super simple)

import 'package:universal_io/io.dart';

then just use Platform.operatingSystem e.g.

print('OS: ${Platform.operatingSystem}');
4

For me, shifting to dev channel worked using flutter channel dev

Web support is now available for most of the firebase plugins.

2

when you check for web in first if condition then won't get error try below way, worked for me.

if (kIsWeb) {
      //running on web
} else if (Platform.isAndroid || Platform.isIOS) {
      //running on android or ios device
}

Or you can add try catch block if you want to use.

try {
   if (Platform.isAndroid || Platform.isIOS) {
      //running on android or ios device
   }
} catch (e) {
   if (kIsWeb) {
      //running on web
   }
}
1

Due to nature of implementation of library dart:io - it poorly works on web (conflicts with dart:html). That is why you are getting Unsupported operation: Platform._operatingSystem while running your code on web. Web do not have access to 'dart:io' in which Platform.is.. is implemented.

Solution that worked for me, for every system and for every app build with flutter is looking like this:

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

class PlatformUtils {
  static bool get isMobile {
    if (kIsWeb) {
      return false;
    } else {
      return Platform.isIOS || Platform.isAndroid;
    }
  }

  static bool get isDesktop {
    if (kIsWeb) {
      return false;
    } else {
      return Platform.isLinux || Platform.isFuchsia || Platform.isWindows || Platform.isMacOS;
    }
  }
}

Just firstly check if you are running in web (if so then return false, and write code for web), then check other operating systems.

0

When we are debugging a web app, this code will never meet the Platform.

import 'package:flutter/foundation.dart';

bool get isAndroid => !kIsWeb && Platform.isAndroid;
bool get isIOS => !kIsWeb && Platform.isIOS;
bool get isWindows => !kIsWeb && Platform.isWindows;
bool get isWeb => kIsWeb;
-1

You must initialize Firebase both in the web/index.html file and in the main.dart file.

In web/index.html file add this code after the body tag

<body>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script>
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "domain.firebaseapp.com",
    projectId: "your_project_id",
    storageBucket: "your.appspot.com",
    messagingSenderId: "1777...",
    appId: "1:1674...appId"
  };

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

More information https://firebase.flutter.dev/docs/installation/web/

And also modify main.dart file

//import the dependencie 
import 'package:firebase_core/firebase_core.dart';

//modify the main method
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}
-1

I was having the same issue. In web you have to set metadata and use putData instead of putFile:

final metadata = firebase_storage.SettableMetadata(
    contentType: 'image/jpeg',
    customMetadata: {'picked-file-path': file.path});

if (kIsWeb) {
  uploadTask = ref.putData(await file.readAsBytes(), metadata);
} else {
  uploadTask = ref.putFile(io.File(file.path), metadata);
}

You can see the complete example in https://pub.dev/packages/firebase_storage/example

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.