Flutter web running in chrome showing blank page

raju12974 commented 1 month ago

Steps to reproduce

run flutter run -d chrome

Expected results

It should load the webpage. It is working well in Android and Ios

Actual results

Error
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3  throw_
packages/flutter/src/services/platform_channel.dart 332:7                    _invokeMethod
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50           <fn>
dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
dart-sdk/lib/async/future_impl.dart 163:18                                   handleValue
dart-sdk/lib/async/future_impl.dart 847:44                                   handleValueCallback
dart-sdk/lib/async/future_impl.dart 876:13                                   _propagateToListeners
dart-sdk/lib/async/future_impl.dart 652:5                                    [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 722:7                                    callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>

Code sample

flutter run -d chrome

Screenshots or Video

Logs

```console [Paste your logs here] ```

Flutter Doctor output

Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-arm64, locale en-IN) [!] Android toolchain - develop for Android devices (Android SDK version 34.0.0) ✗ cmdline-tools component is missing Run path/to/sdkmanager --install "cmdline-tools;latest" See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run flutter doctor --android-licenses to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#android-setup for more details. [✓] Xcode - develop for iOS and macOS (Xcode 15.4) [✓] Chrome - develop for the web [✓] Android Studio (version 2023.2) [✓] VS Code (version 1.91.1) [✓] Connected device (2 available) ! Error: Browsing on the local area network for iPad. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac. The device must be opted into Developer Mode to connect wirelessly. (code -27) ! Error: Browsing on the local area network for ICT SYSTEMS’s iPhone. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac. The device must be opted into Developer Mode to connect wirelessly. (code -27) [✓] Network resources

abd-mtk commented 1 month ago

Hello, do you know if you use this library? path_provider if you use it to get getApplicationDocumentsDirectory() it doesn't work for web I change this code :

Future getAppDirectory() async { if (kIsWeb) { return "/assets/temp"; } else { return await getApplicationDocumentsDirectory() .then((directory) => directory.path); } }

raju12974 commented 1 month ago

my main.dart file

`import 'package:bot_toast/bot_toast.dart';
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_crashlytics/firebase_crashlytics.dart';
import 'package:flutter/foundation.dart' hide Category;
import 'package:flutter/material.dart';
import 'package:ft_app/app/data/models/master/categories_response.dart';
import 'package:ft_app/app/data/models/products/products_list_response.dart';
import 'package:get/get.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:path_provider/path_provider.dart';

import 'app/data/models/master/category_model.dart';
import 'app/modules/auth/splash/splash_page.dart';
import 'core/languages/app_translations.dart';
import 'core/theme/theme_service.dart';
import 'core/theme/themes.dart';
import 'core/utils/app_binding.dart';
import 'core/utils/size_config.dart';
import 'core/values/hive_keys.dart';
import 'firebase_options.dart';
import 'routes/pages.dart';

main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final document = await getAppDirectory();
  await Hive.initFlutter(document.path);

  Hive.registerAdapter(CategoryAdapter());
  Hive.registerAdapter(CategoryMainAdapter());
  await Hive.openBox<Category>(HIVE_KEYS.categories);
  await Hive.openBox<CategoryMain>(HIVE_KEYS.categories_main);

  Hive.registerAdapter(ProductAdapter());
  Hive.registerAdapter(ItemTypeDetailAdapter());
  await Hive.openBox<Product>(HIVE_KEYS.products);

  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  FlutterError.onError = (errorDetails) {
    FirebaseCrashlytics.instance.recordFlutterFatalError(errorDetails);
  };
  // Pass all uncaught asynchronous errors that aren't handled by the Flutter framework to Crashlytics
  PlatformDispatcher.instance.onError = (error, stack) {
    FirebaseCrashlytics.instance.recordError(error, stack, fatal: true);
    return true;
  };

  runApp(const MainApp());
}

Future getAppDirectory() async {
  if (kIsWeb) {
    return "/assets/temp";
  } else {
    return await getApplicationDocumentsDirectory()
        .then((directory) => directory.path);
  }
}

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

  static FirebaseAnalytics analytics = FirebaseAnalytics.instance;
  static FirebaseAnalyticsObserver observer =
      FirebaseAnalyticsObserver(analytics: analytics);

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return GetMaterialApp(
        debugShowCheckedModeBanner: false,
        themeMode: ThemeService().theme,
        theme: Themes().lightTheme,
        darkTheme: Themes().darkTheme,
        translations: AppTranslations(),
        initialBinding: AppBinding(),
        navigatorObservers: <NavigatorObserver>[observer],
        builder: BotToastInit(),
        locale: const Locale('en', 'US'),
        fallbackLocale: const Locale('en', 'US'),
        getPages: AppPages.pages,
        home: const SplashPage());
  }
}
`

Still giving the same issue
A Dart VM Service on Chrome is available at: http://127.0.0.1:64986/Zgk61xztqZg=
Error
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3       throw_
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 893:3   defaultNoSuchMethod
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 63:17                 noSuchMethod
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 868:31  noSuchMethod
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 152:10  dload
packages/ft_app/main.dart 27:35                                                   main$
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50                <fn>
dart-sdk/lib/async/zone.dart 1661:54                                              runUnary
dart-sdk/lib/async/future_impl.dart 163:18                                        handleValue
dart-sdk/lib/async/future_impl.dart 847:44                                        handleValueCallback
dart-sdk/lib/async/future_impl.dart 876:13                                        _propagateToListeners
dart-sdk/lib/async/future_impl.dart 652:5                                         [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 722:7                                         callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                                  _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                                   _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7                <fn>
The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:64986/Zgk61xztqZg=

darshankawar commented 1 month ago

my main.dart file

@raju12974 The code contains third party implementation and is not minimal. In order to properly address issue, narrow down the code only to minimal and without third party package code and see if you still get same behavior or not.

christianai4gov commented 1 month ago

Hi! I had the same issue. The 'getAppDirectory()' function from path_provider package causes this issue for flutter web. Just replace the path used on Hive.initFlutter() to something like '/assets/db' and remove the path_provider package.

github-actions[bot] commented 3 weeks ago

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones. Thanks for your contribution.

github-actions[bot] commented 1 week ago

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

flutter / flutter