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

simplified the layout of TrackTableView

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2022-01-26 10:43:07 +06:00
parent 72ff732505
commit 8c3a62569a
2 changed files with 159 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
lib/components/Artist/ArtistProfile.dart
View File

@ -4,12 +4,10 @@ import 'package:flutter/services.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:spotify/spotify.dart'; import 'package:spotify/spotify.dart';
import 'package:spotube/components/Album/AlbumCard.dart'; import 'package:spotube/components/Album/AlbumCard.dart';
import 'package:spotube/components/Album/AlbumView.dart';
import 'package:spotube/components/Artist/ArtistAlbumView.dart'; import 'package:spotube/components/Artist/ArtistAlbumView.dart';
import 'package:spotube/components/Artist/ArtistCard.dart'; import 'package:spotube/components/Artist/ArtistCard.dart';
import 'package:spotube/components/Shared/LinkText.dart';
import 'package:spotube/components/Shared/PageWindowTitleBar.dart'; import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
import 'package:spotube/helpers/artists-to-clickable-artists.dart'; import 'package:spotube/components/Shared/TracksTableView.dart';
import 'package:spotube/helpers/readable-number.dart'; import 'package:spotube/helpers/readable-number.dart';
import 'package:spotube/helpers/zero-pad-num-str.dart'; import 'package:spotube/helpers/zero-pad-num-str.dart';
import 'package:spotube/provider/Playback.dart'; import 'package:spotube/provider/Playback.dart';
@ -162,81 +160,49 @@ class _ArtistProfileState extends State<ArtistProfile> {
"Top Tracks", "Top Tracks",
style: Theme.of(context).textTheme.headline4, style: Theme.of(context).textTheme.headline4,
), ),
IconButton( Container(
icon: Icon(isPlaylistPlaying margin: const EdgeInsets.symmetric(horizontal: 5),
? Icons.stop_circle_rounded decoration: BoxDecoration(
: Icons.play_circle_filled_rounded),
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(50),
),
child: IconButton(
icon: Icon(isPlaylistPlaying
? Icons.stop_rounded
: Icons.play_arrow_rounded),
color: Colors.white,
onPressed: trackSnapshot.hasData onPressed: trackSnapshot.hasData
? () => ? () =>
playPlaylist(trackSnapshot.data!.toList()) playPlaylist(trackSnapshot.data!.toList())
: null, : null,
),
) )
], ],
), ),
...trackSnapshot.data?.map((track) { ...trackSnapshot.data
?.toList()
.asMap()
.entries
.map((track) {
String duration = String duration =
"${track.duration?.inMinutes.remainder(60)}:${zeroPadNumStr(track.duration?.inSeconds.remainder(60) ?? 0)}"; "${track.value.duration?.inMinutes.remainder(60)}:${zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}";
return Row( String? thumbnailUrl = track.value.album != null &&
children: [ track.value.album!.images!.isNotEmpty
if (track.album != null && ? track.value.album!.images!.last.url!
track.album!.images!.isNotEmpty) : null;
Padding( return TracksTableView.buildTrackTile(
padding: const EdgeInsets.all(8.0), context,
child: ClipRRect( playback,
borderRadius: const BorderRadius.all( duration: duration,
Radius.circular(5)), track: track,
child: CachedNetworkImage( thumbnailUrl: thumbnailUrl,
placeholder: (context, url) { onTrackPlayButtonPressed: (currentTrack) =>
return Container( playPlaylist(
height: 40, trackSnapshot.data!.toList(),
width: 40, currentTrack: track.value,
color: Colors.green[300], ),
); );
}, }) ??
imageUrl:
track.album!.images!.last.url!,
maxHeightDiskCache: 40,
maxWidthDiskCache: 40,
),
),
),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
track.name ?? "",
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 17,
),
overflow: TextOverflow.ellipsis,
),
artistsToClickableArtists(
track.artists ?? []),
],
),
),
Expanded(
child: Row(
children: [
LinkText(
track.album!.name!,
MaterialPageRoute(
builder: (context) =>
AlbumView(track.album!),
),
),
],
),
),
const SizedBox(width: 10),
Text(duration)
],
);
}).toList() ??
[], [],
]); ]);
}, },

154
lib/components/Shared/TracksTableView.dart
View File

