refactor: profile page to use shadcn design

This commit is contained in:
Kingkor Roy Tirtho 2024-12-28 19:51:04 +06:00
parent d53782da23
commit 2ee0ca44c7
5 changed files with 24 additions and 27 deletions

View File

@ -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),
],
),
),

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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)