How to reduce the size of main.js file in flutter web?

807 Views Asked by At

I am using the deferred concept to reduce the size of the main.js file in the web build. But it only reduces the file size from 3.5MB to 3.1MB. It didn't help me that much. Is my implementation wrong? How can I reduce the size of the main.js file?

Web Build Directory

Main Code:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  navigationServiceController.registerLazySingleton(() => NavigationService());
  prefs = await SharedPreferences.getInstance();
  await Firebase.initializeApp(
      name: "tolk2gotasker", options: DefaultFirebaseOptions.currentPlatform);
  await getFlagList();
  await gettingLanguage();

  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);

  runApp(const Inizilation());
}

class Inizilation extends StatelessWidget {
  const Inizilation({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialBinding: InitialBinding(),
      initialRoute: initialPage(),
      title: "T2G Tasker",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        scrollbarTheme: const ScrollbarThemeData(
          thickness: MaterialStatePropertyAll<double>(0),
          trackVisibility: MaterialStatePropertyAll<bool>(false),
          thumbVisibility: MaterialStatePropertyAll<bool>(false),
        ),
        fontFamily: "AvenirLTDStd",
        appBarTheme: const AppBarTheme(backgroundColor: kWhite),
        primaryColor: kOrange,
        primarySwatch: Colors.red,
        applyElevationOverlayColor: true,
        focusColor: Colors.transparent,
        iconTheme: const IconThemeData(
          color: kBlack,
        ),
      ),
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale("en", "US"),
        Locale("nl", "NL"),
        Locale('ru', 'RU'),
      ],
      scrollBehavior: RemoveGlowEffect().copyWith(scrollbars: false),
      enableLog: true,
      defaultTransition: Transition.fade,
      transitionDuration: const Duration(milliseconds: 500),
      builder: (BuildContext context, Widget? child) =>
          MainLayout(child: child),
      key: navigatorKey,
      onUnknownRoute:
          navigationServiceController<NavigationService>().generateUnknownRoute,
      onGenerateRoute:
          navigationServiceController<NavigationService>().generateRoute,
    );
  }
}

Main Layout Code:

class MainLayout extends StatelessWidget {
  const MainLayout({super.key, required this.child});

  final Widget? child;

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return WillPopScope(
      onWillPop: () async {
        navigationServiceController<NavigationService>().navigateBack();
        return true;
      },
      child: Scaffold(
          appBar: const CommonAppBar(),
          body: Center(
            child: SizedBox(width: width < 700 ? width : 700, child: child),
          ),
          bottomNavigationBar: const CommonBottomBar()),
    );
  }
}

Navigation Code:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:tolk2go_tasker/ActualDurationPage/actual_duration.dart'
    deferred as actual_duration;
import 'package:tolk2go_tasker/CommonFiles/constants.dart';
import 'package:tolk2go_tasker/ExtraAmountPage/extra_amount.dart'
    deferred as extra_amount;
import 'package:tolk2go_tasker/InAppNotificationPage/in_app_notificaiton_page.dart'
    deferred as in_app_notificaiton_page;
import 'package:tolk2go_tasker/LoginPage/account_register.dart'
    deferred as account_register;
import 'package:tolk2go_tasker/LoginPage/forget_email_trigger.dart'
    deferred as forget_email_trigger;
import 'package:tolk2go_tasker/LoginPage/forget_email_trigger_confirmation.dart'
    deferred as forget_email_trigger_confirmation;
import 'package:tolk2go_tasker/LoginPage/password_page.dart'
    deferred as password_page;
import 'package:tolk2go_tasker/LogoutPage/logout.dart' deferred as logout;
import 'package:tolk2go_tasker/ProfilePage/profile_page.dart'
    deferred as profile_page;
import 'package:tolk2go_tasker/Routing/page_name.dart';
import 'package:tolk2go_tasker/TaskCompletionPage/task_completion.dart'
    deferred as task_completion;
import 'package:tolk2go_tasker/TaskListPage/task_list.dart'
    deferred as task_list;
import 'package:tolk2go_tasker/LoginPage/email_check.dart'
    deferred as email_check;
import 'package:tolk2go_tasker/SignaturePage/signature.dart'
    deferred as signature;
import 'package:tolk2go_tasker/SplashScreen/splash_screen.dart';
import 'package:tolk2go_tasker/TaskDetailPage/task_details_page.dart'
    deferred as task_details;
