kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-13 07:55:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: fix scaling issue in android and status bar being black

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2024-12-24 21:33:24 +06:00
parent e2143a0625
commit ced85d3f0c
8 changed files with 93 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/components/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart
View File

@ -48,12 +48,16 @@ class HorizontalPlaybuttonCardView<T> extends HookWidget {
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
DefaultTextStyle( Flexible(
child: DefaultTextStyle(
style: context.theme.typography.h4.copyWith( style: context.theme.typography.h4.copyWith(
color: context.theme.colorScheme.foreground, color: context.theme.colorScheme.foreground,
), ),
maxLines: 1,
overflow: TextOverflow.ellipsis,
child: title, child: title,
), ),
),
if (titleTrailing != null) titleTrailing!, if (titleTrailing != null) titleTrailing!,
], ],
), ),

18
lib/components/playbutton_view/playbutton_card.dart
View File

@ -1,4 +1,5 @@
import 'package:shadcn_flutter/shadcn_flutter.dart'; 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/collections/spotube_icons.dart';
import 'package:spotube/components/image/universal_image.dart'; import 'package:spotube/components/image/universal_image.dart';
import 'package:spotube/extensions/string.dart'; import 'package:spotube/extensions/string.dart';
@ -32,17 +33,24 @@ class PlaybuttonCard extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final unescapeHtml = description?.unescapeHtml().cleanHtml() ?? ""; final unescapeHtml = description?.unescapeHtml().cleanHtml() ?? "";
final scale = context.theme.scaling;
return Container( return SizedBox(
width: 150, width: 150 * scale,
child: CardImage( child: CardImage(
image: Stack( image: Stack(
children: [ children: [
UniversalImage( Container(
path: imageUrl, width: 150 * scale,
height: 150, height: 150 * scale,
decoration: BoxDecoration(
borderRadius: context.theme.borderRadiusMd,
image: DecorationImage(
image: UniversalImage.imageProvider(imageUrl),
fit: BoxFit.cover, fit: BoxFit.cover,
), ),
),
),
StatedWidget.builder( StatedWidget.builder(
builder: (context, states) { builder: (context, states) {
return Positioned( return Positioned(

13
lib/components/playbutton_view/playbutton_tile.dart
View File

@ -33,17 +33,20 @@ class PlaybuttonTile extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final cleanDescription = description?.unescapeHtml().cleanHtml() ?? ""; final cleanDescription = description?.unescapeHtml().cleanHtml() ?? "";
final scale = context.theme.scaling;
return Button.ghost( return Button.ghost(
leading: ClipRRect( leading: Container(
width: 50 * scale,
height: 50 * scale,
decoration: BoxDecoration(
borderRadius: context.theme.borderRadiusMd, borderRadius: context.theme.borderRadiusMd,
child: UniversalImage( image: DecorationImage(
path: imageUrl, image: UniversalImage.imageProvider(imageUrl),
width: 40,
height: 40,
fit: BoxFit.cover, fit: BoxFit.cover,
), ),
), ),
),
trailing: Row( trailing: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [

7
lib/components/playbutton_view/playbutton_view.dart
View File

@ -1,5 +1,6 @@
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart'; import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
import 'package:skeletonizer/skeletonizer.dart'; import 'package:skeletonizer/skeletonizer.dart';
import 'package:spotube/collections/spotube_icons.dart'; import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/playbutton_view/playbutton_card.dart'; import 'package:spotube/components/playbutton_view/playbutton_card.dart';
@ -98,9 +99,9 @@ class PlaybuttonView extends StatelessWidget {
switch ((isGrid.value, isLoading)) { switch ((isGrid.value, isLoading)) {
(true, _) => SliverGrid.builder( (true, _) => SliverGrid.builder(
itemCount: isLoading ? 6 : itemCount + 1, itemCount: isLoading ? 6 : itemCount + 1,
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent( gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 150, maxCrossAxisExtent: 150 * context.theme.scaling,
mainAxisExtent: 225, mainAxisExtent: 225 * context.theme.scaling,
crossAxisSpacing: 8, crossAxisSpacing: 8,
mainAxisSpacing: 8, mainAxisSpacing: 8,
), ),

3
lib/main.dart
View File

@ -210,13 +210,13 @@ class Spotube extends HookConsumerWidget {
return child; return child;
}, },
scaling: const AdaptiveScaling(1),
theme: ThemeData( theme: ThemeData(
radius: .5, radius: .5,
iconTheme: const IconThemeProperties(), iconTheme: const IconThemeProperties(),
colorScheme: ColorSchemes.lightBlue(), colorScheme: ColorSchemes.lightBlue(),
surfaceOpacity: .8, surfaceOpacity: .8,
surfaceBlur: 10, surfaceBlur: 10,
typography: const Typography.geist(),
), ),
darkTheme: ThemeData( darkTheme: ThemeData(
radius: .5, radius: .5,
@ -224,7 +224,6 @@ class Spotube extends HookConsumerWidget {
colorScheme: ColorSchemes.darkNeutral(), colorScheme: ColorSchemes.darkNeutral(),
surfaceOpacity: .8, surfaceOpacity: .8,
surfaceBlur: 10, surfaceBlur: 10,
typography: const Typography.geist(),
), ),
themeMode: themeMode, themeMode: themeMode,
shortcuts: { shortcuts: {

2
lib/modules/player/player_controls.dart
View File

@ -3,7 +3,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:media_kit/media_kit.dart'; import 'package:media_kit/media_kit.dart';
import 'package:palette_generator/palette_generator.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/spotube_icons.dart';
import 'package:spotube/collections/intents.dart'; import 'package:spotube/collections/intents.dart';

39
lib/pages/home/genres/genres.dart
View File

@ -1,10 +1,12 @@
import 'dart:math'; import 'dart:math';
import 'package:auto_size_text/auto_size_text.dart'; import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.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/collections/gradients.dart';
import 'package:spotube/components/titlebar/titlebar.dart'; import 'package:spotube/components/titlebar/titlebar.dart';
import 'package:spotube/extensions/constrains.dart'; import 'package:spotube/extensions/constrains.dart';
@ -18,19 +20,19 @@ class GenrePage extends HookConsumerWidget {
@override @override
Widget build(BuildContext context, ref) { Widget build(BuildContext context, ref) {
final ThemeData(:textTheme) = Theme.of(context);
final scrollController = useScrollController(); final scrollController = useScrollController();
final categories = ref.watch(categoriesProvider); final categories = ref.watch(categoriesProvider);
final mediaQuery = MediaQuery.of(context); final mediaQuery = MediaQuery.of(context);
return Scaffold( return SafeArea(
appBar: TitleBar( child: Scaffold(
headers: [
TitleBar(
title: Text(context.l10n.explore_genres), title: Text(context.l10n.explore_genres),
automaticallyImplyLeading: true, automaticallyImplyLeading: true,
), )
body: SafeArea( ],
top: false,
child: GridView.builder( child: GridView.builder(
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(12),
controller: scrollController, controller: scrollController,
@ -45,9 +47,8 @@ class GenrePage extends HookConsumerWidget {
itemBuilder: (context, index) { itemBuilder: (context, index) {
final category = categories.asData!.value[index]; final category = categories.asData!.value[index];
final gradient = gradients[Random().nextInt(gradients.length)]; final gradient = gradients[Random().nextInt(gradients.length)];
return InkWell( return CardImage(
borderRadius: BorderRadius.circular(8), onPressed: () {
onTap: () {
context.pushNamed( context.pushNamed(
GenrePlaylistsPage.name, GenrePlaylistsPage.name,
pathParameters: { pathParameters: {
@ -56,8 +57,11 @@ class GenrePage extends HookConsumerWidget {
extra: category, extra: category,
); );
}, },
child: Ink( image: Stack(
padding: const EdgeInsets.all(8), children: [
Container(
height: 300,
width: 250,
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
image: DecorationImage( image: DecorationImage(
@ -66,11 +70,14 @@ class GenrePage extends HookConsumerWidget {
), ),
gradient: gradient, gradient: gradient,
), ),
),
Positioned.fill(
bottom: 10,
child: Align( child: Align(
alignment: Alignment.bottomCenter, alignment: Alignment.bottomCenter,
child: AutoSizeText( child: AutoSizeText(
category.name!, category.name!,
style: textTheme.titleLarge?.copyWith( style: context.theme.typography.h3.copyWith(
color: Colors.white, color: Colors.white,
shadows: [ shadows: [
// stroke shadow // stroke shadow
@ -83,11 +90,13 @@ class GenrePage extends HookConsumerWidget {
), ),
maxLines: 1, maxLines: 1,
textAlign: TextAlign.center, textAlign: TextAlign.center,
maxFontSize: textTheme.titleLarge!.fontSize!, maxFontSize: context.theme.typography.h3.fontSize!,
minFontSize: textTheme.titleMedium!.fontSize!, minFontSize: context.theme.typography.large.fontSize!,
), ),
), ),
), ),
],
),
); );
}, },
), ),

9
lib/pages/root/root_app.dart
View File

@ -161,18 +161,19 @@ class RootApp extends HookConsumerWidget {
useEndlessPlayback(ref); useEndlessPlayback(ref);
final backgroundColor = Theme.of(context).colorScheme.background; final backgroundColor = Theme.of(context).colorScheme.background;
final brightness = Theme.of(context).brightness;
useEffect(() { useEffect(() {
SystemChrome.setSystemUIOverlayStyle( SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle( SystemUiOverlayStyle(
statusBarColor: backgroundColor, // status bar color statusBarColor: backgroundColor, // status bar color
statusBarIconBrightness: backgroundColor.computeLuminance() > 0.179 statusBarIconBrightness: brightness == Brightness.dark
? Brightness.dark ? Brightness.light
: Brightness.light, : Brightness.dark,
), ),
); );
return null; return null;
}, [backgroundColor]); }, [backgroundColor, brightness]);
final navTileNames = useMemoized(() { final navTileNames = useMemoized(() {
return getSidebarTileList(context.l10n).map((s) => s.name).toList(); return getSidebarTileList(context.l10n).map((s) => s.name).toList();