Merge pull request #117 from WDI-Ideas/jayeshjain25

Jayeshjain25

lib/features/welcome/presentation/pages/welcome_layout.dart

@@ -1,43 +1,15 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 
-import '../bloc/onboarding_bloc.dart';
-import '../bloc/onboarding_event.dart';
-import '../bloc/onboarding_state.dart';
-import '../widgets/build_page_widget.dart';
+import '../widgets/build_onboarding_page_widget.dart';
 
 class WelcomeLayout extends StatelessWidget {
-  final PageController _pageController = PageController();
-  WelcomeLayout({super.key});
+  const WelcomeLayout({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return const Scaffold(
       backgroundColor: Colors.white,
-      body: BlocListener<OnboardingBloc, OnboardingState>(
-        // Define the listener for the BlocListener
-        listener: (context, state) {
-          // If the state is OnboardingPageChanged, animate to the corresponding page
-          if (state is OnboardingPageChanged) {
-            _pageController.animateToPage(
-              state.currentPage,
-              duration: const Duration(milliseconds: 300),
-              curve: Curves.easeInOut,
-            );
-          }
-        },
-        child: PageView.builder(
-          controller: _pageController,
-          itemCount: 3, // Number of onboarding pages
-          itemBuilder: (context, index) {
-            return buildPage(context, index, _pageController);
-          },
-          onPageChanged: (index) {
-            // Dispatch the JumpToPage event to update the current page
-            context.read<OnboardingBloc>().add(JumpToPage(index));
-          },
-        ),
-      ),
+      body: BuildOnboardingPage(),
     );
   }
 }

lib/features/welcome/presentation/widgets/build_onboarding_page_widget.dart

@@ -1,3 +1,4 @@
+import 'package:carousel_slider/carousel_slider.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:flutter_svg/flutter_svg.dart';
@@ -5,64 +6,123 @@ import 'package:flutter_svg/svg.dart';
 import 'package:gap/gap.dart';
 import 'package:tanami_app/core/styles/app_color.dart';
 import 'package:tanami_app/core/styles/app_images.dart';
+import 'package:tanami_app/core/styles/app_text.dart';
 import 'package:tanami_app/shared/components/text_widget.dart';
 
+import '../../../../core/utils/language/localizations_delegate.dart';
 import '../../../../shared/components/language_change_bottom_sheet.dart';
 import 'login_signup_button.dart';
-import 'welcome_indicator.dart';
 
-Widget buildOnboardingPage(
-  BuildContext context, {
-  required int index,
-  required String imageAsset,
-  required String title,
-  required String description,
-  bool isLastPage = false,
-  required PageController pageController,
-}) {
-  return Column(
-    children: [
-      index == 0 ? const Gap(40) : const Gap(0),
-      index == 0
-          ? Align(
-              alignment: Alignment.centerRight,
-              child: IconButton(
-                  onPressed: () {
-                    showLanguageBottomSheet(context);
-                  },
-                  icon: const Icon(
-                    Icons.language_outlined,
-                    size: 30,
-                  )),
-            )
-          : const SizedBox(),
-      index == 0 ? const Gap(0) : const Gap(85),
-      SvgPicture.asset(AppImages.welcomeLogo1),
-      const Gap(50),
-      Image.asset(
-        imageAsset,
-        width: 1.sw,
-        height: 370,
-        fit: BoxFit.cover,
-      ),
-      const Gap(12),
-      welcomeIndicator(pageController),
-      const Gap(20),
-      TextWidget().text15W500(
-        title,
-        clr: AppColor.darkGreyColor,
-      ),
-      Padding(
-        padding: const EdgeInsets.symmetric(
-          horizontal: 20,
-        ),
-        child: TextWidget().text20W700(
-          description,
-          clr: AppColor.primaryColor,
-          txtAlign: TextAlign.center,
-        ),
-      ),
-      if (isLastPage) const LoginSignUpButton(),
-    ],
-  );
+class BuildOnboardingPage extends StatefulWidget {
+  const BuildOnboardingPage({super.key});
+
+  @override
+  State<BuildOnboardingPage> createState() => _BuildOnboardingPageState();
+}
+
+class _BuildOnboardingPageState extends State<BuildOnboardingPage> {
+  int index = 0;
+  final CarouselController _controller = CarouselController();
+
+  @override
+  Widget build(BuildContext context) {
+    var localizations = AppLocalizations.of(context);
+    List<String> welcomeImages = [
+      AppImages.firstWelcome,
+      AppImages.secondWelcome,
+      AppImages.thirdWelcome,
+    ];
+    List<String> welcomeTitle = [
+      localizations.translate(AppText.welcomeTitle1Text),
+      localizations.translate(AppText.welcomeTitle2Text),
+      localizations.translate(AppText.welcomeTitle3Text),
+    ];
+    List<String> welcomeDesc = [
+      localizations.translate(AppText.welcomeDescription1Text),
+      localizations.translate(AppText.welcomeDescription2Text),
+      localizations.translate(AppText.welcomeDescription3Text),
+    ];
+    return Column(
+      children: [
+        index == 0 ? const Gap(40) : const Gap(0),
+        index == 0
+            ? Align(
+                alignment: Alignment.centerRight,
+                child: IconButton(
+                    onPressed: () {
+                      showLanguageBottomSheet(context);
+                    },
+                    icon: const Icon(
+                      Icons.language_outlined,
+                      size: 30,
+                    )),
+              )
+            : const SizedBox(),
+        index == 0 ? const Gap(0) : const Gap(88),
+        SvgPicture.asset(AppImages.welcomeLogo1),
+        const Gap(50),
+        CarouselSlider.builder(
+          carouselController: _controller,
+          itemCount: 3,
+          itemBuilder:
+              (BuildContext context, int itemIndex, int pageViewIndex) {
+            return Image.asset(
+              welcomeImages[itemIndex],
+              fit: BoxFit.cover,
+              width: 1.sw,
+              height: 400.h,
+            );
+          },
+          options: CarouselOptions(
+            onPageChanged: (index, reason) {
+              this.index = index;
+              setState(() {});
+            },
+            reverse: false,
+            autoPlay: false,
+            enlargeCenterPage: false,
+            viewportFraction: 1,
+            enableInfiniteScroll: false,
+            aspectRatio: 1.0,
+            initialPage: 0,
+          ),
+        ),
+        const Gap(12),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: welcomeImages.asMap().entries.map((entry) {
+            return GestureDetector(
+              onTap: () => _controller.animateToPage(entry.key),
+              child: Container(
+                width: 12.0,
+                height: 4.0,
+                margin:
+                    const EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0),
+                decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(2),
+                    color: AppColor.primaryColor2
+                        .withOpacity(index == entry.key ? 1 : 0.3)),
+              ),
+            );
+          }).toList(),
+        ),
+        const Gap(20),
+        TextWidget().text15W500(
+          welcomeTitle[index],
+          clr: AppColor.darkGreyColor,
+        ),
+        Padding(
+          padding: const EdgeInsets.symmetric(
+            horizontal: 20,
+          ),
+          child: TextWidget().text20W700(
+            welcomeDesc[index],
+            clr: AppColor.primaryColor,
+            txtAlign: TextAlign.center,
+          ),
+        ),
+        index == 2 ? const LoginSignUpButton() : const SizedBox(),
+      ],
+    );
+  }
 }