import 'package:tolk2go_tasker/binding.dart';

class NavigationService {
  Future<dynamic> navigateTo(String routeName) {
    return Get.toNamed(routeName)!;
  }

  Future<dynamic> navigateOffAll(String routeName) {
    return Get.offAllNamed(routeName)!;
  }

  Future<dynamic> navigateUntil(String routeName) {
    return Get.offNamedUntil(routeName, (route) => false)!;
  }

  Future<dynamic> navigateOff(String routeName) {
    return Get.offNamed(routeName)!;
  }

  void navigateBack() {
    switch (Get.currentRoute) {
      case registerScreen:
        navigateOff(emailCheckScreen);
        break;
      case forgotPasswordEmailScreen:
        navigateOff(emailCheckScreen);
        break;
      case forgotPasswordScreen:
        navigateOff(forgotPasswordEmailScreen);
        break;
      case taskDetailsScreen:
        taskListPage();
        break;
      default:
        Get.back();
    }
  }

  void splashScreenPage() {
    navigateTo(splashScreen);
  }

  void emailPage() {
    navigateOffAll(emailCheckScreen);
  }

  void passwordPage() {
    navigateTo(passwordScreen);
  }

  void registerPage() {
    navigateTo(registerScreen);
  }

  void forgotEmailTriggerPage() {
    navigateTo(forgotPasswordEmailScreen);
  }

  void forgotPasswordPage() {
    navigateTo(forgotPasswordScreen);
  }

  void taskListPage() {
    navigateOffAll(taskListScreen);
  }

  void taskDetailsPage() {
    navigateTo(taskDetailsScreen);
  }

  void actualDurationPage() {
    navigateTo(actualDurationScreen);
  }

  void extraAmountPage() {
    navigateTo(extraAmountScreen);
  }

  void signaturePage() {
    navigateTo(signatureScreen);
  }

  void taskComplitionPage() {
    navigateTo(taskCompletionScreen);
  }

  void notificationPage() {
    navigateTo(inAppNotificaitonScreen);
  }

  void profilePage() {
    navigateTo(profileScreen);
  }

  void logoutPage() {
    navigateOffAll(logoutScreen);
  }

  Route<dynamic> generateRoute(RouteSettings settings) {
    deferredPage(settings.name!);
    switch (settings.name) {
      case splashScreen:
        {
          return GetPageRoute(
            routeName: splashScreen,
            page: () => const SplashScreen(),
            binding: SplashScreenBinding(),
            settings: settings,
          );
        }

      case passwordScreen:
        {
          return GetPageRoute(
            routeName: passwordScreen,
            page: () => password_page.PasswordPage(),
            binding: LoginBinding(),
            settings: settings,
          );
        }
      case registerScreen:
        {
          commonBottomBarViewModel.title.value = kLanguage.value.register;
          return GetPageRoute(
            routeName: registerScreen,
            page: () => account_register.AccountRegister(),
            binding: LoginBinding(),
            settings: settings,
          );
        }
      case forgotPasswordEmailScreen:
        {
          return GetPageRoute(
            routeName: forgotPasswordEmailScreen,
            page: () => forget_email_trigger.ForgotEmailTrigger(),
            binding: LoginBinding(),
            settings: settings,
          );
        }
      case forgotPasswordScreen:
        {
          return GetPageRoute(
            routeName: forgotPasswordScreen,
            page: () => forget_email_trigger_confirmation
                .ForgotEmailTriggerConfirmation(),
            binding: LoginBinding(),
            settings: settings,
          );
        }
      case taskListScreen:
        {
          commonBottomBarViewModel.title.value = "";
          enableAppBar.value = true;
          enableBottomBar.value = true;
          return GetPageRoute(
            routeName: taskListScreen,
            page: () => task_list.TaskListPage(),
            binding: TaskListBinding(),
            settings: settings,
          );
        }
      case taskDetailsScreen:
        {
          commonBottomBarViewModel.title.value =
              commonBottomBarViewModel.bookingId;
          return GetPageRoute(
            routeName: taskDetailsScreen,
            page: () => task_details.TaskDetailsPage(),
            binding: TaskDetailsBinding(),
            settings: settings,
          );
        }
      case actualDurationScreen:
        {
          commonBottomBarViewModel.title.value =
              commonBottomBarViewModel.bookingId;
          return GetPageRoute(
            routeName: actualDurationScreen,
            page: () => actual_duration.ActualDuration(),
            binding: ActualDurationBinding(),
            settings: settings,
          );
        }
      case extraAmountScreen:
        {
          commonBottomBarViewModel.title.value =
              commonBottomBarViewModel.bookingId;
          return GetPageRoute(
            routeName: extraAmountScreen,
            page: () => extra_amount.ExtraAmount(),
            binding: ExtraAmountBinding(),
            settings: settings,
          );
        }
      case signatureScreen:
        {
          commonBottomBarViewModel.title.value =
              commonBottomBarViewModel.bookingId;
          return GetPageRoute(
            routeName: signatureScreen,
            page: () => signature.Signature(),
            binding: SignatureBinding(),
            settings: settings,
          );
        }
      case taskCompletionScreen:
        {
          commonBottomBarViewModel.title.value =
              commonBottomBarViewModel.bookingId;
          return GetPageRoute(
            routeName: taskCompletionScreen,
            page: () => task_completion.TaskComplition(),
            binding: TaskCompletionBinding(),
            settings: settings,
          );
        }
      case inAppNotificaitonScreen:
        {
          commonBottomBarViewModel.title.value = "";
          return GetPageRoute(
            routeName: inAppNotificaitonScreen,
            page: () => in_app_notificaiton_page.InAppNotification(),
            settings: settings,
          );
        }
      case profileScreen:
        {
          commonBottomBarViewModel.title.value = "";
          return GetPageRoute(
            routeName: profileScreen,
            page: () => profile_page.ProfilePage(),
            binding: ProfileBinding(),
            settings: settings,
          );
        }
      case logoutScreen:
        {
          prefs.clear();
          commonBottomBarViewModel.title.value = "";
          commonBottomBarViewModel.taskerName.value = "";
          enableBottomBar.value = false;
          return GetPageRoute(
            routeName: logoutScreen,
            page: () => logout.LogoutPage(),
            settings: settings,
          );
        }
      default:
        {
          return GetPageRoute(
            routeName: emailCheckScreen,
            page: () => email_check.EmailCheck(),
            binding: LoginBinding(),
            settings: settings,
          );
        }
    }
  }

