Skip to content

Commit

Permalink
💾 Feat(HomePage): Added more animation effects for home page tiles
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dynesshely
Dynesshely committed Jul 20, 2024
1 parent f6c41be commit 673f31d
Showing 1 changed file with 154 additions and 64 deletions.
218 changes: 154 additions & 64 deletions kitx_mobile/lib/pages/home_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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(),
),
),
),
),
Expand Down

0 comments on commit 673f31d

Please sign in to comment.