From 673f31d9a5ebf748a00a79cca0fbba4d58640770 Mon Sep 17 00:00:00 2001 From: Dynesshely Date: Sun, 21 Jul 2024 03:32:14 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=BE=20Feat(HomePage):=20Added=20more?= =?UTF-8?q?=20animation=20effects=20for=20home=20page=20tiles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- kitx_mobile/lib/pages/home_page.dart | 218 +++++++++++++++++++-------- 1 file changed, 154 insertions(+), 64 deletions(-) diff --git a/kitx_mobile/lib/pages/home_page.dart b/kitx_mobile/lib/pages/home_page.dart index 161fbf1..51b433a 100644 --- a/kitx_mobile/lib/pages/home_page.dart +++ b/kitx_mobile/lib/pages/home_page.dart @@ -32,11 +32,11 @@ class HomePage extends StatelessWidget implements ConstantPage { body: Padding( padding: EdgeInsets.all(20), child: ListView( - children: [ - OrientationBuilder( - builder: (context, _) => MediaQuery.of(context).orientation == Orientation.portrait - ? ListView( - shrinkWrap: true, + children: [ + OrientationBuilder( + builder: (context, _) => MediaQuery.of(context).orientation == Orientation.portrait + ? ListView( + shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), children: getContent( context, @@ -66,86 +66,176 @@ class HomePage extends StatelessWidget implements ConstantPage { const tilesPadding = 15.0; const pageOpenDelay = 200; + const tileEnterDelay = Duration(milliseconds: 350); + const tileEnterCurve = Curves.easeInOutCubic; + + const maxTilesCount = 5; + + var enteringTileIndex = 0.obs; + + var tileEnterPad = 300.0; + var tileEnterPadFuture = 40.0; + + if (instances.appInfo.animationEnabled.value) { + Future.doWhile(() async { + await Future.delayed(Duration(milliseconds: tileEnterPad.round())); + enteringTileIndex.value++; + tileEnterPad -= enteringTileIndex.value * tileEnterPadFuture; + tileEnterPadFuture -= enteringTileIndex.value * 7.5; + return enteringTileIndex.value <= maxTilesCount; + }); + } else { + enteringTileIndex.value = maxTilesCount; + } + return [ - const SizedBox(height: tilesPadding), + Obx( + () => AnimatedContainer( + duration: tileEnterDelay, + curve: tileEnterCurve, + height: enteringTileIndex.value >= 1 ? tilesPadding : 400, + width: 0, + ), + ), SizedBox( width: tileWidth, - child: ListTile( - leading: const Icon(Icons.devices), - title: Text('Drawer_Devices'.tr), - subtitle: const Hero( - tag: 'HeroTag_DevicesCount', - child: const DeviceStatusLabel(), + child: Obx( + () => AnimatedOpacity( + opacity: enteringTileIndex.value >= 1 ? 1.0 : 0.0, + duration: tileEnterDelay, + curve: tileEnterCurve, + child: ListTile( + leading: const Icon(Icons.devices), + title: Text('Drawer_Devices'.tr), + subtitle: const Hero( + tag: 'HeroTag_DevicesCount', + child: const DeviceStatusLabel(), + ), + trailing: const Icon(Icons.keyboard_arrow_right), + shape: tileRadius, + onTap: () => (() => Get.toNamed(DevicesPage.getRoute())).tryVibrate().delay(milliseconds: config.delayOpenPageInHomePage.value ? pageOpenDelay : 0).execute(), + onLongPress: () { + showMenu( + context: context, + position: RelativeRect.fromLTRB(100, 0, 0, 100), + items: [ + PopupMenuItem( + child: Text('Option_RestartDevicesServer'.tr), + onTap: instances.restartDevicesServer, + ), + PopupMenuItem( + child: Text('Option_ShutdownDevicesServer'.tr), + onTap: instances.shutdownDevicesServer, + ), + ], + elevation: 8.0, + ); + }, + ), ), - trailing: const Icon(Icons.keyboard_arrow_right), - shape: tileRadius, - onTap: () => (() => Get.toNamed(DevicesPage.getRoute())).tryVibrate().delay(milliseconds: config.delayOpenPageInHomePage.value ? pageOpenDelay : 0).execute(), - onLongPress: () { - showMenu( - context: context, - position: RelativeRect.fromLTRB(100, 0, 0, 100), - items: [ - PopupMenuItem( - child: Text('Option_RestartDevicesServer'.tr), - onTap: instances.restartDevicesServer, - ), - PopupMenuItem( - child: Text('Option_ShutdownDevicesServer'.tr), - onTap: instances.shutdownDevicesServer, - ), - ], - elevation: 8.0, - ); - }, ), ), - const SizedBox(height: tilesPadding), + Obx( + () => AnimatedContainer( + duration: tileEnterDelay, + curve: tileEnterCurve, + height: enteringTileIndex.value >= 2 ? tilesPadding : 200, + width: 0, + ), + ), SizedBox( width: tileWidth, - child: ListTile( - leading: const Icon(Icons.layers), - title: Text('Drawer_Plugins'.tr), - subtitle: isLandscape ? const Text('developing ...') : null, - trailing: const Icon(Icons.keyboard_arrow_right), - shape: tileRadius, - onTap: () => (() => Get.toNamed(PluginsPage.getRoute())).tryVibrate().delay(milliseconds: config.delayOpenPageInHomePage.value ? pageOpenDelay : 0).execute(), + child: Obx( + () => AnimatedOpacity( + opacity: enteringTileIndex.value >= 2 ? 1.0 : 0.0, + duration: tileEnterDelay, + curve: tileEnterCurve, + child: ListTile( + leading: const Icon(Icons.layers), + title: Text('Drawer_Plugins'.tr), + subtitle: isLandscape ? const Text('developing ...') : null, + trailing: const Icon(Icons.keyboard_arrow_right), + shape: tileRadius, + onTap: () => (() => Get.toNamed(PluginsPage.getRoute())).tryVibrate().delay(milliseconds: config.delayOpenPageInHomePage.value ? pageOpenDelay : 0).execute(), + ), + ), + ), + ), + Obx( + () => AnimatedContainer( + duration: tileEnterDelay, + curve: tileEnterCurve, + height: enteringTileIndex.value >= 1 ? tilesPadding : 100, + width: 0, ), ), - const SizedBox(height: tilesPadding), SizedBox( width: tileWidth, - child: ListTile( - leading: const Icon(Icons.alternate_email), - title: Text('Drawer_Account'.tr), - subtitle: isLandscape ? const Text('developing ...') : null, - trailing: const Icon(Icons.keyboard_arrow_right), - shape: tileRadius, - onTap: () => (() => Get.toNamed(AccountPage.getRoute())).tryVibrate().delay(milliseconds: config.delayOpenPageInHomePage.value ? pageOpenDelay : 0).execute(), + child: Obx( + () => AnimatedOpacity( + opacity: enteringTileIndex.value >= 3 ? 1.0 : 0.0, + duration: tileEnterDelay, + curve: tileEnterCurve, + child: ListTile( + leading: const Icon(Icons.alternate_email), + title: Text('Drawer_Account'.tr), + subtitle: isLandscape ? const Text('developing ...') : null, + trailing: const Icon(Icons.keyboard_arrow_right), + shape: tileRadius, + onTap: () => (() => Get.toNamed(AccountPage.getRoute())).tryVibrate().delay(milliseconds: config.delayOpenPageInHomePage.value ? pageOpenDelay : 0).execute(), + ), + ), + ), + ), + Obx( + () => AnimatedContainer( + duration: tileEnterDelay, + curve: tileEnterCurve, + height: enteringTileIndex.value >= 1 ? tilesPadding : 60, + width: 0, ), ), - const SizedBox(height: tilesPadding), SizedBox( width: tileWidth, - child: ListTile( - leading: const Icon(Icons.settings), - title: Text('Drawer_Setting'.tr), - subtitle: isLandscape ? const Text('no notifications') : null, - trailing: const Icon(Icons.keyboard_arrow_right), - shape: tileRadius, - onTap: () => (() => Get.toNamed(SettingsPage.getRoute())).tryVibrate().delay(milliseconds: config.delayOpenPageInHomePage.value ? pageOpenDelay : 0).execute(), + child: Obx( + () => AnimatedOpacity( + opacity: enteringTileIndex.value >= 4 ? 1.0 : 0.0, + duration: tileEnterDelay, + curve: tileEnterCurve, + child: ListTile( + leading: const Icon(Icons.settings), + title: Text('Drawer_Setting'.tr), + subtitle: isLandscape ? const Text('no notifications') : null, + trailing: const Icon(Icons.keyboard_arrow_right), + shape: tileRadius, + onTap: () => (() => Get.toNamed(SettingsPage.getRoute())).tryVibrate().delay(milliseconds: config.delayOpenPageInHomePage.value ? pageOpenDelay : 0).execute(), + ), + ), + ), + ), + Obx( + () => AnimatedContainer( + duration: tileEnterDelay, + curve: tileEnterCurve, + height: enteringTileIndex.value >= 1 ? tilesPadding : 30, + width: 0, ), ), - const SizedBox(height: tilesPadding), SizedBox( width: tileWidth, child: Obx( - () => ListTile( - leading: const Icon(Icons.info_outline_rounded), - title: Text('Drawer_About'.tr), - subtitle: Text(instances.appInfo.versionString.value), - trailing: const Icon(Icons.keyboard_arrow_right), - shape: tileRadius, - onTap: () => (() => Get.toNamed(AboutPage.getRoute())).tryVibrate().delay(milliseconds: config.delayOpenPageInHomePage.value ? pageOpenDelay : 0).execute(), + () => AnimatedOpacity( + opacity: enteringTileIndex.value >= 5 ? 1.0 : 0.0, + duration: tileEnterDelay, + curve: tileEnterCurve, + child: ListTile( + leading: const Icon(Icons.info_outline_rounded), + title: Text('Drawer_About'.tr), + subtitle: Text(instances.appInfo.versionString.value), + trailing: const Icon(Icons.keyboard_arrow_right), + shape: tileRadius, + onTap: () => (() => Get.toNamed(AboutPage.getRoute())).tryVibrate().delay(milliseconds: config.delayOpenPageInHomePage.value ? pageOpenDelay : 0).execute(), + ), ), ), ),