mirror of
https://github.com/KRTirtho/spotube.git
synced 2025-09-13 07:55:18 +00:00
refactor: profile page to use shadcn design
This commit is contained in:
parent
d53782da23
commit
2ee0ca44c7
@ -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),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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)
|
||||
|
Loading…
Reference in New Issue
Block a user