import 'package:dreampad/app/models/models.dart'; import 'package:dreampad/app/routes/app_pages.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/user_widget.dart'; class HomeView extends GetView { 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, ), ), 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(), Positioned( left: 168.w, top: 244.h, child: Images.homeIp, ), Positioned( left: 135.w, bottom: 10.h, child: GestureDetector( onTap: () {}, child: controller.explored.value ? Images.homePicturebook : Images.homePicturebookGrey, ), ), Positioned( left: 316.w, bottom: 10.h, child: GestureDetector( onTap: () {}, child: controller.explored.value ? Images.homeProgramme : Images.homeProgrammeGrey, ), ), Positioned( right: 79.w, bottom: 10.h, child: GestureDetector( onTap: () {}, child: controller.explored.value ? Images.homeMusic : Images.homeMusicGrey, ), ), ], ), ); } 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.explored.value) {} }, child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ LoadAssetImage( 'home/${controller.explored.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, ); } }