Skip to content

Commit

Permalink
feat: Added List Game View
Browse files Browse the repository at this point in the history
  • Loading branch information
@jacobaraujo7
jacobaraujo7 committed Feb 20, 2024
1 parent 90379b1 commit e2099b0
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 58 deletions.
1 change: 1 addition & 0 deletions lib/app/(public)/home/grid_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,7 @@ class _HomePageState extends State<HomePage> with HomeMixin {
onSettings: openSettings,
onFavorite: favorite,
onPlay: openGame,
onGameView: gameView,
),
),
],
Expand Down
9 changes: 9 additions & 0 deletions lib/app/(public)/home/list_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,13 +229,21 @@ class _ListPageState extends State<ListPage> with HomeMixin {
controller: scrollController,
index: index,
child: AnimatedTile(
index: index,
gamesLength: games.length,
transitionAnimation: widget.transitionAnimation,
colorScheme: colorScheme,
selected: selected,
text: game.name,
subtext:
getPlatformFromGame(game).category.name,
onTap: () {
handlerSelect(index);
openGame();
},
onLongPressed: () {
handlerSelect(index);
gameMenu();
},
),
);
Expand Down Expand Up @@ -268,6 +276,7 @@ class _ListPageState extends State<ListPage> with HomeMixin {
onSettings: openSettings,
onFavorite: favorite,
onPlay: openGame,
onGameView: gameView,
),
),
],
Expand Down
148 changes: 93 additions & 55 deletions lib/app/core/widgets/animated_tile.dart
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,29 @@
import 'dart:ui';

import 'package:flutter/material.dart';

class AnimatedTile extends StatefulWidget {
final String text;
final String subtext;
final int index;
final int gamesLength;
final Animation<double> transitionAnimation;
final bool selected;
final ColorScheme colorScheme;
final void Function()? onTap;
final void Function()? onLongPressed;

const AnimatedTile({
super.key,
required this.text,
required this.subtext,
required this.colorScheme,
required this.transitionAnimation,
required this.index,
required this.gamesLength,
this.selected = false,
this.onTap,
this.onLongPressed,
});

@override
Expand All @@ -24,6 +34,8 @@ class _AnimatedTileState extends State<AnimatedTile>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;

late final Animation<double> _tileSlideAnimation;

@override
void initState() {
super.initState();
Expand All @@ -34,9 +46,27 @@ class _AnimatedTileState extends State<AnimatedTile>

_controller.value = widget.selected ? 1 : 0;

_controller.addListener(() {
setState(() {});
});
Listenable.merge([
_controller,
widget.transitionAnimation,
]).addListener(_listener);

final start = widget.index / widget.gamesLength;
final duration = 1 / widget.gamesLength;

final curved = CurvedAnimation(
parent: widget.transitionAnimation,
curve: const Interval(0.5, 1.0),
);

_tileSlideAnimation = Tween(begin: 1.0, end: 0.0).animate(CurvedAnimation(
parent: curved,
curve: Interval(start, start + duration, curve: Curves.easeOut),
));
}

void _listener() {
setState(() {});
}

@override
Expand All @@ -56,6 +86,7 @@ class _AnimatedTileState extends State<AnimatedTile>

@override
void dispose() {
widget.transitionAnimation.removeListener(_listener);
_controller.dispose();
super.dispose();
}
Expand Down Expand Up @@ -84,62 +115,69 @@ class _AnimatedTileState extends State<AnimatedTile>
),
);

return Padding(
padding: const EdgeInsets.only(left: 12.0, right: 4.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
color: widget.selected
? widget.colorScheme.surface
: theme.colorScheme.surface,
child: InkWell(
borderRadius: BorderRadius.circular(12.0),
onTap: widget.onTap,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Transform.translate(
offset: textTranslate.value,
child: Text(
widget.text,
maxLines: 1,
style: theme.textTheme.titleMedium?.copyWith(
overflow: TextOverflow.ellipsis,
color: widget.selected
? widget.colorScheme.primary
: theme.colorScheme.onSurface,
return Transform.translate(
offset: Offset(_tileSlideAnimation.value * -200, 0),
child: Opacity(
opacity: lerpDouble(1.0, 0.0, _tileSlideAnimation.value)!,
child: Padding(
padding: const EdgeInsets.only(left: 12.0, right: 4.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
color: widget.selected
? widget.colorScheme.surface
: theme.colorScheme.surface,
child: InkWell(
borderRadius: BorderRadius.circular(12.0),
onTap: widget.onTap,
onLongPress: widget.onLongPressed,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Transform.translate(
offset: textTranslate.value,
child: Text(
widget.text,
maxLines: 1,
style: theme.textTheme.titleMedium?.copyWith(
overflow: TextOverflow.ellipsis,
color: widget.selected
? widget.colorScheme.primary
: theme.colorScheme.onSurface,
),
),
),
),
),
Opacity(
opacity: subtextOpacity.value,
child: Text(
widget.subtext,
maxLines: 1,
style: theme.textTheme.bodySmall?.copyWith(
overflow: TextOverflow.ellipsis,
color: widget.selected
? widget.colorScheme.primary
: theme.colorScheme.onSurface,
Opacity(
opacity: subtextOpacity.value,
child: Text(
widget.subtext,
maxLines: 1,
style: theme.textTheme.bodySmall?.copyWith(
overflow: TextOverflow.ellipsis,
color: widget.selected
? widget.colorScheme.primary
: theme.colorScheme.onSurface,
),
),
),
),
],
),
],
),
),
Icon(
Icons.arrow_forward_ios,
color: widget.selected
? widget.colorScheme.primary
: theme.colorScheme.onSurface,
),
Icon(
Icons.arrow_forward_ios,
color: widget.selected
? widget.colorScheme.primary
: theme.colorScheme.onSurface,
),
],
),
],
),
),
),
),
Expand Down
8 changes: 5 additions & 3 deletions lib/app/core/widgets/command_bar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,15 @@ class NavigationCommand extends StatelessWidget {
final VoidCallback? onPlay;
final VoidCallback? onFavorite;
final VoidCallback? onSettings;
final VoidCallback? onGameView;
final ColorScheme colorScheme;
final bool isSyncing;

const NavigationCommand({
super.key,
this.onApps,
this.onFavorite,
this.onGameView,
this.onSettings,
this.onPlay,
this.isSyncing = false,
Expand Down Expand Up @@ -55,10 +57,10 @@ class NavigationCommand extends StatelessWidget {
background: colorScheme.onBackground,
textColor: colorScheme.background,
),
const Gap(17),
IconButton(
onPressed: () {},
icon: const Icon(Icons.laptop_windows_outlined)),
onPressed: onGameView,
icon: const Icon(Icons.space_dashboard_rounded),
),
const Spacer(),
if (isSyncing)
Row(
Expand Down

0 comments on commit e2099b0

Please sign in to comment.