  Route<dynamic> generateUnknownRoute(RouteSettings settings) {
    commonBottomBarViewModel.title.value = "";
    enableAppBar.value = true;
    kLoginStatus = prefs.getBool("loginStatus") ?? false;
    if (kLoginStatus) {
      enableBottomBar.value = true;
      return GetPageRoute(
        routeName: taskListScreen,
        page: () => task_list.TaskListPage(),
        binding: TaskListBinding(),
        settings: settings,
      );
    } else {
      return GetPageRoute(
        routeName: emailCheckScreen,
        page: () => email_check.EmailCheck(),
        binding: LoginBinding(),
        settings: settings,
      );
    }
  }

  void redirectingToTaskDetailsPage() {
    if (Get.previousRoute == "/") {
      commonBottomBarViewModel.title.value = commonBottomBarViewModel.bookingId;
      taskDetailsPage();
    }
  }

  Future<void> deferredPage(String pageName) async {
    switch (pageName) {
      case emailCheckScreen:
        {
          await email_check.loadLibrary();
          break;
        }
      case passwordScreen:
        {
          await password_page.loadLibrary();
          break;
        }
      case registerScreen:
        {
          await account_register.loadLibrary();
          break;
        }
      case forgotPasswordEmailScreen:
        {
          await forget_email_trigger.loadLibrary();
          break;
        }
      case forgotPasswordScreen:
        {
          await forget_email_trigger_confirmation.loadLibrary();
          break;
        }
      case taskListScreen:
        {
          await task_list.loadLibrary();
          break;
        }
      case taskDetailsScreen:
        {
          await task_details.loadLibrary();
          break;
        }
      case actualDurationScreen:
        {
          await actual_duration.loadLibrary();
          break;
        }
      case extraAmountScreen:
        {
          await extra_amount.loadLibrary();
          break;
        }
      case signatureScreen:
        {
          await signature.loadLibrary();
          break;
        }
      case taskCompletionScreen:
        {
          await task_completion.loadLibrary();
          break;
        }
      case inAppNotificaitonScreen:
        {
          await in_app_notificaiton_page.loadLibrary();
          break;
        }
      case profileScreen:
        {
          await profile_page.loadLibrary();
          break;
        }
    }
  }
}
0

There are 0 best solutions below