Skip to content

Commit

Permalink
perf: some ui tweakies
Browse files Browse the repository at this point in the history 
+ AnimatedSizedBox instead of AnimatedContainer
  • Loading branch information
@MSOB7YY
MSOB7YY committed Feb 14, 2024
1 parent 6b147a2 commit 69cb045
Show file tree
Hide file tree
Showing 15 changed files with 324 additions and 168 deletions.
3 changes: 2 additions & 1 deletion lib/main_page_wrapper.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,9 @@ class _MainPageWrapperState extends State<MainPageWrapper> {
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: [
Expand Down
31 changes: 24 additions & 7 deletions lib/packages/inner_drawer.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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();
}
Expand Down Expand Up @@ -441,7 +444,10 @@ class InnerDrawerState extends State<InnerDrawer> with SingleTickerProviderState
final invC = _invisibleCover();

final Widget scaffoldChild = Stack(
children: <Widget?>[widget.scaffold, if (invC != null) invC else null].whereType<Widget>().toList(),
children: [
widget.scaffold,
if (invC != null) invC,
],
);

Widget container = DecoratedBox(
Expand Down Expand Up @@ -531,8 +537,14 @@ class InnerDrawerState extends State<InnerDrawer> 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,
);
Expand Down Expand Up @@ -587,10 +599,15 @@ class InnerDrawerState extends State<InnerDrawer> 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 ??
Expand All @@ -610,7 +627,7 @@ class InnerDrawerState extends State<InnerDrawer> with SingleTickerProviderState
excludeFromSemantics: true,
child: RepaintBoundary(
child: Stack(
children: <Widget?>[
children: [
///Gradient
Container(
width: _controller.value == 0 || _animationType == InnerDrawerAnimation.linear ? 0 : null,
Expand All @@ -626,9 +643,9 @@ class InnerDrawerState extends State<InnerDrawer> with SingleTickerProviderState
),

///Trigger
_trigger(AlignmentDirectional.centerStart, _leftChild),
_trigger(AlignmentDirectional.centerEnd, _rightChild),
].whereType<Widget>().toList(),
if (leftChildTrigger != null) leftChildTrigger,
if (rightChildTrigger != null) rightChildTrigger,
],
),
),
),
Expand Down
5 changes: 3 additions & 2 deletions lib/packages/miniplayer.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -603,7 +604,7 @@ class _NamidaMiniPlayerState extends State<NamidaMiniPlayer> {
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
Expand Down Expand Up @@ -806,7 +807,7 @@ class _NamidaMiniPlayerState extends State<NamidaMiniPlayer> {
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(
Expand Down
3 changes: 2 additions & 1 deletion lib/ui/dialogs/track_advanced_dialog.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down
24 changes: 15 additions & 9 deletions lib/ui/pages/equalizer_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -197,7 +198,11 @@ class EqualizerPageState extends State<EqualizerPage> 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,
),
),
),
),
Expand Down Expand Up @@ -637,20 +642,21 @@ class _VerticalSliderState extends State<VerticalSlider> {
),
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(
Expand Down
113 changes: 60 additions & 53 deletions lib/ui/pages/home_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -424,18 +425,20 @@ class _HomePageState extends State<HomePage> 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,
),
),
),
),
Expand Down Expand Up @@ -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,
),
),
),
);
Expand Down Expand Up @@ -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),
],
),
)
],
),
),
),
);
Expand Down
23 changes: 13 additions & 10 deletions lib/ui/pages/onboarding.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -179,18 +180,20 @@ class _FirstRunConfigureScreenState extends State<FirstRunConfigureScreen> {
],
),
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,
)
],
),
),
),
),
Expand Down
Loading

0 comments on commit 69cb045

Please sign in to comment.