dreampad/lib/app/modules/home/views/home_view.dart

import 'package:dreampad/app/models/models.dart';
import 'package:dreampad/app/routes/app_pages.dart';
import 'package:dreampad/app/shared/constants/dimens.dart';
import 'package:dreampad/app/shared/shared.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:get/get.dart';

import '../controllers/home_controller.dart';
import '../models/explore_app_model.dart';
import '../widgets/explore_widget.dart';
import '../widgets/goal_dialog.dart';
import '../widgets/lantern_widget.dart';
import '../widgets/user_widget.dart';

class HomeView extends GetView<HomeController> {
  const HomeView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: Images.homeBg,
            fit: BoxFit.fill,
          ),
        ),
        child: Obx(
          () => Scaffold(
            backgroundColor: Colors.transparent,
            body: controller.create.value
                ? Center(
                    child: Images.homeCreate,
                  )
                : buildBody(context),
          ),
        ),
      ),
    );
  }

  Widget buildBody(BuildContext context) {
    return Obx(
      () => Stack(
        children: [
          Container(
            height: 458.h,
            width: 996.w,
            margin: REdgeInsets.only(
              left: 90.0,
              top: 178.0,
            ),
            color: Colors.transparent,
            child: controller.prompt.value ? null : buildApp(context),
          ),
          Container(
            height: 650.h,
            width: 630.w,
            margin: REdgeInsets.only(
              left: 262.0,
              top: 0.0,
            ),
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: Images.homeTree,
                fit: BoxFit.fill,
              ),
            ),
            child: treeWidget(),
          ),
          Container(
            height: 228.h,
            width: 1176.w,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: Images.homeColud,
                fit: BoxFit.fill,
              ),
            ),
            child: titleWidget(),
          ),
          Container(
            height: 650.h,
            width: 630.w,
            margin: REdgeInsets.only(
              left: 262.0,
              top: 0.0,
            ),
            child: goalWidget(),
          ),
          controller.prompt.value
              ? Container()
              : Positioned(
                  left: 49.w,
                  top: 50.h,
                  child: UserWidget(
                    account: controller.account,
                    gender: controller.gender,
                    occupationName: controller.occupationName,
                  ),
                ),
          controller.prompt.value
              ? Container()
              : Positioned(
                  right: 49.w,
                  top: 50.h,
                  child: ExploreWidget(
                    explored: controller.explored.value,
                    exploreCount: controller.exploreCount.value,
                    remainTime: controller.remainTimeStr.value,
                    onPressed: () async {
                      controller.explorePress();
                    },
                  ),
                ),
          controller.prompt.value
              ? Container()
              : Positioned(
                  right: 0.w,
                  bottom: 0.h,
                  child: Container(
                    height: 24.h,
                    width: 69.w,
                    decoration: BoxDecoration(
                      color: const Color(0xFF000000).withOpacity(0.4),
                      borderRadius: BorderRadius.only(
                          topLeft: const Radius.circular(10.0).r),
                    ),
                    padding: REdgeInsets.all(5.0),
                    child: GestureDetector(
                      onTap: () async {
                        await controller.reset();
                      },
                      child: Text.rich(
                        TextSpan(
                          children: [
                            WidgetSpan(
                              alignment: PlaceholderAlignment.middle,
                              child: Images.homeReset,
                            ),
                            const WidgetSpan(child: RSizedBox(width: 2.0)),
                            WidgetSpan(
                              alignment: PlaceholderAlignment.middle,
                              child: Text(
                                '重新体验',
                                style: TextStyles.mediumWhite10,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
        ],
      ),
    );
  }

  Widget goalWidget() {
    return Stack(
      children: [
        controller.explored2.value >= 4
            ? Positioned(
                left: 15.w,
                top: 20.h,
                child: Container(
                  height: 311.h,
                  width: 230.w,
                  color: Colors.transparent,
                  child: fourthGoalWidget(),
                ),
              )
            : Container(),
        controller.explored2.value >= 3
            ? Positioned(
                left: 352.w,
                top: 0.0,
                child: Container(
                  height: 221.h,
                  width: 281.w,
                  color: Colors.transparent,
                  child: thirdGoalWidget(),
                ),
              )
            : Container(),
        controller.explored2.value >= 2
            ? Positioned(
                left: 363.w,
                top: 180.h,
                child: Container(
                  height: 240.h,
                  width: 240.w,
                  color: Colors.transparent,
                  child: secondGoalWidget(),
                ),
              )
            : Container(),
      ],
    );
  }

  Widget fourthGoalWidget() {
    return Stack(
      children: [
        Positioned(
          left: 115.w,
          top: 102.h,
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {},
            child: Text(
              '更长期目标',
              style: TextStyles.boldWhiteShadow18_111,
            ),
          ),
        ),
        Positioned(
          left: 28.w,
          top: 62.h,
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              showGoalDialog(controller.getGoal(3));
            },
            child: Text(
              '18岁目标',
              style: TextStyles.boldWhiteShadow14_111,
            ),
          ),
        ),
        Positioned(
          left: 52.w,
          top: 129.h,
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              showGoalDialog(controller.getGoal(4));
            },
            child: Text(
              '22岁目标',
              style: TextStyles.boldWhiteShadow14_111,
            ),
          ),
        ),
        Positioned(
          left: 128.w,
          top: 168.h,
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              showGoalDialog(controller.getGoal(4));
            },
            child: Text(
              '30岁目标',
              style: TextStyles.boldWhiteShadow14_111,
            ),
          ),
        ),
      ],
    );
  }

  Widget thirdGoalWidget() {
    return Stack(
      children: [
        Positioned(
          left: 51.w,
          top: 102.h,
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              showGoalDialog(controller.getGoal(2));
            },
            child: Text(
              '三年内目标',
              style: TextStyles.boldWhiteShadow18_111,
            ),
          ),
        ),
        Positioned(
          right: 56.w,
          top: 61.h,
          child: Container(
            height: 36.h,
            width: 56.w,
            color: Colors.transparent,
            child: Text(
              '科学竞赛参与',
              textAlign: TextAlign.center,
              style: TextStyles.boldWhiteShadow14_111,
            ),
          ),
        ),
        Positioned(
          right: 66.w,
          top: 123.h,
          child: Container(
            height: 36.h,
            width: 56.w,
            color: Colors.transparent,
            child: Text(
              '英语能力加强',
              textAlign: TextAlign.center,
              style: TextStyles.boldWhiteShadow14_111,
            ),
          ),
        ),
        Positioned(
          left: 98.w,
          bottom: 18.h,
          child: Container(
            height: 36.h,
            width: 56.w,
            color: Colors.transparent,
            child: Text(
              '拓展科学知识',
              textAlign: TextAlign.center,
              style: TextStyles.boldWhiteShadow14_111,
            ),
          ),
        ),
      ],
    );
  }

  Widget secondGoalWidget() {
    return _ShowUp(
      child: Stack(
        children: [
          Positioned(
            left: 43.w,
            top: 66.h,
            child: GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () {
                showGoalDialog(controller.getGoal(1));
              },
              child: Text(
                '今年目标',
                style: TextStyles.boldWhiteShadow18_111,
              ),
            ),
          ),
          Positioned(
            right: 34.w,
            top: 40.h,
            child: Container(
              height: 36.h,
              width: 56.w,
              color: Colors.transparent,
              child: Text(
                '课外阅读提升',
                textAlign: TextAlign.center,
                style: TextStyles.boldWhiteShadow14_111,
              ),
            ),
          ),
          Positioned(
            right: 38.w,
            top: 93.h,
            child: Container(
              height: 36.h,
              width: 56.w,
              color: Colors.transparent,
              child: Text(
                '科学兴趣培养',
                textAlign: TextAlign.center,
                style: TextStyles.boldWhiteShadow14_111,
              ),
            ),
          ),
          Positioned(
            left: 92.w,
            top: 120.h,
            child: Container(
              height: 36.h,
              width: 56.w,
              color: Colors.transparent,
              child: Text(
                '基础教学能力',
                textAlign: TextAlign.center,
                style: TextStyles.boldWhiteShadow14_111,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget titleWidget() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const RSizedBox(height: 24),
        Text(
          '梦想职业',
          style: TextStyles.mediumWhiteShadow20_114,
        ),
        Text(
          controller.occupationName,
          style: TextStyles.boldColorShadow28_012,
        ),
      ],
    );
  }

  Widget treeWidget() {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: controller.explored2.value >= 4
          ? null
          : () {
              controller.explored2.value = controller.explored2.value + 1;
            },
      child: Stack(
        children: [
          Positioned(
            left: 218.w,
            top: 244.h,
            child: GestureDetector(
              onTap: controller.explored2.value >= 4
                  ? () async {
                      await Get.toNamed(Routes.HOME + Routes.EXPLORE);
                    }
                  : null,
              child: Container(
                width: 210.w,
                height: 216.h,
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image: Images.homeShine,
                    fit: BoxFit.fill,
                  ),
                ),
                child: Center(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        '梦想',
                        style: TextStyles.boldWhiteShadow22_012,
                      ),
                      Text(
                        '探索',
                        style: TextStyles.boldWhiteShadow22_012,
                      )
                    ],
                  ),
                ),
              ),
            ),
          ),
          controller.explored2.value >= 4
              ? Positioned(
                  left: 15.w,
                  top: 20.h,
                  child: _ShowUp(
                    child: Container(
                      height: 311.h,
                      width: 230.w,
                      decoration: const BoxDecoration(
                        image: DecorationImage(
                          image: Images.homeFourthLeaf,
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                )
              : Container(),
          controller.explored2.value >= 3
              ? Positioned(
                  left: 352.w,
                  top: 0.0,
                  child: _ShowUp(
                    child: Container(
                      height: 221.h,
                      width: 281.w,
                      decoration: const BoxDecoration(
                        image: DecorationImage(
                          image: Images.homeThirdLeaf,
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                )
              : Container(),
          controller.explored2.value >= 2
              ? Positioned(
                  left: 363.w,
                  top: 180.h,
                  child: _ShowUp(
                    child: Container(
                      height: 240.h,
                      width: 240.w,
                      decoration: const BoxDecoration(
                        image: DecorationImage(
                          image: Images.homeSecondLeaf,
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                )
              : Container(),
          controller.explored2.value >= 1 ? firstLeafWidget() : Container(),
          LanternWidget(
            brightCount: controller.exploreCount.value >= 2
                ? controller.exploreDay.value
                : controller.exploreDay.value - 1,
          ),
          Positioned(
            left: 168.w,
            top: 244.h,
            child: Images.homeIp,
          ),
          Positioned(
            left: 135.w,
            bottom: 10.h,
            child: GestureDetector(
              onTap: () {},
              child: buildMainApp(
                '智慧编程',
                Images.homeMainAppProgramme,
                Images.homeProgramme,
                Images.homeProgrammeGrey,
                TextStyle(
                  fontSize: Dimens.font_sp10.sp,
                  fontFamily: 'alph-b',
                  color: const Color(0xFFFFBC5A),
                  fontWeight: FontWeight.bold,
                ),
                controller.explored.value,
              ),
            ),
          ),
          Positioned(
            left: 316.w,
            bottom: 10.h,
            child: GestureDetector(
              onTap: () {},
              child: buildMainApp(
                '绘本创作',
                Images.homeMainAppPictureBook,
                Images.homePicturebook,
                Images.homePicturebookGrey,
                TextStyle(
                  fontSize: Dimens.font_sp10.sp,
                  fontFamily: 'alph-b',
                  color: const Color(0xFF68FFFA),
                  fontWeight: FontWeight.bold,
                ),
                controller.explored.value,
              ),
            ),
          ),
          Positioned(
            right: 79.w,
            bottom: 10.h,
            child: GestureDetector(
              onTap: () {},
              child: buildMainApp(
                '乐曲创作',
                Images.homeMainAppMusic,
                Images.homeMusic,
                Images.homeMusicGrey,
                TextStyle(
                  fontSize: Dimens.font_sp10.sp,
                  fontFamily: 'alph-b',
                  color: const Color(0xFFEA74DF),
                  fontWeight: FontWeight.bold,
                ),
                controller.explored.value,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget buildMainApp(
    String name,
    AssetImage bgImage,
    Widget appIco,
    Widget appGreyIco,
    TextStyle textStyle,
    bool usable,
  ) {
    return Container(
      height: 90.w,
      width: 90.w,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: usable ? bgImage : Images.homeMainAppGrey,
          fit: BoxFit.fill,
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          usable ? appIco : appGreyIco,
          Text(
            name,
            style: usable ? textStyle : TextStyles.boldColor10,
          )
        ],
      ),
    );
  }

  void showGoalDialog(Goal goal) {
    SmartDialog.show(
      maskColor: const Color(0xFF02184B).withOpacity(0.7),
      alignment: Alignment.center,
      builder: (_) {
        return GoalDialog(
          goal: goal,
        );
      },
    );
  }

  Widget firstLeafWidget() {
    return Positioned(
      right: 68.w,
      top: 326.h,
      child: _ShowUp(
        child: Container(
          height: 60.h,
          width: 171.w,
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: Images.homeFirstLeaf,
              fit: BoxFit.fill,
            ),
          ),
          child: Stack(
            children: [
              Positioned(
                left: 23.w,
                top: 26.h,
                child: Text(
                  '本月已点亮${controller.exploreCount.value}个知识点',
                  style: TextStyles.mediumWhiteShadow12_111,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget buildApp(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        RSizedBox(
          width: 84,
          child: Wrap(
            direction: Axis.horizontal,
            runSpacing: 22.h,
            alignment: WrapAlignment.center,
            children: controller.leftExploreApps.map((e) {
              return exploreAppWidget(e);
            }).toList(),
          ),
        ),
        RSizedBox(
          width: 120,
          child: Wrap(
            direction: Axis.horizontal,
            runSpacing: 22.h,
            alignment: WrapAlignment.center,
            children: controller.rightExploreApps.map((e) {
              return exploreAppWidget(e);
            }).toList(),
          ),
        ),
      ],
    );
  }

  Widget exploreAppWidget(ExploreApp app) {
    return GestureDetector(
      onTap: () {
        if (controller.availableApp.value) {}
      },
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          LoadAssetImage(
            'home/${controller.availableApp.value ? app.icon : app.grayIcon}',
            height: 74.w,
            width: 74.w,
            fit: BoxFit.fill,
          ),
          const RSizedBox(height: 2),
          Text(
            app.name!,
            style: TextStyles.boldWhite16,
          )
        ],
      ),
    );
  }
}

class _ShowUp extends HookWidget {
  const _ShowUp({
    super.key,
    required this.child,
  });

  final Widget child;

  @override
  Widget build(BuildContext context) {
    final controller =
        useAnimationController(duration: const Duration(milliseconds: 300));
    useMemoized(() {
      controller.forward();
    });
    return FadeTransition(
      opacity: CurvedAnimation(curve: Curves.easeIn, parent: controller),
      child: child,
    );
  }
}