HMG_Patient_App_New/lib/presentation/onboarding/onboarding_screen.dart

import 'package:flutter/material.dart';
import 'package:hmg_patient_app_new/core/app_assets.dart';
import 'package:hmg_patient_app_new/core/utils/size_utils.dart';
import 'package:hmg_patient_app_new/extensions/int_extensions.dart';
import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
import 'package:hmg_patient_app_new/presentation/home/navigation_screen.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/buttons/custom_button.dart';
import 'package:hmg_patient_app_new/widgets/transitions/fade_page.dart';
import 'package:lottie/lottie.dart';

class OnboardingScreen extends StatefulWidget {
  OnboardingScreen({Key? key}) : super(key: key);

  @override
  _OnboardingScreenState createState() {
    return _OnboardingScreenState();
  }
}

class _OnboardingScreenState extends State<OnboardingScreen> {
  int selectedIndex = 0;

  late PageController pageController;

  void goToHomePage() => Navigator.of(context).pushReplacement(FadePage(page: LandingNavigation()));

  @override
  void initState() {
    super.initState();
    pageController = PageController();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.whiteColor,
      body: SafeArea(
        top: false,
        left: false,
        right: false,
        child: Column(
          spacing: 24,
          children: [
            PageView(
              controller: pageController,
              children: [
                onboardingView(
                  AppAnimations.onboarding_1,
                  "Booking appointment has never been easy".needTranslation,
                  "In few clicks find yourself having consultation with the doctor of your choice.".needTranslation,
                ),
                onboardingView(
                  AppAnimations.onboarding_2,
                  "Access the medical history on finger tips".needTranslation,
                  "Keep track on your medical history including labs, prescription, insurance, etc".needTranslation,
                ),
              ],
              onPageChanged: (int index) {
                selectedIndex = index;
                setState(() {});
              },
            ).expanded,
            Row(
              spacing: 4.h,
              children: [
                AnimatedContainer(
                  duration: const Duration(milliseconds: 250),
                  height: 6.h,
                  width: selectedIndex == 0 ? 18.h : 6.h,
                  decoration: BoxDecoration(color: selectedIndex == 0 ? AppColors.textColor : AppColors.inputLabelTextColor, borderRadius: BorderRadius.circular(30)),
                ),
                AnimatedContainer(
                  duration: const Duration(milliseconds: 250),
                  height: 6.h,
                  width: selectedIndex == 1 ? 18.h : 6.h,
                  decoration: BoxDecoration(color: selectedIndex == 1 ? AppColors.textColor : AppColors.inputLabelTextColor, borderRadius: BorderRadius.circular(30)),
                ),
              ],
            ).paddingOnly(left: 24, right: 24),
            Row(
              children: [
                AnimatedSwitcher(
                  duration: const Duration(milliseconds: 250),
                  transitionBuilder: (child, anim) => FadeTransition(opacity: anim, child: child),
                  child: selectedIndex == 0
                      ? CustomButton(
                          text: "Skip".needTranslation,
                          onPressed: () => goToHomePage(),
                          width: 86,
                          backgroundColor: Color(0xffFEE9EA),
                          textColor: AppColors.primaryRedColor,
                          borderWidth: 0,
                          borderColor: Colors.transparent,
                        ).paddingOnly(left: 24)
                      : const SizedBox.shrink(),
                ),
                const Spacer(),
                AnimatedContainer(
                  duration: const Duration(milliseconds: 400),
                  curve: Curves.easeInOut,
                  width: selectedIndex == 0 ? 86 : MediaQuery.of(context).size.width - 48,
                  margin: EdgeInsets.only(left: 24, right: 24),
                  decoration: BoxDecoration(
                    color: AppColors.primaryRedColor,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: AnimatedSwitcher(
                    duration: const Duration(milliseconds: 250),
                    transitionBuilder: (child, anim) => FadeTransition(opacity: anim, child: child),
                    child: selectedIndex == 0
                        ? CustomButton(
                            icon: AppAssets.arrow_forward,
                            width: 86,
                            text: "".needTranslation,
                            backgroundColor: Colors.transparent,
                            onPressed: () {
                              pageController.animateToPage(1, duration: Duration(milliseconds: 400), curve: Curves.easeInOut);
                            })
                        : CustomButton(
                            text: "Get Started".needTranslation,
                            fontWeight: FontWeight.w500,
                            fontSize: 16,
                            textOverflow: TextOverflow.ellipsis,
                            backgroundColor: Colors.transparent,
                            onPressed: () => goToHomePage(),
                          ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget onboardingView(String icon, String heading, String body) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      spacing: 12,
      children: [
        Lottie.asset(icon, repeat: true, reverse: false, frameRate: FrameRate(60), width: MediaQuery.sizeOf(context).width - 50, height: MediaQuery.sizeOf(context).width - 50),
        12.height,
        Text(
          heading,
          style: TextStyle(fontSize: 36, fontWeight: FontWeight.w600, color: AppColors.textColor, letterSpacing: -0.4, height: 1),
        ),
        Text(
          body,
          style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: AppColors.greyTextColor, letterSpacing: 0, height: 26 / 16),
        ),
      ],
    ).paddingOnly(left: 24, right: 24);
  }
}