ember/fluffychat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add shimmer background to match choices

Browse source
This commit is contained in:
ggurdin 2025-12-16 16:25:26 -05:00
parent b795ba3c06
commit 1da3ed16f7
No known key found for this signature in database
GPG key ID: A01CB41737CBB478
3 changed files with 93 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
lib/pangea/common/widgets/shimmer_background.dart Normal file
View file

@ -0,0 +1,44 @@
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import 'package:fluffychat/config/app_config.dart';
class ShimmerBackground extends StatelessWidget {
final Widget child;
final Color shimmerColor;
final bool enabled;
const ShimmerBackground({
super.key,
required this.child,
this.shimmerColor = AppConfig.goldLight,
this.enabled = true,
});
@override
Widget build(BuildContext context) {
return Stack(
children: [
child,
if (enabled)
Positioned.fill(
child: ClipRRect(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
child: Shimmer.fromColors(
baseColor: shimmerColor.withValues(alpha: 0.1),
highlightColor: shimmerColor.withValues(alpha: 0.6),
direction: ShimmerDirection.ltr,
child: Container(
decoration: BoxDecoration(
color: shimmerColor.withValues(alpha: 0.3),
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
),
),
),
),
],
);
}
}

70
lib/pangea/lemmas/lemma_highlight_emoji_row.dart
View file

@ -2,11 +2,10 @@ import 'dart:async';
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/pangea/analytics_misc/get_analytics_controller.dart';
import 'package:fluffychat/pangea/common/utils/overlay.dart';
import 'package:fluffychat/pangea/common/widgets/shimmer_background.dart';
import 'package:fluffychat/pangea/constructs/construct_identifier.dart';
import 'package:fluffychat/pangea/lemmas/lemma_meaning_builder.dart';
import 'package:fluffychat/widgets/hover_builder.dart';
@ -158,55 +157,40 @@ class EmojiChoiceItemState extends State<EmojiChoiceItem> {
@override
Widget build(BuildContext context) {
final shimmerColor = (Theme.of(context).brightness == Brightness.dark)
? Colors.white
: Theme.of(context).colorScheme.primary;
return HoverBuilder(
builder: (context, hovered) => GestureDetector(
onTap: widget.onSelectEmoji,
child: Stack(
children: [
CompositedTransformTarget(
link: layerLink,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: hovered
? Theme.of(context).colorScheme.primary.withAlpha(50)
: Colors.transparent,
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
border: widget.selected
? Border.all(
color: AppConfig.goldLight.withAlpha(200),
width: 2,
)
: null,
),
child: Text(
widget.emoji,
style: Theme.of(context).textTheme.headlineSmall,
),
),
),
if (shimmer)
Positioned.fill(
child: ClipRRect(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
child: Shimmer.fromColors(
baseColor: shimmerColor.withValues(alpha: 0.1),
highlightColor: shimmerColor.withValues(alpha: 0.6),
direction: ShimmerDirection.ltr,
child: Container(
decoration: BoxDecoration(
color: shimmerColor.withValues(alpha: 0.3),
borderRadius:
BorderRadius.circular(AppConfig.borderRadius),
),
),
ShimmerBackground(
enabled: shimmer,
shimmerColor: (Theme.of(context).brightness == Brightness.dark)
? Colors.white
: Theme.of(context).colorScheme.primary,
child: CompositedTransformTarget(
link: layerLink,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: hovered
? Theme.of(context).colorScheme.primary.withAlpha(50)
: Colors.transparent,
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
border: widget.selected
? Border.all(
color: AppConfig.goldLight.withAlpha(200),
width: 2,
)
: null,
),
child: Text(
widget.emoji,
style: Theme.of(context).textTheme.headlineSmall,
),
),
),
),
if (widget.badge != null)
Positioned(
right: 0,

40
lib/pangea/toolbar/message_practice/practice_match_card.dart
View file

@ -7,6 +7,7 @@ import 'package:collection/collection.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/pangea/common/widgets/choice_animation.dart';
import 'package:fluffychat/pangea/common/widgets/shimmer_background.dart';
import 'package:fluffychat/pangea/practice_activities/activity_type_enum.dart';
import 'package:fluffychat/pangea/practice_activities/practice_activity_model.dart';
import 'package:fluffychat/pangea/practice_activities/practice_choice.dart';
@ -37,26 +38,29 @@ class MatchActivityCard extends StatelessWidget {
switch (activityType) {
case ActivityTypeEnum.emoji:
case ActivityTypeEnum.wordMeaning:
final text = Text(
choice,
style: TextStyle(fontSize: fontSize),
textAlign: TextAlign.center,
return ShimmerBackground(
enabled: controller.selectedChoice == null &&
!currentActivity.practiceTarget.hasAnyCorrectChoices,
child: Padding(
padding: const EdgeInsets.all(8),
child: Text(
choice,
style: TextStyle(fontSize: fontSize),
textAlign: TextAlign.center,
),
),
);
// if (controller.selectedChoice == null &&
// !currentActivity.practiceTarget.hasAnyCorrectChoices) {
// return Shimmer.fromColors(
// baseColor: Theme.of(context).colorScheme.onSurface,
// highlightColor: AppConfig.goldLight,
// child: text,
// );
// }
return text;
case ActivityTypeEnum.wordFocusListening:
return Icon(
Icons.volume_up,
size: fontSize,
return ShimmerBackground(
enabled: controller.selectedChoice == null &&
!currentActivity.practiceTarget.hasAnyCorrectChoices,
child: Padding(
padding: const EdgeInsets.all(8),
child: Icon(
Icons.volume_up,
size: fontSize,
),
),
);
default:
debugger(when: kDebugMode);