Skip to content

Commit

Permalink
Merge pull request #323 from KRTirtho/experimental/platform_ui
Browse files Browse the repository at this point in the history 
Experimental/platform UI
  • Loading branch information
@KRTirtho
KRTirtho committed Nov 24, 2022
2 parents fa3eefa + 8cd3b9a commit a254e1e
Show file tree
Hide file tree
Showing 62 changed files with 1,930 additions and 1,494 deletions.
2 changes: 1 addition & 1 deletion .vscode/launch.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"name": "Flutter",
"type": "dart",
"request": "launch",
"program": "lib/main.dart"
"program": "${workspaceFolder}/lib/main.dart"
},
],
"compounds": []
Expand Down
68 changes: 57 additions & 11 deletions lib/components/Artist/ArtistCard.dart
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import 'package:auto_size_text/auto_size_text.dart';
import 'package:fluent_ui/fluent_ui.dart' hide Colors;
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:platform_ui/platform_ui.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/components/Shared/HoverBuilder.dart';
import 'package:spotube/components/Shared/UniversalImage.dart';
import 'package:spotube/hooks/usePlatformProperty.dart';
import 'package:spotube/utils/service_utils.dart';
import 'package:spotube/utils/type_conversion_utils.dart';

class ArtistCard extends StatelessWidget {
class ArtistCard extends HookWidget {
final Artist artist;
const ArtistCard(this.artist, {Key? key}) : super(key: key);

Expand All @@ -18,28 +22,70 @@ class ArtistCard extends StatelessWidget {
placeholder: ImagePlaceholder.artist,
),
);
final boxShadow = usePlatformProperty<BoxShadow?>(
(context) => PlatformProperty(
android: BoxShadow(
blurRadius: 10,
offset: const Offset(0, 3),
spreadRadius: 5,
color: Theme.of(context).shadowColor,
),
ios: null,
macos: null,
linux: BoxShadow(
blurRadius: 6,
color: Theme.of(context).shadowColor.withOpacity(0.3),
),
windows: null,
),
);

final splash = usePlatformProperty<InteractiveInkFeatureFactory?>(
(context) => PlatformProperty.only(
android: InkRipple.splashFactory,
other: NoSplash.splashFactory,
),
);

return SizedBox(
height: 240,
width: 200,
child: InkWell(
splashFactory: splash,
onTap: () {
ServiceUtils.navigate(context, "/artist/${artist.id}");
},
borderRadius: BorderRadius.circular(10),
customBorder: platform == TargetPlatform.windows
? Border.all(
color: FluentTheme.maybeOf(context)
?.micaBackgroundColor
.withOpacity(.7) ??
Colors.transparent,
width: 1,
)
: null,
borderRadius: BorderRadius.circular(
platform == TargetPlatform.windows ? 5 : 8,
),
child: HoverBuilder(builder: (context, isHovering) {
return Ink(
width: 200,
decoration: BoxDecoration(
color: Theme.of(context).backgroundColor,
borderRadius: BorderRadius.circular(8),
color: PlatformTheme.of(context).secondaryBackgroundColor,
borderRadius: BorderRadius.circular(
platform == TargetPlatform.windows ? 5 : 8,
),
boxShadow: [
BoxShadow(
blurRadius: 10,
offset: const Offset(0, 3),
spreadRadius: 5,
color: Theme.of(context).shadowColor,
)
if (boxShadow != null) boxShadow,
],
border: [TargetPlatform.windows, TargetPlatform.macOS]
.contains(platform)
? Border.all(
color: PlatformTheme.of(context).borderColor ??
Colors.transparent,
width: 1,
)
: null,
),
child: Padding(
padding: const EdgeInsets.all(15),
Expand Down Expand Up @@ -79,7 +125,7 @@ class ArtistCard extends StatelessWidget {
artist.name!,
maxLines: 2,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyLarge!.copyWith(
style: PlatformTextTheme.of(context).body?.copyWith(
fontWeight: FontWeight.bold,
),
),
Expand Down
80 changes: 43 additions & 37 deletions lib/components/Artist/ArtistProfile.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:platform_ui/platform_ui.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/components/Artist/ArtistAlbumList.dart';
import 'package:spotube/components/Artist/ArtistCard.dart';
Expand All @@ -30,13 +31,13 @@ class ArtistProfile extends HookConsumerWidget {
Widget build(BuildContext context, ref) {
SpotifyApi spotify = ref.watch(spotifyProvider);
final parentScrollController = useScrollController();
final textTheme = Theme.of(context).textTheme;
final textTheme = PlatformTheme.of(context).textTheme;
final chipTextVariant = useBreakpointValue(
sm: textTheme.bodySmall,
md: textTheme.bodyMedium,
lg: textTheme.headline6,
xl: textTheme.headline6,
xxl: textTheme.headline6,
sm: textTheme!.caption,
md: textTheme.body,
lg: textTheme.subheading,
xl: textTheme.headline,
xxl: textTheme.headline,
);

final avatarWidth = useBreakpointValue(
Expand All @@ -52,9 +53,9 @@ class ArtistProfile extends HookConsumerWidget {
final Playback playback = ref.watch(playbackProvider);

return SafeArea(
child: Scaffold(
appBar: const PageWindowTitleBar(
leading: BackButton(),
child: PlatformScaffold(
appBar: PageWindowTitleBar(
leading: const PlatformBackButton(),
),
body: HookBuilder(
builder: (context) {
Expand All @@ -67,7 +68,7 @@ class ArtistProfile extends HookConsumerWidget {
return const ShimmerArtistProfile();
} else if (artistsQuery.hasError) {
return Center(
child: Text(artistsQuery.error.toString()),
child: PlatformText(artistsQuery.error.toString()),
);
}

Expand Down Expand Up @@ -105,21 +106,22 @@ class ArtistProfile extends HookConsumerWidget {
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(50)),
child: Text(data.type!.toUpperCase(),
child: PlatformText(data.type!.toUpperCase(),
style: chipTextVariant?.copyWith(
color: Colors.white)),
),
Text(
PlatformText(
data.name!,
style: breakpoint.isSm
? textTheme.headline4
: textTheme.headline2,
? textTheme.subheading
: textTheme.headline,
),
Text(
PlatformText(
"${PrimitiveUtils.toReadableNumber(data.followers!.total!.toDouble())} followers",
style: breakpoint.isSm
? textTheme.bodyText1
: textTheme.headline5,
? textTheme.body
: textTheme.body
?.copyWith(fontWeight: FontWeight.bold),
),
const SizedBox(height: 20),
Row(
Expand All @@ -138,11 +140,12 @@ class ArtistProfile extends HookConsumerWidget {
return const SizedBox(
height: 20,
width: 20,
child: CircularProgressIndicator(),
child:
PlatformCircularProgressIndicator(),
);
}

return OutlinedButton(
return PlatformFilledButton(
onPressed: () async {
try {
isFollowingQuery.data!
Expand All @@ -168,15 +171,15 @@ class ArtistProfile extends HookConsumerWidget {
]);
}
},
child: Text(
child: PlatformText(
isFollowingQuery.data!
? "Following"
: "Follow",
),
);
},
),
IconButton(
PlatformIconButton(
icon: const Icon(Icons.share_rounded),
onPressed: () {
Clipboard.setData(
Expand All @@ -188,7 +191,7 @@ class ArtistProfile extends HookConsumerWidget {
const SnackBar(
width: 300,
behavior: SnackBarBehavior.floating,
content: Text(
content: PlatformText(
"Artist URL copied to clipboard",
textAlign: TextAlign.center,
),
Expand All @@ -213,10 +216,10 @@ class ArtistProfile extends HookConsumerWidget {
);

if (topTracksQuery.isLoading || !topTracksQuery.hasData) {
return const CircularProgressIndicator.adaptive();
return const PlatformCircularProgressIndicator();
} else if (topTracksQuery.hasError) {
return Center(
child: Text(topTracksQuery.error.toString()),
child: PlatformText(topTracksQuery.error.toString()),
);
}

Expand Down Expand Up @@ -250,21 +253,24 @@ class ArtistProfile extends HookConsumerWidget {
return Column(children: [
Row(
children: [
Text(
PlatformText(
"Top Tracks",
style: Theme.of(context).textTheme.headline4,
style:
PlatformTheme.of(context).textTheme?.headline,
),
Container(
margin: const EdgeInsets.symmetric(horizontal: 5),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(50),
),
child: IconButton(
icon: Icon(isPlaylistPlaying
? Icons.stop_rounded
: Icons.play_arrow_rounded),
color: Colors.white,
child: PlatformIconButton(
icon: Icon(
isPlaylistPlaying
? Icons.stop_rounded
: Icons.play_arrow_rounded,
color: Colors.white,
),
onPressed: () =>
playPlaylist(topTracks.toList()),
),
Expand All @@ -290,16 +296,16 @@ class ArtistProfile extends HookConsumerWidget {
},
),
const SizedBox(height: 50),
Text(
PlatformText(
"Albums",
style: Theme.of(context).textTheme.headline4,
style: PlatformTheme.of(context).textTheme?.headline,
),
const SizedBox(height: 10),
ArtistAlbumList(artistId),
const SizedBox(height: 20),
Text(
PlatformText(
"Fans also likes",
style: Theme.of(context).textTheme.headline4,
style: PlatformTheme.of(context).textTheme?.headline,
),
const SizedBox(height: 10),
HookBuilder(
Expand All @@ -310,10 +316,10 @@ class ArtistProfile extends HookConsumerWidget {
);

if (relatedArtists.isLoading || !relatedArtists.hasData) {
return const CircularProgressIndicator.adaptive();
return const PlatformCircularProgressIndicator();
} else if (relatedArtists.hasError) {
return Center(
child: Text(relatedArtists.error.toString()),
child: PlatformText(relatedArtists.error.toString()),
);
}

Expand Down
9 changes: 4 additions & 5 deletions lib/components/Category/CategoryCard.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart' hide Page;
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:platform_ui/platform_ui.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/components/LoaderShimmers/ShimmerPlaybuttonCard.dart';
import 'package:spotube/components/Playlist/PlaylistCard.dart';
Expand Down Expand Up @@ -46,15 +47,13 @@ class CategoryCard extends HookConsumerWidget {
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Text(
category.name ?? "Unknown",
style: Theme.of(context).textTheme.headline5,
),
PlatformText.headline(category.name ?? "Unknown"),
],
),
),
playlistQuery.hasError
? Text("Something Went Wrong\n${playlistQuery.errors.first}")
? PlatformText(
"Something Went Wrong\n${playlistQuery.errors.first}")
: SizedBox(
height: 245,
child: ScrollConfiguration(
Expand Down
6 changes: 5 additions & 1 deletion lib/components/Home/Genres.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,16 @@ import 'package:fl_query_hooks/fl_query_hooks.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:platform_ui/platform_ui.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/components/Category/CategoryCard.dart';
import 'package:spotube/components/LoaderShimmers/ShimmerCategories.dart';
import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
import 'package:spotube/components/Shared/Waypoint.dart';
import 'package:spotube/provider/SpotifyDI.dart';
import 'package:spotube/provider/SpotifyRequests.dart';
import 'package:spotube/provider/UserPreferences.dart';
import 'package:spotube/utils/platform.dart';

class Genres extends HookConsumerWidget {
const Genres({Key? key}) : super(key: key);
Expand Down Expand Up @@ -40,7 +43,8 @@ class Genres extends HookConsumerWidget {
.toList()
];

return Scaffold(
return PlatformScaffold(
appBar: kIsDesktop ? PageWindowTitleBar() : null,
body: ListView.builder(
itemCount: categories.length,
itemBuilder: (context, index) {
Expand Down
Loading

0 comments on commit a254e1e

Please sign in to comment.