AiKeyboard2025/lib/module/intro/intro_page.dart

import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:keyboard/module/intro/intro_controller.dart';
import 'package:get/get.dart';
import 'package:flutter/material.dart';
import 'package:keyboard/resource/string.gen.dart';
import 'package:lottie/lottie.dart';
import 'package:nested_scroll_views/material.dart';

import '../../resource/assets.gen.dart';
import '../../resource/colors.gen.dart';
import '../../router/app_pages.dart';

class IntroPage extends BasePage<IntroController> {
  const IntroPage({Key? key}) : super(key: key);

  static void start() {
    Get.toNamed(RoutePath.intro);
  }

  @override
  bool immersive() {
    return true;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        Assets.images.bgIntro.image(width: double.infinity, fit: BoxFit.fill),
        SizedBox(
          width: double.infinity,
          height: double.infinity,
          child: SafeArea(
            child: Stack(
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    SizedBox(height: 42.w),
                    Assets.images.iconIntroTitle.image(
                      width: 189.w,
                      height: 40.6.w,
                      fit: BoxFit.contain,
                    ),
                    SizedBox(height: 20.w),
                    Flexible(
                      child:

                          NestedPageView(
                        controller: controller.pageController.value,
                        onPageChanged: (index) {
                          controller.onPageChanged(index);
                        },
                        children: List.generate(
                          controller.pageList.length,
                          (index) =>
                              buildPage(controller.pageList[index], index),
                        ),
                      ),
                    ),
                  ],
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    buildIndicator(),
                    SizedBox(height: 50.w),
                    _buildCustomButton(),
                    SizedBox(height: 25.w),
                    _buildGoToLoginButton(),
                    SizedBox(height: 50.w),
                  ],
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget buildIndicator() {
    return Obx(() {
      int totalPages = controller.pageList.length;
      int currentPage = controller.currentPage.value;

      return Container(
        width: 50.w,
        height: 10.h,
        decoration: BoxDecoration(
          color: const Color(0xF0F4EEFF),
          borderRadius: BorderRadius.circular(5.r),
        ),
        padding: EdgeInsets.all(2.w),

        child: Align(
          alignment: Alignment.centerLeft,
          child: AnimatedContainer(
            duration: Duration(milliseconds: 300),
            width: (50.w - 4.w) / totalPages,

            height: double.infinity,
            margin: EdgeInsets.only(
              left: ((50.w - 4.w) / totalPages) * currentPage,
            ),
            decoration: BoxDecoration(
              color: const Color(0xffa084ff),
              borderRadius: BorderRadius.circular(3.r),
            ),
          ),
        ),
      );
    });
  }

  Widget buildPage(PageBean pageBean, int index) {
    return  Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          pageBean.title,
          SizedBox(height: 20.h),

            Lottie.asset(
              pageBean.animUrl,
              width: 360.w,
              repeat: true,
              fit: BoxFit.contain,
            ),
        ],
      );

  }

  Widget _buildCustomButton() {
    return Container(
      height: 48.w,
      margin: EdgeInsets.only(left: 50.w, right: 50.w),
      child: Material(
        color: Colors.transparent,
        borderRadius: BorderRadius.circular(50.r),
        child: InkWell(
          borderRadius: BorderRadius.circular(50.r),
          onTap: () {
            controller.clickCustomButton();
          },
          child: Ink(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
                transform: GradientRotation(0.5),
                colors: [Color(0xFF7D46FC), Color(0xFFBC87FF)],
              ),
              borderRadius: BorderRadius.circular(50.r),
              boxShadow: [
                BoxShadow(
                  color: Color(0x66BDA8C9),
                  blurRadius: 10.r,
                  offset: Offset(0, 4),
                  spreadRadius: 0,
                ),
              ],
            ),
            child: Center(
              child: Text(
                StringName.customLoveKeyboard,
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  _buildGoToLoginButton() {
    return InkWell(
      onTap: controller.clickLogin,
      child: Text(
        StringName.goToLogin,
        style: TextStyle(
          color: const Color(0xFF8649FF),
          fontSize: 14.sp,
          fontWeight: FontWeight.w500,
        ),
      ),
    );
  }
}