From ced85d3f0c68a6e89ab7451f40091452e489528c Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Tue, 24 Dec 2024 21:33:24 +0600 Subject: [PATCH] chore: fix scaling issue in android and status bar being black --- .../horizontal_playbutton_card_view.dart | 12 ++- .../playbutton_view/playbutton_card.dart | 20 ++-- .../playbutton_view/playbutton_tile.dart | 17 ++-- .../playbutton_view/playbutton_view.dart | 7 +- lib/main.dart | 3 +- lib/modules/player/player_controls.dart | 2 +- lib/pages/home/genres/genres.dart | 91 ++++++++++--------- lib/pages/root/root_app.dart | 9 +- 8 files changed, 93 insertions(+), 68 deletions(-) diff --git a/lib/components/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart b/lib/components/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart index 0ebebea7..d37bc8a0 100644 --- a/lib/components/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart +++ b/lib/components/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart @@ -48,11 +48,15 @@ class HorizontalPlaybuttonCardView extends HookWidget { Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - DefaultTextStyle( - style: context.theme.typography.h4.copyWith( - color: context.theme.colorScheme.foreground, + Flexible( + child: DefaultTextStyle( + style: context.theme.typography.h4.copyWith( + color: context.theme.colorScheme.foreground, + ), + maxLines: 1, + overflow: TextOverflow.ellipsis, + child: title, ), - child: title, ), if (titleTrailing != null) titleTrailing!, ], diff --git a/lib/components/playbutton_view/playbutton_card.dart b/lib/components/playbutton_view/playbutton_card.dart index 849bab2a..21016d57 100644 --- a/lib/components/playbutton_view/playbutton_card.dart +++ b/lib/components/playbutton_view/playbutton_card.dart @@ -1,4 +1,5 @@ import 'package:shadcn_flutter/shadcn_flutter.dart'; +import 'package:shadcn_flutter/shadcn_flutter_extension.dart'; import 'package:spotube/collections/spotube_icons.dart'; import 'package:spotube/components/image/universal_image.dart'; import 'package:spotube/extensions/string.dart'; @@ -32,16 +33,23 @@ class PlaybuttonCard extends StatelessWidget { @override Widget build(BuildContext context) { final unescapeHtml = description?.unescapeHtml().cleanHtml() ?? ""; + final scale = context.theme.scaling; - return Container( - width: 150, + return SizedBox( + width: 150 * scale, child: CardImage( image: Stack( children: [ - UniversalImage( - path: imageUrl, - height: 150, - fit: BoxFit.cover, + Container( + width: 150 * scale, + height: 150 * scale, + decoration: BoxDecoration( + borderRadius: context.theme.borderRadiusMd, + image: DecorationImage( + image: UniversalImage.imageProvider(imageUrl), + fit: BoxFit.cover, + ), + ), ), StatedWidget.builder( builder: (context, states) { diff --git a/lib/components/playbutton_view/playbutton_tile.dart b/lib/components/playbutton_view/playbutton_tile.dart index 3f9d89fe..e06f3689 100644 --- a/lib/components/playbutton_view/playbutton_tile.dart +++ b/lib/components/playbutton_view/playbutton_tile.dart @@ -33,15 +33,18 @@ class PlaybuttonTile extends StatelessWidget { @override Widget build(BuildContext context) { final cleanDescription = description?.unescapeHtml().cleanHtml() ?? ""; + final scale = context.theme.scaling; return Button.ghost( - leading: ClipRRect( - borderRadius: context.theme.borderRadiusMd, - child: UniversalImage( - path: imageUrl, - width: 40, - height: 40, - fit: BoxFit.cover, + leading: Container( + width: 50 * scale, + height: 50 * scale, + decoration: BoxDecoration( + borderRadius: context.theme.borderRadiusMd, + image: DecorationImage( + image: UniversalImage.imageProvider(imageUrl), + fit: BoxFit.cover, + ), ), ), trailing: Row( diff --git a/lib/components/playbutton_view/playbutton_view.dart b/lib/components/playbutton_view/playbutton_view.dart index 52cfb592..7520f313 100644 --- a/lib/components/playbutton_view/playbutton_view.dart +++ b/lib/components/playbutton_view/playbutton_view.dart @@ -1,5 +1,6 @@ import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:shadcn_flutter/shadcn_flutter.dart'; +import 'package:shadcn_flutter/shadcn_flutter_extension.dart'; import 'package:skeletonizer/skeletonizer.dart'; import 'package:spotube/collections/spotube_icons.dart'; import 'package:spotube/components/playbutton_view/playbutton_card.dart'; @@ -98,9 +99,9 @@ class PlaybuttonView extends StatelessWidget { switch ((isGrid.value, isLoading)) { (true, _) => SliverGrid.builder( itemCount: isLoading ? 6 : itemCount + 1, - gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent( - maxCrossAxisExtent: 150, - mainAxisExtent: 225, + gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( + maxCrossAxisExtent: 150 * context.theme.scaling, + mainAxisExtent: 225 * context.theme.scaling, crossAxisSpacing: 8, mainAxisSpacing: 8, ), diff --git a/lib/main.dart b/lib/main.dart index cae1e9fe..0b84d38d 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -210,13 +210,13 @@ class Spotube extends HookConsumerWidget { return child; }, + scaling: const AdaptiveScaling(1), theme: ThemeData( radius: .5, iconTheme: const IconThemeProperties(), colorScheme: ColorSchemes.lightBlue(), surfaceOpacity: .8, surfaceBlur: 10, - typography: const Typography.geist(), ), darkTheme: ThemeData( radius: .5, @@ -224,7 +224,6 @@ class Spotube extends HookConsumerWidget { colorScheme: ColorSchemes.darkNeutral(), surfaceOpacity: .8, surfaceBlur: 10, - typography: const Typography.geist(), ), themeMode: themeMode, shortcuts: { diff --git a/lib/modules/player/player_controls.dart b/lib/modules/player/player_controls.dart index 3c1cd503..acc3064e 100644 --- a/lib/modules/player/player_controls.dart +++ b/lib/modules/player/player_controls.dart @@ -3,7 +3,7 @@ import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:media_kit/media_kit.dart'; import 'package:palette_generator/palette_generator.dart'; -import 'package:shadcn_flutter/shadcn_flutter.dart' hide ThemeData; +import 'package:shadcn_flutter/shadcn_flutter.dart'; import 'package:spotube/collections/spotube_icons.dart'; import 'package:spotube/collections/intents.dart'; diff --git a/lib/pages/home/genres/genres.dart b/lib/pages/home/genres/genres.dart index ed9d9351..062852e8 100644 --- a/lib/pages/home/genres/genres.dart +++ b/lib/pages/home/genres/genres.dart @@ -1,10 +1,12 @@ import 'dart:math'; import 'package:auto_size_text/auto_size_text.dart'; -import 'package:flutter/material.dart'; + import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:go_router/go_router.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:shadcn_flutter/shadcn_flutter.dart'; +import 'package:shadcn_flutter/shadcn_flutter_extension.dart'; import 'package:spotube/collections/gradients.dart'; import 'package:spotube/components/titlebar/titlebar.dart'; import 'package:spotube/extensions/constrains.dart'; @@ -18,19 +20,19 @@ class GenrePage extends HookConsumerWidget { @override Widget build(BuildContext context, ref) { - final ThemeData(:textTheme) = Theme.of(context); final scrollController = useScrollController(); final categories = ref.watch(categoriesProvider); final mediaQuery = MediaQuery.of(context); - return Scaffold( - appBar: TitleBar( - title: Text(context.l10n.explore_genres), - automaticallyImplyLeading: true, - ), - body: SafeArea( - top: false, + return SafeArea( + child: Scaffold( + headers: [ + TitleBar( + title: Text(context.l10n.explore_genres), + automaticallyImplyLeading: true, + ) + ], child: GridView.builder( padding: const EdgeInsets.all(12), controller: scrollController, @@ -45,9 +47,8 @@ class GenrePage extends HookConsumerWidget { itemBuilder: (context, index) { final category = categories.asData!.value[index]; final gradient = gradients[Random().nextInt(gradients.length)]; - return InkWell( - borderRadius: BorderRadius.circular(8), - onTap: () { + return CardImage( + onPressed: () { context.pushNamed( GenrePlaylistsPage.name, pathParameters: { @@ -56,37 +57,45 @@ class GenrePage extends HookConsumerWidget { extra: category, ); }, - child: Ink( - padding: const EdgeInsets.all(8), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(8), - image: DecorationImage( - image: NetworkImage(category.icons!.first.url!), - fit: BoxFit.cover, - ), - gradient: gradient, - ), - child: Align( - alignment: Alignment.bottomCenter, - child: AutoSizeText( - category.name!, - style: textTheme.titleLarge?.copyWith( - color: Colors.white, - shadows: [ - // stroke shadow - const Shadow( - color: Colors.black, - offset: Offset(1, 1), - blurRadius: 2, - ), - ], + image: Stack( + children: [ + Container( + height: 300, + width: 250, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8), + image: DecorationImage( + image: NetworkImage(category.icons!.first.url!), + fit: BoxFit.cover, + ), + gradient: gradient, ), - maxLines: 1, - textAlign: TextAlign.center, - maxFontSize: textTheme.titleLarge!.fontSize!, - minFontSize: textTheme.titleMedium!.fontSize!, ), - ), + Positioned.fill( + bottom: 10, + child: Align( + alignment: Alignment.bottomCenter, + child: AutoSizeText( + category.name!, + style: context.theme.typography.h3.copyWith( + color: Colors.white, + shadows: [ + // stroke shadow + const Shadow( + color: Colors.black, + offset: Offset(1, 1), + blurRadius: 2, + ), + ], + ), + maxLines: 1, + textAlign: TextAlign.center, + maxFontSize: context.theme.typography.h3.fontSize!, + minFontSize: context.theme.typography.large.fontSize!, + ), + ), + ), + ], ), ); }, diff --git a/lib/pages/root/root_app.dart b/lib/pages/root/root_app.dart index 84c40a2f..606bba34 100644 --- a/lib/pages/root/root_app.dart +++ b/lib/pages/root/root_app.dart @@ -161,18 +161,19 @@ class RootApp extends HookConsumerWidget { useEndlessPlayback(ref); final backgroundColor = Theme.of(context).colorScheme.background; + final brightness = Theme.of(context).brightness; useEffect(() { SystemChrome.setSystemUIOverlayStyle( SystemUiOverlayStyle( statusBarColor: backgroundColor, // status bar color - statusBarIconBrightness: backgroundColor.computeLuminance() > 0.179 - ? Brightness.dark - : Brightness.light, + statusBarIconBrightness: brightness == Brightness.dark + ? Brightness.light + : Brightness.dark, ), ); return null; - }, [backgroundColor]); + }, [backgroundColor, brightness]); final navTileNames = useMemoized(() { return getSidebarTileList(context.l10n).map((s) => s.name).toList();