From 2ee0ca44c79de6038f639f768cc2cf39d06534b4 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Sat, 28 Dec 2024 19:51:04 +0600 Subject: [PATCH] refactor: profile page to use shadcn design --- lib/pages/profile/profile.dart | 40 +++++++++++------------- lib/pages/search/sections/albums.dart | 2 +- lib/pages/search/sections/artists.dart | 2 +- lib/pages/search/sections/playlists.dart | 2 +- lib/pages/search/sections/tracks.dart | 5 +-- 5 files changed, 24 insertions(+), 27 deletions(-) diff --git a/lib/pages/profile/profile.dart b/lib/pages/profile/profile.dart index b4d72b53..004fbd1a 100644 --- a/lib/pages/profile/profile.dart +++ b/lib/pages/profile/profile.dart @@ -1,7 +1,6 @@ -import 'package:flutter/material.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; -import 'package:gap/gap.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:shadcn_flutter/shadcn_flutter.dart'; import 'package:skeletonizer/skeletonizer.dart'; import 'package:sliver_tools/sliver_tools.dart'; import 'package:spotube/collections/fake.dart'; @@ -21,8 +20,6 @@ class ProfilePage extends HookConsumerWidget { @override Widget build(BuildContext context, ref) { - final ThemeData(:textTheme) = Theme.of(context); - final me = ref.watch(meProvider); final meData = me.asData?.value ?? FakeData.user; @@ -42,11 +39,13 @@ class ProfilePage extends HookConsumerWidget { return SafeArea( child: Scaffold( - appBar: TitleBar( - title: Text(context.l10n.profile), - automaticallyImplyLeading: true, - ), - body: Skeletonizer( + headers: [ + TitleBar( + title: Text(context.l10n.profile), + automaticallyImplyLeading: true, + ) + ], + child: Skeletonizer( enabled: me.isLoading, child: CustomScrollView( slivers: [ @@ -73,9 +72,8 @@ class ProfilePage extends HookConsumerWidget { SliverToBoxAdapter( child: Text( meData.displayName ?? context.l10n.no_name, - style: textTheme.titleLarge, textAlign: TextAlign.center, - ), + ).h4(), ), const SliverGap(20), SliverCrossAxisConstrained( @@ -84,15 +82,15 @@ class ProfilePage extends HookConsumerWidget { child: Row( mainAxisAlignment: MainAxisAlignment.end, children: [ - TextButton.icon( - label: Text(context.l10n.edit), - icon: const Icon(SpotubeIcons.edit), + Button.text( + leading: const Icon(SpotubeIcons.edit), onPressed: () { launchUrlString( "https://www.spotify.com/account/profile/", mode: LaunchMode.externalApplication, ); }, + child: Text(context.l10n.edit), ), ], ), @@ -102,25 +100,22 @@ class ProfilePage extends HookConsumerWidget { maxCrossAxisExtent: 500, child: SliverToBoxAdapter( child: Card( - margin: const EdgeInsets.all(10), child: Padding( padding: const EdgeInsets.all(8.0), child: Table( columnWidths: const { - 0: FixedColumnWidth(110), + 0: FixedTableSize(120), }, - children: [ + defaultRowHeight: const FixedTableSize(40), + rows: [ for (final MapEntry(:key, :value) in userProperties.entries) TableRow( - children: [ + cells: [ TableCell( child: Padding( padding: const EdgeInsets.all(6), - child: Text( - key, - style: textTheme.titleSmall, - ), + child: Text(key).large(), ), ), TableCell( @@ -137,6 +132,7 @@ class ProfilePage extends HookConsumerWidget { ), ), ), + const SliverGap(200), ], ), ), diff --git a/lib/pages/search/sections/albums.dart b/lib/pages/search/sections/albums.dart index 857eb59c..105c23d5 100644 --- a/lib/pages/search/sections/albums.dart +++ b/lib/pages/search/sections/albums.dart @@ -1,6 +1,6 @@ -import 'package:flutter/material.dart' hide Page; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:shadcn_flutter/shadcn_flutter.dart'; import 'package:spotify/spotify.dart'; import 'package:spotube/components/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart'; diff --git a/lib/pages/search/sections/artists.dart b/lib/pages/search/sections/artists.dart index 16295580..9a94b3c1 100644 --- a/lib/pages/search/sections/artists.dart +++ b/lib/pages/search/sections/artists.dart @@ -1,5 +1,5 @@ -import 'package:flutter/material.dart' hide Page; import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:shadcn_flutter/shadcn_flutter.dart'; import 'package:spotify/spotify.dart'; import 'package:spotube/components/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart'; diff --git a/lib/pages/search/sections/playlists.dart b/lib/pages/search/sections/playlists.dart index 3799f9fa..17bf4849 100644 --- a/lib/pages/search/sections/playlists.dart +++ b/lib/pages/search/sections/playlists.dart @@ -1,5 +1,5 @@ -import 'package:flutter/material.dart' hide Page; import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:shadcn_flutter/shadcn_flutter.dart'; import 'package:spotify/spotify.dart'; import 'package:spotube/components/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart'; import 'package:spotube/extensions/context.dart'; diff --git a/lib/pages/search/sections/tracks.dart b/lib/pages/search/sections/tracks.dart index 6ec8f685..c0daa853 100644 --- a/lib/pages/search/sections/tracks.dart +++ b/lib/pages/search/sections/tracks.dart @@ -1,6 +1,7 @@ import 'package:collection/collection.dart'; -import 'package:flutter/material.dart' hide Page; + import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:shadcn_flutter/shadcn_flutter.dart'; import 'package:spotify/spotify.dart'; import 'package:spotube/components/dialogs/prompt_dialog.dart'; import 'package:spotube/components/dialogs/select_device_dialog.dart'; @@ -37,7 +38,7 @@ class SearchTracksSection extends HookConsumerWidget { padding: const EdgeInsets.symmetric(horizontal: 8), child: Text( context.l10n.songs, - style: theme.textTheme.titleLarge!, + style: theme.typography.h4, ), ), if (searchTrack.isLoading)