From 69cb045371028bf7f95ebd721f717b260324a7fd Mon Sep 17 00:00:00 2001 From: MSOB7YY Date: Wed, 14 Feb 2024 21:13:12 +0200 Subject: [PATCH] perf: some ui tweakies + AnimatedSizedBox instead of AnimatedContainer --- lib/main_page_wrapper.dart | 3 +- lib/packages/inner_drawer.dart | 31 +++-- lib/packages/miniplayer.dart | 5 +- lib/ui/dialogs/track_advanced_dialog.dart | 3 +- lib/ui/pages/equalizer_page.dart | 24 ++-- lib/ui/pages/home_page.dart | 113 ++++++++++-------- lib/ui/pages/onboarding.dart | 23 ++-- .../subpages/playlist_tracks_subpage.dart | 20 ++-- lib/ui/widgets/animated_widgets.dart | 98 +++++++++++++++ lib/ui/widgets/custom_widgets.dart | 77 ++++++------ lib/ui/widgets/expandable_box.dart | 7 +- lib/ui/widgets/selected_tracks_preview.dart | 78 ++++++------ lib/ui/widgets/video_widget.dart | 2 +- lib/ui/widgets/waveform.dart | 4 +- lib/youtube/pages/yt_channels_page.dart | 4 +- 15 files changed, 324 insertions(+), 168 deletions(-) create mode 100644 lib/ui/widgets/animated_widgets.dart diff --git a/lib/main_page_wrapper.dart b/lib/main_page_wrapper.dart index 0213e872..dbee3d03 100644 --- a/lib/main_page_wrapper.dart +++ b/lib/main_page_wrapper.dart @@ -83,8 +83,9 @@ class _MainPageWrapperState extends State { duration: const Duration(milliseconds: 400), tapScaffoldEnabled: false, velocity: 0.01, + maxChildWidth: (context.width * 0.48).withMaximum(264.0), leftChild: SafeArea( - child: Container( + child: ColoredBox( color: context.theme.scaffoldBackgroundColor, child: Column( children: [ diff --git a/lib/packages/inner_drawer.dart b/lib/packages/inner_drawer.dart index 9cb272b3..8c0d281e 100644 --- a/lib/packages/inner_drawer.dart +++ b/lib/packages/inner_drawer.dart @@ -74,6 +74,7 @@ class InnerDrawer extends StatefulWidget { this.backgroundDecoration, this.innerDrawerCallback, this.onDragUpdate, + this.maxChildWidth, }) : assert( leftChild != null || rightChild != null, 'You must specify at least one child', @@ -145,6 +146,8 @@ class InnerDrawer extends StatefulWidget { /// when a pointer that is in contact with the screen and moves to the right or left final InnerDragUpdateCallback? onDragUpdate; + final double? maxChildWidth; + @override InnerDrawerState createState() => InnerDrawerState(); } @@ -441,7 +444,10 @@ class InnerDrawerState extends State with SingleTickerProviderState final invC = _invisibleCover(); final Widget scaffoldChild = Stack( - children: [widget.scaffold, if (invC != null) invC else null].whereType().toList(), + children: [ + widget.scaffold, + if (invC != null) invC, + ], ); Widget container = DecoratedBox( @@ -531,8 +537,14 @@ class InnerDrawerState extends State with SingleTickerProviderState child: child, ); } + final w = widget.proportionalChildArea ? _width - _widthWithOffset : _width; + final maxW = widget.maxChildWidth; final Widget container = SizedBox( - width: widget.proportionalChildArea ? _width - _widthWithOffset : _width, + width: maxW == null + ? w + : w > maxW + ? maxW + : w, height: MediaQuery.sizeOf(context).height, child: child, ); @@ -587,10 +599,15 @@ class InnerDrawerState extends State with SingleTickerProviderState } /// wFactor depends of offset and is used by the second Align that contains the Scaffold - final offset = 0.5 - _offset * 0.5; + final maxWidth = widget.maxChildWidth; + final screenWidth = MediaQuery.sizeOf(context).width; + final divider = maxWidth == null || maxWidth >= screenWidth ? 0.5 : 1 - (maxWidth / screenWidth); + final offset = divider - _offset * divider; //NEW //final double offset = 1 - _offset * 1; final wFactor = (_controller.value * (1 - offset)) + offset; + final leftChildTrigger = _trigger(AlignmentDirectional.centerStart, _leftChild); + final rightChildTrigger = _trigger(AlignmentDirectional.centerEnd, _rightChild); return DecoratedBox( decoration: widget.backgroundDecoration ?? @@ -610,7 +627,7 @@ class InnerDrawerState extends State with SingleTickerProviderState excludeFromSemantics: true, child: RepaintBoundary( child: Stack( - children: [ + children: [ ///Gradient Container( width: _controller.value == 0 || _animationType == InnerDrawerAnimation.linear ? 0 : null, @@ -626,9 +643,9 @@ class InnerDrawerState extends State with SingleTickerProviderState ), ///Trigger - _trigger(AlignmentDirectional.centerStart, _leftChild), - _trigger(AlignmentDirectional.centerEnd, _rightChild), - ].whereType().toList(), + if (leftChildTrigger != null) leftChildTrigger, + if (rightChildTrigger != null) rightChildTrigger, + ], ), ), ), diff --git a/lib/packages/miniplayer.dart b/lib/packages/miniplayer.dart index 0d3f5b33..5453819f 100644 --- a/lib/packages/miniplayer.dart +++ b/lib/packages/miniplayer.dart @@ -37,6 +37,7 @@ import 'package:namida/packages/lyrics_lrc_parsed_view.dart'; import 'package:namida/packages/miniplayer_raw.dart'; import 'package:namida/ui/dialogs/common_dialogs.dart'; import 'package:namida/ui/dialogs/set_lrc_dialog.dart'; +import 'package:namida/ui/widgets/animated_widgets.dart'; import 'package:namida/ui/widgets/artwork.dart'; import 'package:namida/ui/widgets/custom_widgets.dart'; import 'package:namida/ui/widgets/library/track_tile.dart'; @@ -603,7 +604,7 @@ class _NamidaMiniPlayerState extends State { child: AnimatedScale( duration: const Duration(milliseconds: 400), scale: isButtonHighlighed ? 0.97 : 1.0, - child: AnimatedContainer( + child: AnimatedDecoration( duration: const Duration(milliseconds: 400), decoration: BoxDecoration( color: isButtonHighlighed @@ -806,7 +807,7 @@ class _NamidaMiniPlayerState extends State { final fallbackQualityLabel = currentVideo?.nameInCache?.split('_').last; final qualityText = videoQuality == 0 ? fallbackQualityLabel ?? markText : '${videoQuality}p'; final framerateText = videoFramerate ?? ''; - return AnimatedContainer( + return AnimatedDecoration( duration: animationDuration, decoration: isMenuOpened.value ? BoxDecoration( diff --git a/lib/ui/dialogs/track_advanced_dialog.dart b/lib/ui/dialogs/track_advanced_dialog.dart index c36555df..ab20caa2 100644 --- a/lib/ui/dialogs/track_advanced_dialog.dart +++ b/lib/ui/dialogs/track_advanced_dialog.dart @@ -19,6 +19,7 @@ import 'package:namida/core/icon_fonts/broken_icons.dart'; import 'package:namida/core/namida_converter_ext.dart'; import 'package:namida/core/translations/language.dart'; import 'package:namida/ui/dialogs/track_clear_dialog.dart'; +import 'package:namida/ui/widgets/animated_widgets.dart'; import 'package:namida/ui/widgets/custom_widgets.dart'; import 'package:namida/ui/widgets/expandable_box.dart'; import 'package:namida/ui/widgets/library/track_tile.dart'; @@ -487,7 +488,7 @@ void _showTrackColorPaletteDialog({ const SizedBox(width: 12.0), Expanded( child: Obx( - () => AnimatedContainer( + () => AnimatedSizedBox( duration: const Duration(milliseconds: 200), decoration: BoxDecoration( color: finalColorToBeUsed.value, diff --git a/lib/ui/pages/equalizer_page.dart b/lib/ui/pages/equalizer_page.dart index 2b3c5be2..e0996bc0 100644 --- a/lib/ui/pages/equalizer_page.dart +++ b/lib/ui/pages/equalizer_page.dart @@ -14,6 +14,7 @@ import 'package:namida/core/extensions.dart'; import 'package:namida/core/icon_fonts/broken_icons.dart'; import 'package:namida/core/namida_converter_ext.dart'; import 'package:namida/core/translations/language.dart'; +import 'package:namida/ui/widgets/animated_widgets.dart'; import 'package:namida/ui/widgets/custom_widgets.dart'; class EqualizerPage extends StatefulWidget { @@ -197,7 +198,11 @@ class EqualizerPageState extends State with WidgetsBindingObserve }, child: Text( e.value, - style: context.textTheme.displaySmall?.copyWith(fontWeight: FontWeight.w700, fontSize: 13.5.multipliedFontScale), + style: context.textTheme.displaySmall?.copyWith( + color: _activePreset.value == e.value ? Colors.white.withOpacity(0.7) : null, + fontWeight: FontWeight.w700, + fontSize: 13.5.multipliedFontScale, + ), ), ), ), @@ -637,20 +642,21 @@ class _VerticalSliderState extends State { ), Positioned( bottom: 0, - child: SizedBox( + child: AnimatedSizedBox( + duration: const Duration(milliseconds: 50), height: height, width: 8.0, - child: DecoratedBox( - decoration: BoxDecoration( - color: context.theme.colorScheme.primary.withOpacity(0.5), - borderRadius: const BorderRadius.all( - Radius.circular(12.0), - ), + animateWidth: false, + decoration: BoxDecoration( + color: context.theme.colorScheme.primary.withOpacity(0.5), + borderRadius: const BorderRadius.all( + Radius.circular(12.0), ), ), ), ), - Positioned( + AnimatedPositioned( + duration: const Duration(milliseconds: 50), bottom: height - circleHeight / 2, child: Obx( () => AnimatedScale( diff --git a/lib/ui/pages/home_page.dart b/lib/ui/pages/home_page.dart index 4ecf4953..81185450 100644 --- a/lib/ui/pages/home_page.dart +++ b/lib/ui/pages/home_page.dart @@ -25,6 +25,7 @@ import 'package:namida/core/icon_fonts/broken_icons.dart'; import 'package:namida/core/namida_converter_ext.dart'; import 'package:namida/core/translations/language.dart'; import 'package:namida/ui/dialogs/common_dialogs.dart'; +import 'package:namida/ui/widgets/animated_widgets.dart'; import 'package:namida/ui/widgets/artwork.dart'; import 'package:namida/ui/widgets/custom_widgets.dart'; import 'package:namida/ui/widgets/library/album_card.dart'; @@ -424,18 +425,20 @@ class _HomePageState extends State with SingleTickerProviderStateMixin _updateSameTimeNYearsAgo(DateTime.now(), e); if (mounted) setState(() {}); }, - child: AnimatedContainer( + child: AnimatedDecoration( duration: const Duration(milliseconds: 250), - padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 6.0), decoration: BoxDecoration( color: currentYearLostMemories == e ? CurrentColor.inst.currentColorScheme.withAlpha(160) : context.theme.cardColor, borderRadius: BorderRadius.circular(8.0.multipliedRadius), ), - child: Text( - '$e', - style: context.textTheme.displaySmall?.copyWith( - color: currentYearLostMemories == e ? Colors.white.withAlpha(240) : null, - fontWeight: FontWeight.w600, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 6.0), + child: Text( + '$e', + style: context.textTheme.displaySmall?.copyWith( + color: currentYearLostMemories == e ? Colors.white.withAlpha(240) : null, + fontWeight: FontWeight.w600, + ), ), ), ), @@ -920,20 +923,22 @@ class _MixesCardState extends State<_MixesCard> { int alpha = 255, double blur = 0.0, }) { - return AnimatedContainer( - margin: EdgeInsets.only(top: topPadding), - duration: const Duration(milliseconds: 300), - width: widget.width - horizontalPadding, - height: double.infinity, - decoration: BoxDecoration( - color: _cardColor?.withAlpha(alpha), - border: Border.all(color: context.theme.scaffoldBackgroundColor.withAlpha(alpha)), - borderRadius: BorderRadius.circular(10.0.multipliedRadius), - ), - child: NamidaBgBlur( - blur: blur, - child: Container( - color: Colors.transparent, + return Padding( + padding: EdgeInsets.only(top: topPadding), + child: AnimatedSizedBox( + duration: const Duration(milliseconds: 300), + width: widget.width - horizontalPadding, + height: double.infinity, + decoration: BoxDecoration( + color: _cardColor?.withAlpha(alpha), + border: Border.all(color: context.theme.scaffoldBackgroundColor.withAlpha(alpha)), + borderRadius: BorderRadius.circular(10.0.multipliedRadius), + ), + child: NamidaBgBlur( + blur: blur, + child: Container( + color: Colors.transparent, + ), ), ), ); @@ -1062,38 +1067,40 @@ class _MixesCardState extends State<_MixesCard> { return NamidaInkWell( onTap: () => onMixTap(artworkWidget(true, displayShimmer)), - child: AnimatedContainer( - width: widget.width, - margin: const EdgeInsets.symmetric(horizontal: 4.0), - duration: const Duration(milliseconds: 300), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - Expanded(child: thumbnailWidget), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 4.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - const SizedBox(height: 4.0), - Text( - widget.title, - style: context.textTheme.displayMedium, - maxLines: 1, - overflow: TextOverflow.ellipsis, - ), - Text( - widget.tracks.map((e) => e.title).join(', '), - style: context.textTheme.displaySmall?.copyWith(fontSize: 11.0.multipliedFontScale), - maxLines: 1, - overflow: TextOverflow.ellipsis, - ), - const SizedBox(height: 4.0), - ], - ), - ) - ], + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 4.0), + child: AnimatedSizedBox( + width: widget.width, + duration: const Duration(milliseconds: 300), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + Expanded(child: thumbnailWidget), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 4.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const SizedBox(height: 4.0), + Text( + widget.title, + style: context.textTheme.displayMedium, + maxLines: 1, + overflow: TextOverflow.ellipsis, + ), + Text( + widget.tracks.map((e) => e.title).join(', '), + style: context.textTheme.displaySmall?.copyWith(fontSize: 11.0.multipliedFontScale), + maxLines: 1, + overflow: TextOverflow.ellipsis, + ), + const SizedBox(height: 4.0), + ], + ), + ) + ], + ), ), ), ); diff --git a/lib/ui/pages/onboarding.dart b/lib/ui/pages/onboarding.dart index cfc45e7a..fa2cdd58 100644 --- a/lib/ui/pages/onboarding.dart +++ b/lib/ui/pages/onboarding.dart @@ -11,6 +11,7 @@ import 'package:namida/core/icon_fonts/broken_icons.dart'; import 'package:namida/core/translations/language.dart'; import 'package:namida/main.dart'; import 'package:namida/main_page_wrapper.dart'; +import 'package:namida/ui/widgets/animated_widgets.dart'; import 'package:namida/ui/widgets/custom_widgets.dart'; import 'package:namida/ui/widgets/settings/advanced_settings.dart'; import 'package:namida/ui/widgets/settings/backup_restore_settings.dart'; @@ -179,18 +180,20 @@ class _FirstRunConfigureScreenState extends State { ], ), Obx( - () => AnimatedContainer( - duration: const Duration(milliseconds: 200), + () => SizedBox( height: 12.0, width: context.width, - decoration: BoxDecoration( - boxShadow: [ - BoxShadow( - color: _shouldShowGlow.value ? CurrentColor.inst.color : Colors.transparent, - blurRadius: 12.0, - spreadRadius: 2.0, - ) - ], + child: AnimatedDecoration( + duration: const Duration(milliseconds: 200), + decoration: BoxDecoration( + boxShadow: [ + BoxShadow( + color: _shouldShowGlow.value ? CurrentColor.inst.color : Colors.transparent, + blurRadius: 12.0, + spreadRadius: 2.0, + ) + ], + ), ), ), ), diff --git a/lib/ui/pages/subpages/playlist_tracks_subpage.dart b/lib/ui/pages/subpages/playlist_tracks_subpage.dart index b83d3c2a..6f2313fa 100644 --- a/lib/ui/pages/subpages/playlist_tracks_subpage.dart +++ b/lib/ui/pages/subpages/playlist_tracks_subpage.dart @@ -22,6 +22,7 @@ import 'package:namida/ui/dialogs/common_dialogs.dart'; import 'package:namida/ui/dialogs/general_popup_dialog.dart'; import 'package:namida/ui/dialogs/track_listens_dialog.dart'; import 'package:namida/ui/pages/subpages/most_played_subpage.dart'; +import 'package:namida/ui/widgets/animated_widgets.dart'; import 'package:namida/ui/widgets/custom_widgets.dart'; import 'package:namida/ui/widgets/library/multi_artwork_container.dart'; import 'package:namida/ui/widgets/library/track_tile.dart'; @@ -514,13 +515,18 @@ class ThreeLineSmallContainers extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.center, children: List.filled( 3, - AnimatedContainer( - duration: const Duration(milliseconds: 300), - curve: Curves.fastEaseInToSlowEaseOut, - width: enabled ? 9.0 : 2.0, - height: 1.2, - margin: const EdgeInsets.symmetric(vertical: 1), - color: color ?? context.theme.listTileTheme.iconColor?.withAlpha(120), + Padding( + padding: const EdgeInsets.symmetric(vertical: 1), + child: AnimatedSizedBox( + duration: const Duration(milliseconds: 300), + curve: Curves.fastEaseInToSlowEaseOut, + width: enabled ? 9.0 : 2.0, + height: 1.2, + animateHeight: false, + decoration: BoxDecoration( + color: color ?? context.theme.listTileTheme.iconColor?.withAlpha(120), + ), + ), ), ), ); diff --git a/lib/ui/widgets/animated_widgets.dart b/lib/ui/widgets/animated_widgets.dart new file mode 100644 index 00000000..d98ece07 --- /dev/null +++ b/lib/ui/widgets/animated_widgets.dart @@ -0,0 +1,98 @@ +import 'dart:ui' as ui; + +import 'package:flutter/material.dart'; + +class AnimatedDecoration extends ImplicitlyAnimatedWidget { + final Widget? child; + final Decoration? decoration; + final Matrix4? transform; + + const AnimatedDecoration({ + super.key, + required this.decoration, + this.transform, + this.child, + super.curve, + required super.duration, + super.onEnd, + }); + + @override + AnimatedWidgetBaseState createState() => _AnimatedDecorationState(); +} + +class _AnimatedDecorationState extends AnimatedWidgetBaseState { + DecorationTween? _decoration; + Matrix4Tween? _transform; + + @override + void forEachTween(TweenVisitor visitor) { + _decoration = visitor(_decoration, widget.decoration, (dynamic value) => DecorationTween(begin: value as Decoration)) as DecorationTween?; + _transform = visitor(_transform, widget.transform, (dynamic value) => Matrix4Tween(begin: value as Matrix4)) as Matrix4Tween?; + } + + @override + Widget build(BuildContext context) { + return DecoratedBox( + decoration: _decoration?.evaluate(animation) ?? const BoxDecoration(), + child: widget.child, + ); + } +} + +class AnimatedSizedBox extends ImplicitlyAnimatedWidget { + final Widget? child; + final Decoration? decoration; + final double? width; + final double? height; + final bool animateWidth; + final bool animateHeight; + + const AnimatedSizedBox({ + super.key, + this.decoration, + this.width, + this.height, + this.animateWidth = true, + this.animateHeight = true, + this.child, + super.curve, + required super.duration, + super.onEnd, + }); + + @override + AnimatedWidgetBaseState createState() => _AnimatedSizedBoxState(); +} + +class _AnimatedSizedBoxState extends AnimatedWidgetBaseState { + DecorationTween? _decoration; + DoubleTween? _width; + DoubleTween? _height; + + @override + void forEachTween(TweenVisitor visitor) { + _decoration = visitor(_decoration, widget.decoration, (dynamic value) => DecorationTween(begin: value as Decoration)) as DecorationTween?; + if (widget.animateWidth) _width = visitor(_width, widget.width, (dynamic value) => DoubleTween(begin: value as double)) as DoubleTween?; + if (widget.animateHeight) _height = visitor(_height, widget.height, (dynamic value) => DoubleTween(begin: value as double)) as DoubleTween?; + } + + @override + Widget build(BuildContext context) { + return DecoratedBox( + decoration: _decoration?.evaluate(animation) ?? const BoxDecoration(), + child: SizedBox( + width: widget.animateWidth ? _width?.evaluate(animation) : widget.width, + height: widget.animateHeight ? _height?.evaluate(animation) : widget.height, + child: widget.child, + ), + ); + } +} + +class DoubleTween extends Tween { + DoubleTween({super.begin, super.end}); + + @override + double? lerp(double t) => ui.lerpDouble(begin, end, t); +} diff --git a/lib/ui/widgets/custom_widgets.dart b/lib/ui/widgets/custom_widgets.dart index 0f17991f..13e8fb03 100644 --- a/lib/ui/widgets/custom_widgets.dart +++ b/lib/ui/widgets/custom_widgets.dart @@ -37,6 +37,7 @@ import 'package:namida/packages/scroll_physics_modified.dart'; import 'package:namida/ui/dialogs/setting_dialog_with_text_field.dart'; import 'package:namida/ui/pages/about_page.dart'; import 'package:namida/ui/pages/settings_page.dart'; +import 'package:namida/ui/widgets/animated_widgets.dart'; import 'package:namida/ui/widgets/library/track_tile.dart'; import 'package:namida/ui/widgets/settings/extra_settings.dart'; @@ -113,7 +114,7 @@ class CustomSwitch extends StatelessWidget { this.height = 21.0, this.width = 40.0, this.circleColor, - this.durationInMillisecond = 400, + this.durationInMillisecond = 300, this.bgColor, this.shadowColor, this.passedColor, @@ -122,38 +123,44 @@ class CustomSwitch extends StatelessWidget { @override Widget build(BuildContext context) { final finalColor = passedColor ?? CurrentColor.inst.color; - return AnimatedContainer( + return SizedBox( width: width, height: height, - duration: Duration(milliseconds: durationInMillisecond), - padding: EdgeInsets.symmetric(horizontal: width / 10), - decoration: BoxDecoration( - color: (active - ? bgColor ?? Color.alphaBlend(finalColor.withAlpha(180), context.theme.colorScheme.background).withAlpha(140) - // : context.theme.scaffoldBackgroundColor.withAlpha(34) - : Color.alphaBlend(context.theme.scaffoldBackgroundColor.withAlpha(60), context.theme.disabledColor)), - borderRadius: BorderRadius.circular(30.0.multipliedRadius), - boxShadow: [ - BoxShadow( - offset: const Offset(0, 2), - blurRadius: active ? 8 : 2, - spreadRadius: 0, - color: (shadowColor ?? Color.alphaBlend(finalColor.withAlpha(180), context.theme.colorScheme.background)).withOpacity(active ? 0.8 : 0.3), - ), - ], - ), - child: AnimatedAlign( + child: AnimatedDecoration( duration: Duration(milliseconds: durationInMillisecond), - alignment: active ? Alignment.centerRight : Alignment.centerLeft, - child: Container( - width: width / 3, - height: height / 1.5, - decoration: BoxDecoration( - color: circleColor ?? Colors.white.withAlpha(222), - borderRadius: BorderRadius.circular(30.0.multipliedRadius), - // boxShadow: [ - // BoxShadow(color: Colors.black.withAlpha(100), spreadRadius: 1, blurRadius: 4, offset: Offset(0, 2)), - // ], + decoration: BoxDecoration( + color: (active + ? bgColor ?? Color.alphaBlend(finalColor.withAlpha(180), context.theme.colorScheme.background).withAlpha(140) + // : context.theme.scaffoldBackgroundColor.withAlpha(34) + : Color.alphaBlend(context.theme.scaffoldBackgroundColor.withAlpha(60), context.theme.disabledColor)), + borderRadius: BorderRadius.circular(30.0.multipliedRadius), + boxShadow: [ + BoxShadow( + offset: const Offset(0, 2), + blurRadius: active ? 8 : 2, + spreadRadius: 0, + color: (shadowColor ?? Color.alphaBlend(finalColor.withAlpha(180), context.theme.colorScheme.background)).withOpacity(active ? 0.8 : 0.3), + ), + ], + ), + child: Padding( + padding: EdgeInsets.symmetric(horizontal: width / 10), + child: AnimatedAlign( + duration: Duration(milliseconds: durationInMillisecond), + alignment: active ? Alignment.centerRight : Alignment.centerLeft, + child: SizedBox( + width: width / 3, + height: height / 1.5, + child: DecoratedBox( + decoration: BoxDecoration( + color: circleColor ?? Colors.white.withAlpha(222), + borderRadius: BorderRadius.circular(30.0.multipliedRadius), + // boxShadow: [ + // BoxShadow(color: Colors.black.withAlpha(100), spreadRadius: 1, blurRadius: 4, offset: Offset(0, 2)), + // ], + ), + ), + ), ), ), ), @@ -1516,7 +1523,7 @@ class NamidaPartyContainer extends StatelessWidget { return Obx( () { final finalScale = WaveformController.inst.getCurrentAnimatingScale(Player.inst.nowPlayingPosition); - return AnimatedContainer( + return AnimatedSizedBox( duration: const Duration(milliseconds: 400), height: height, width: width, @@ -1542,7 +1549,7 @@ class NamidaPartyContainer extends StatelessWidget { ? Row( children: [ ...firstHalf.map( - (e) => AnimatedContainer( + (e) => AnimatedSizedBox( duration: const Duration(milliseconds: 400), height: height, width: width ?? context.width / firstHalf.length, @@ -1562,7 +1569,7 @@ class NamidaPartyContainer extends StatelessWidget { : Column( children: [ ...secondHalf.map( - (e) => AnimatedContainer( + (e) => AnimatedSizedBox( duration: const Duration(milliseconds: 400), height: height ?? context.height / secondHalf.length, width: width, @@ -1855,7 +1862,7 @@ class NamidaDrawerListTile extends StatelessWidget { title, style: context.textTheme.displayMedium?.copyWith( color: enabled ? Colors.white.withAlpha(200) : null, - fontSize: context.width / 29, + fontSize: 15.0.multipliedFontScale, ), ), ], @@ -1974,7 +1981,7 @@ class NamidaLogoContainer extends StatelessWidget { 'Namida', style: context.textTheme.displayLarge?.copyWith( color: Color.alphaBlend(const Color(0xffdfc6a7).withAlpha(90), Colors.white), - fontSize: context.width / 26, + fontSize: 17.5.multipliedFontScale, ), ), ], diff --git a/lib/ui/widgets/expandable_box.dart b/lib/ui/widgets/expandable_box.dart index 5316c285..10662bf8 100644 --- a/lib/ui/widgets/expandable_box.dart +++ b/lib/ui/widgets/expandable_box.dart @@ -6,6 +6,7 @@ import 'package:namida/controller/scroll_search_controller.dart'; import 'package:namida/core/dimensions.dart'; import 'package:namida/core/extensions.dart'; import 'package:namida/core/icon_fonts/broken_icons.dart'; +import 'package:namida/ui/widgets/animated_widgets.dart'; import 'package:namida/ui/widgets/custom_widgets.dart'; import 'package:namida/ui/widgets/settings/extra_settings.dart'; @@ -47,9 +48,10 @@ class ExpandableBox extends StatelessWidget { AnimatedOpacity( opacity: isBarVisible ? 1 : 0, duration: const Duration(milliseconds: 400), - child: AnimatedContainer( + child: AnimatedSizedBox( duration: const Duration(milliseconds: 400), height: isBarVisible ? kExpandableBoxHeight : 0.0, + animateWidth: false, child: Row( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.max, @@ -86,9 +88,10 @@ class ExpandableBox extends StatelessWidget { duration: const Duration(milliseconds: 400), child: AnimatedSize( duration: const Duration(milliseconds: 400), - child: AnimatedContainer( + child: AnimatedSizedBox( duration: const Duration(milliseconds: 400), height: showSearchBox ? 58.0 : 0, + animateWidth: false, child: Row( children: [ const SizedBox(width: 12.0), diff --git a/lib/ui/widgets/selected_tracks_preview.dart b/lib/ui/widgets/selected_tracks_preview.dart index 73dd8a79..4bdd054a 100644 --- a/lib/ui/widgets/selected_tracks_preview.dart +++ b/lib/ui/widgets/selected_tracks_preview.dart @@ -15,6 +15,7 @@ import 'package:namida/core/translations/language.dart'; import 'package:namida/ui/dialogs/add_to_playlist_dialog.dart'; import 'package:namida/ui/dialogs/edit_tags_dialog.dart'; import 'package:namida/ui/dialogs/general_popup_dialog.dart'; +import 'package:namida/ui/widgets/animated_widgets.dart'; import 'package:namida/ui/widgets/custom_widgets.dart'; import 'package:namida/ui/widgets/library/track_tile.dart'; @@ -55,8 +56,7 @@ class SelectedTracksPreviewContainer extends StatelessWidget { stc.isMenuMinimized.value = true; } }, - child: AnimatedContainer( - clipBehavior: Clip.antiAlias, + child: AnimatedSizedBox( duration: const Duration(seconds: 1), curve: Curves.fastLinearToSlowEaseIn, height: stc.isMenuMinimized.value @@ -78,44 +78,46 @@ class SelectedTracksPreviewContainer extends StatelessWidget { ), ], ), - padding: const EdgeInsets.all(15), - child: stc.isMenuMinimized.value - ? const FittedBox(child: SelectedTracksRow()) - : Column( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.end, - children: [ - const FittedBox(child: SelectedTracksRow()), - const SizedBox( - height: 20, - ), - Expanded( - child: Container( - clipBehavior: Clip.antiAlias, - decoration: BoxDecoration(borderRadius: BorderRadius.circular(12)), - child: NamidaListView( - itemExtents: stc.selectedTracks.toTrackItemExtents(), - itemCount: stc.selectedTracks.length, - onReorder: (oldIndex, newIndex) => stc.reorderTracks(oldIndex, newIndex), - padding: EdgeInsets.zero, - itemBuilder: (context, i) { - return Dismissible( - key: ValueKey(stc.selectedTracks[i]), - onDismissed: (direction) => stc.removeTrack(i), - child: TrackTile( - key: Key('$i${stc.selectedTracks[i].track.path}'), - index: i, - trackOrTwd: stc.selectedTracks[i], - displayRightDragHandler: true, - queueSource: QueueSource.selectedTracks, - ), - ); - }, + child: Padding( + padding: const EdgeInsets.all(16.0), + child: stc.isMenuMinimized.value + ? const FittedBox(child: SelectedTracksRow()) + : Column( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.end, + children: [ + const FittedBox(child: SelectedTracksRow()), + const SizedBox( + height: 20, + ), + Expanded( + child: Container( + clipBehavior: Clip.antiAlias, + decoration: BoxDecoration(borderRadius: BorderRadius.circular(12)), + child: NamidaListView( + itemExtents: stc.selectedTracks.toTrackItemExtents(), + itemCount: stc.selectedTracks.length, + onReorder: (oldIndex, newIndex) => stc.reorderTracks(oldIndex, newIndex), + padding: EdgeInsets.zero, + itemBuilder: (context, i) { + return Dismissible( + key: ValueKey(stc.selectedTracks[i]), + onDismissed: (direction) => stc.removeTrack(i), + child: TrackTile( + key: Key('$i${stc.selectedTracks[i].track.path}'), + index: i, + trackOrTwd: stc.selectedTracks[i], + displayRightDragHandler: true, + queueSource: QueueSource.selectedTracks, + ), + ); + }, + ), ), ), - ), - ], - ), + ], + ), + ), ), ), ], diff --git a/lib/ui/widgets/video_widget.dart b/lib/ui/widgets/video_widget.dart index baf51721..d0d4da56 100644 --- a/lib/ui/widgets/video_widget.dart +++ b/lib/ui/widgets/video_widget.dart @@ -562,7 +562,7 @@ class NamidaVideoControlsState extends State with TickerPro final horizontalControlsPadding = widget.isFullScreen ? inLandscape ? const EdgeInsets.symmetric(horizontal: 32.0, vertical: 12.0) // lanscape videos - : const EdgeInsets.symmetric(horizontal: 12.0, vertical: 32.0) // vertical videos + : const EdgeInsets.symmetric(horizontal: 12.0, vertical: 24.0) // vertical videos : const EdgeInsets.symmetric(horizontal: 2.0, vertical: 2.0); final itemsColor = Colors.white.withAlpha(200); final shouldShowSliders = _canShowControls && widget.isFullScreen; diff --git a/lib/ui/widgets/waveform.dart b/lib/ui/widgets/waveform.dart index 241be7a6..f3ff443e 100644 --- a/lib/ui/widgets/waveform.dart +++ b/lib/ui/widgets/waveform.dart @@ -4,6 +4,7 @@ import 'package:get/get.dart'; import 'package:namida/controller/namida_channel.dart'; import 'package:namida/controller/waveform_controller.dart'; import 'package:namida/core/extensions.dart'; +import 'package:namida/ui/widgets/animated_widgets.dart'; bool themeCanRebuildWaveform = false; @@ -146,10 +147,11 @@ class NamidaWaveBars extends StatelessWidget { mainAxisSize: MainAxisSize.max, children: [ ...waveList.map( - (e) => AnimatedContainer( + (e) => AnimatedSizedBox( duration: Duration(milliseconds: animationDurationMS), height: e.clamp(barMinHeight, barMaxHeight), width: barWidth, + animateWidth: false, curve: animationCurve, decoration: BoxDecoration( borderRadius: BorderRadius.circular(borderRadius.multipliedRadius), diff --git a/lib/youtube/pages/yt_channels_page.dart b/lib/youtube/pages/yt_channels_page.dart index c1d9c045..621b7621 100644 --- a/lib/youtube/pages/yt_channels_page.dart +++ b/lib/youtube/pages/yt_channels_page.dart @@ -8,6 +8,7 @@ import 'package:namida/core/dimensions.dart'; import 'package:namida/core/extensions.dart'; import 'package:namida/core/icon_fonts/broken_icons.dart'; import 'package:namida/core/translations/language.dart'; +import 'package:namida/ui/widgets/animated_widgets.dart'; import 'package:namida/ui/widgets/custom_widgets.dart'; import 'package:namida/ui/widgets/settings/extra_settings.dart'; import 'package:namida/youtube/class/youtube_subscription.dart'; @@ -266,9 +267,10 @@ class _YoutubeChannelsPageState extends YoutubeChannelController AnimatedContainer( + () => AnimatedSizedBox( duration: const Duration(milliseconds: 200), width: context.width, + animateWidth: false, height: listHeight, child: Container( padding: EdgeInsets.only(bottom: _listBottomPadding, top: _listTopPadding),