intaleq/intaleq_driver/lib/onbording_page.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'constant/colors.dart';
import 'controller/auth/onboarding_controller.dart';
import 'models/model/onboarding_model.dart';

// The main PageView widget, now cleaner.
class CustomSliderOnBoarding extends GetView<OnBoardingControllerImp> {
  const CustomSliderOnBoarding({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: controller.pageController,
      onPageChanged: (val) {
        controller.onPageChanged(val);
      },
      itemCount: onBoardingList.length,
      itemBuilder: (context, i) => OnBoardingPageContent(
        model: onBoardingList[i],
      ),
    );
  }
}

// This is the new widget for the content of each onboarding page.
class OnBoardingPageContent extends StatelessWidget {
  final OnBoardingModel model;

  const OnBoardingPageContent({Key? key, required this.model})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Use the app's text theme for consistent styling
    final textTheme = Theme.of(context).textTheme;

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const Spacer(flex: 2), // Pushes content down
          ClipRRect(
            borderRadius:
                BorderRadius.circular(20.0), // Rounded corners for the image
            child: Image.asset(
              model.image!,
              height: Get.width * 0.6, // Slightly larger image
              width: Get.width * 0.8,
              fit: BoxFit.cover, // BoxFit.cover prevents image distortion
            ),
          ),
          const Spacer(flex: 2),
          Text(
            model.title!,
            textAlign: TextAlign.center,
            style: textTheme.displayLarge?.copyWith(
              color: AppColor.primaryColor,
              fontWeight: FontWeight.bold,
              fontSize: 24, // Consistent font size
            ),
          ),
          const SizedBox(height: 16),
          Text(
            model.body!,
            textAlign: TextAlign.center,
            style: textTheme.titleMedium?.copyWith(
                color: AppColor.accentColor,
                height: 1.5, // Improved line spacing
                fontSize: 16),
          ),
          const Spacer(flex: 3), // Pushes the content up from the dots
        ],
      ),
    );
  }
}

// The refined dot controller.
class CustomDotControllerOnBoarding extends StatelessWidget {
  const CustomDotControllerOnBoarding({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<OnBoardingControllerImp>(
      builder: (controller) => Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ...List.generate(
            onBoardingList.length,
            (index) => AnimatedContainer(
              margin: const EdgeInsets.only(right: 8), // Increased spacing
              duration: const Duration(milliseconds: 400),
              width: controller.currentPage == index
                  ? 25
                  : 8, // More distinct width change
              height: 8,
              decoration: BoxDecoration(
                // Use a lighter color for inactive dots
                color: controller.currentPage == index
                    ? AppColor.primaryColor
                    : AppColor.primaryColor.withOpacity(0.3),
                borderRadius: BorderRadius.circular(10),
              ),
            ),
          )
        ],
      ),
    );
  }
}