lib/features/welcome/presentation/widgets/build_page_widget.dart

@@ -1,43 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:tanami_app/core/styles/app_images.dart';
-import 'package:tanami_app/core/styles/app_text.dart';
-
-import '../../../../core/utils/language/localizations_delegate.dart';
-import 'build_onboarding_page_widget.dart';
-
-Widget buildPage(
-    BuildContext context, int index, PageController pageController) {
-  var localizations = AppLocalizations.of(context);
-  switch (index) {
-    case 0:
-      return buildOnboardingPage(
-        pageController: pageController,
-        index: index,
-        context,
-        imageAsset: AppImages.firstWelcome,
-        title: localizations.translate(AppText.welcomeTitle1Text),
-        description: localizations.translate(AppText.welcomeDescription1Text),
-      );
-    case 1:
-      return buildOnboardingPage(
-        pageController: pageController,
-        index: index,
-        context,
-        imageAsset: AppImages.secondWelcome,
-        title: localizations.translate(AppText.welcomeTitle2Text),
-        description: localizations.translate(AppText.welcomeDescription2Text),
-      );
-    case 2:
-      return buildOnboardingPage(
-        pageController: pageController,
-        index: index,
-        context,
-        imageAsset: AppImages.thirdWelcome,
-        title: localizations.translate(AppText.welcomeTitle3Text),
-        description: localizations.translate(AppText.welcomeDescription3Text),
-        isLastPage: true,
-      );
-    default:
-      return Container();
-  }
-}

lib/features/welcome/presentation/widgets/welcome_indicator.dart

@@ -1,17 +0,0 @@
-import 'package:flutter/cupertino.dart';
-import 'package:smooth_page_indicator/smooth_page_indicator.dart';
-
-import '../../../../core/styles/app_color.dart';
-
-Widget welcomeIndicator(PageController pageController) {
-  return SmoothPageIndicator(
-    controller: pageController,
-    count: 3,
-    effect: const ExpandingDotsEffect(
-      activeDotColor: AppColor.indicatorActiveColor,
-      dotColor: AppColor.indicatorInactiveColor,
-      dotHeight: 10,
-      dotWidth: 10,
-    ),
-  );
-}