Index out of range on Flutter Web

Everything is working fine with me on iOS and Android but once I run my app on the web (Chrome) I got this error from the widget LocalizedApp

════════ Exception caught by widgets library ═══════════════════════════════════
The following IndexError was thrown building MyApp(dirty):
RangeError (index): Index out of range: no indices are valid: 0

The relevant error-causing widget was
MyApp
lib/main.dart:54
When the exception was thrown, this was the stack
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 236:49  throw_
dart-sdk/lib/_internal/js_dev_runtime/private/js_array.dart 581:7             _get]
packages/localize_and_translate/src/main.dart 192:51                          get locale
packages/UnitedPalestine/main.dart 85:28                                      build
packages/flutter/src/widgets/framework.dart 4569:28                           build
...

Any extra steps I need to do to make it works on the web?

Code

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  //await Firebase.initializeApp();
  // ignore: unused_local_variable
  
    await translator.init(
      localeDefault: LocalizationDefaultType.device,
      languagesList: <String>['ar', 'en'],
      assetsDirectory: 'assets/language/',
      apiKeyGoogle: '<Key>',
    );
  }

  SystemChrome.setPreferredOrientations(
      [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]).then((_) {
    //runApp(MyApp());
    runApp(
      LocalizedApp(
        child: MyApp(),
      ),
    );
  });
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        Provider<AuthenticationService>(
          create: (_) => AuthenticationService(FirebaseAuth.instance),
        ),
        StreamProvider(
          create: (context) =>
              context.read<AuthenticationService>().authStateChanges,
        )
      ],
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        initialRoute: SplashScreen.routName,
        routes: {
          SplashScreen.routName: (ctx) => SplashScreen(),
          SigninScreen.routName: (ctx) => SigninScreen(),
          SignupScreen.routName: (ctx) => SignupScreen(),
          OTPScreen.routName: (ctx) => OTPScreen(),
        },
        localizationsDelegates: translator.delegates,
        locale: translator.locale,
        supportedLocales: translator.locals(),
      ),
    );
  }
}

That's my main.dart code works perfect on iOS and Android but won't work on the web