@ -14,38 +14,23 @@ class TracksTableView extends StatelessWidget {
const TracksTableView(this.tracks, {Key? key, this.onTrackPlayButtonPressed}) const TracksTableView(this.tracks, {Key? key, this.onTrackPlayButtonPressed})
: super(key: key); : super(key: key);
List<TableRow> trackToTableRow( static Widget buildTrackTile(
BuildContext context, Playback playback, List<Track> tracks) { BuildContext context,
return tracks.asMap().entries.map((track) { Playback playback, {
String? thumbnailUrl = (track.value.album?.images?.isNotEmpty ?? false) required MapEntry<int, Track> track,
? track.value.album?.images?.last.url required String duration,
: null; String? thumbnailUrl,
String duration = final void Function(Track currentTrack)? onTrackPlayButtonPressed,
"${track.value.duration?.inMinutes.remainder(60)}:${zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}"; }) {
return (TableRow( return Row(
children: [ children: [
TableCell( SizedBox(
child: Padding( height: 20,
padding: const EdgeInsets.all(8.0), width: 25,
child: Text( child: Text(
(track.key + 1).toString(), (track.key + 1).toString(),
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
)),
TableCell(
child: Row(
children: [
IconButton(
icon: Icon(
playback.currentTrack?.id != null &&
playback.currentTrack?.id == track.value.id
? Icons.pause_circle_rounded
: Icons.play_circle_rounded,
color: Theme.of(context).primaryColor,
),
onPressed: () => onTrackPlayButtonPressed?.call(
track.value,
),
), ),
if (thumbnailUrl != null) if (thumbnailUrl != null)
Padding( Padding(
@ -66,8 +51,19 @@ class TracksTableView extends StatelessWidget {
), ),
), ),
), ),
const SizedBox(width: 10), IconButton(
Flexible( icon: Icon(
playback.currentTrack?.id != null &&
playback.currentTrack?.id == track.value.id
? Icons.pause_circle_rounded
: Icons.play_circle_rounded,
color: Theme.of(context).primaryColor,
),
onPressed: () => onTrackPlayButtonPressed?.call(
track.value,
),
),
Expanded(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -83,85 +79,87 @@ class TracksTableView extends StatelessWidget {
], ],
), ),
), ),
], Expanded(
), child: Row(
), children: [
TableCell( LinkText(
child: Padding( track.value.album!.name!,
padding: const EdgeInsets.all(8.0),
child: LinkText(
track.value.album?.name ?? "",
MaterialPageRoute( MaterialPageRoute(
builder: (context) => AlbumView(track.value.album!), builder: (context) => AlbumView(track.value.album!),
), ),
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
duration,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
),
),
)
], ],
)); ),
}).toList(); ),
const SizedBox(width: 10),
Text(duration),
const SizedBox(width: 10),
],
);
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
Playback playback = context.watch<Playback>(); Playback playback = context.watch<Playback>();
TextStyle tableHeadStyle = TextStyle tableHeadStyle =
const TextStyle(fontWeight: FontWeight.bold, fontSize: 16); const TextStyle(fontWeight: FontWeight.bold, fontSize: 16);
return Expanded( return Expanded(
child: Scrollbar( child: Scrollbar(
child: ListView( child: ListView(
children: [ children: [
SingleChildScrollView( Row(
child: Table(
columnWidths: const {
0: FixedColumnWidth(40),
1: FlexColumnWidth(),
2: FlexColumnWidth(),
3: FixedColumnWidth(45),
},
children: [ children: [
TableRow( Padding(
children: [ padding: const EdgeInsets.all(8.0),
TableCell(
child: Text( child: Text(
"#", "#",
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: tableHeadStyle, style: tableHeadStyle,
)), ),
TableCell( ),
child: Text( Expanded(
child: Row(
children: [
Text(
"Title", "Title",
style: tableHeadStyle, style: tableHeadStyle,
)), overflow: TextOverflow.ellipsis,
TableCell( ),
child: Text( ],
),
),
// used alignment of this table-head
const SizedBox(width: 100),
Expanded(
child: Row(
children: [
Text(
"Album", "Album",
overflow: TextOverflow.ellipsis,
style: tableHeadStyle, style: tableHeadStyle,
)),
TableCell(
child: Text(
"Time",
textAlign: TextAlign.center,
style: tableHeadStyle,
)),
],
), ),
...trackToTableRow(context, playback, tracks),
], ],
), ),
), ),
const SizedBox(width: 10),
Text("Time", style: tableHeadStyle),
const SizedBox(width: 10),
],
),
...tracks.asMap().entries.map((track) {
String? thumbnailUrl =
(track.value.album?.images?.isNotEmpty ?? false)
? track.value.album?.images?.last.url
: null;
String duration =
"${track.value.duration?.inMinutes.remainder(60)}:${zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}";
return buildTrackTile(context, playback,
track: track,
duration: duration,
thumbnailUrl: thumbnailUrl,
onTrackPlayButtonPressed: onTrackPlayButtonPressed);
}).toList()
], ],
), ),
), ),