Optimize Monument3DModelBloc loading with lazy initialization and convert to StatelessWidget

Author: kareemabdeen

lib/presentation/popular_monuments/mobile/popular_monuments_view_mobile.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:monumento/application/popular_monuments/monument_3d_model/monument_3d_model_bloc.dart';
 import 'package:monumento/presentation/popular_monuments/mobile/widgets/popular_monument_view_mobile_app_bar.dart';
 import 'package:monumento/presentation/popular_monuments/mobile/widgets/populat_monuments_view_body_mobile.dart';
@@ -7,42 +8,39 @@ import 'package:monumento/service_locator.dart';
 import 'package:monumento/utils/app_colors.dart';
 import 'package:monumento/utils/app_text_styles.dart';
 
-class PopularMonumentsViewMobile extends StatefulWidget {
+class PopularMonumentsViewMobile extends StatelessWidget {
   const PopularMonumentsViewMobile({super.key});
 
-  @override
-  State<PopularMonumentsViewMobile> createState() =>
-      _PopularMonumentsViewMobileState();
-}
-
-class _PopularMonumentsViewMobileState
-    extends State<PopularMonumentsViewMobile> {
-  @override
-  void initState() {
-    locator<Monument3dModelBloc>().add(const ViewMonument3DModel(
-        monumentName: "Mount Rushmore National Memorial"));
-    super.initState();
-  }
-
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: PopularMonumnetsViewMobileAppBar(),
-      body: PopularMonumentsViewMobileBodyBlocBuilder(),
-      floatingActionButton: FloatingActionButton.extended(
-        onPressed: () async {
-          await Navigator.push(context,
-              MaterialPageRoute(builder: (_) => const ScanMonumentsScreen()));
-        },
-        label: Text(
-          "Scan Monuments",
-          style: AppTextStyles.textStyle(
-              fontType: FontType.MEDIUM, size: 14, isBody: true),
+    return BlocProvider<Monument3dModelBloc>(
+      create: (context) => locator<Monument3dModelBloc>()
+        ..add(
+          const ViewMonument3DModel(
+            monumentName: "Mount Rushmore National Memorial",
+          ),
+        ),
+      lazy:
+          true, //* Default is true; initializes the object only when it's needed.
+
+      child: Scaffold(
+        appBar: PopularMonumnetsViewMobileAppBar(),
+        body: PopularMonumentsViewMobileBodyBlocBuilder(),
+        floatingActionButton: FloatingActionButton.extended(
+          onPressed: () async {
+            await Navigator.push(context,
+                MaterialPageRoute(builder: (_) => const ScanMonumentsScreen()));
+          },
+          label: Text(
+            "Scan Monuments",
+            style: AppTextStyles.textStyle(
+                fontType: FontType.MEDIUM, size: 14, isBody: true),
+          ),
+          backgroundColor: AppColor.appPrimary,
+          extendedPadding:
+              const EdgeInsets.symmetric(vertical: 10, horizontal: 18),
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
         ),
-        backgroundColor: AppColor.appPrimary,
-        extendedPadding:
-            const EdgeInsets.symmetric(vertical: 10, horizontal: 18),
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
       ),
     );
   }