💄 Web article has max width

This commit is contained in:
LittleSheep 2025-07-03 00:39:45 +08:00
parent 46919dec31
commit 2eba871a6d
2 changed files with 62 additions and 52 deletions

View File

@ -51,54 +51,59 @@ class _ArticleDetailContent extends HookConsumerWidget {
); );
return SingleChildScrollView( return SingleChildScrollView(
child: Column( child: Center(
crossAxisAlignment: CrossAxisAlignment.stretch, child: ConstrainedBox(
children: [ constraints: const BoxConstraints(maxWidth: 560),
if (article.preview?.imageUrl != null) child: Column(
Image.network( crossAxisAlignment: CrossAxisAlignment.stretch,
article.preview!.imageUrl!, children: [
width: double.infinity, if (article.preview?.imageUrl != null)
height: 200, Image.network(
fit: BoxFit.cover, article.preview!.imageUrl!,
), width: double.infinity,
Padding( height: 200,
padding: const EdgeInsets.all(16.0), fit: BoxFit.cover,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
article.title,
style: Theme.of(context).textTheme.headlineSmall,
), ),
const SizedBox(height: 8), Padding(
if (article.feed?.title != null) padding: const EdgeInsets.all(16.0),
Text( child: Column(
article.feed!.title, crossAxisAlignment: CrossAxisAlignment.start,
style: Theme.of(context).textTheme.bodyMedium?.copyWith( children: [
color: Theme.of(context).colorScheme.onSurfaceVariant, Text(
article.title,
style: Theme.of(context).textTheme.headlineSmall,
), ),
), const SizedBox(height: 8),
const Divider(height: 32), if (article.feed?.title != null)
if (article.content != null) Text(
...MarkdownTextContent.buildGenerator( article.feed!.title,
isDark: Theme.of(context).brightness == Brightness.dark, style: Theme.of(context).textTheme.bodyMedium?.copyWith(
).buildWidgets(markdownContent) color: Theme.of(context).colorScheme.onSurfaceVariant,
else if (article.preview?.description != null) ),
Text(article.preview!.description!),
const Gap(24),
FilledButton(
onPressed:
() => launchUrlString(
article.url,
mode: LaunchMode.externalApplication,
), ),
child: const Text('Read Full Article'), const Divider(height: 32),
if (article.content != null)
...MarkdownTextContent.buildGenerator(
isDark: Theme.of(context).brightness == Brightness.dark,
).buildWidgets(markdownContent)
else if (article.preview?.description != null)
Text(article.preview!.description!),
const Gap(24),
FilledButton(
onPressed:
() => launchUrlString(
article.url,
mode: LaunchMode.externalApplication,
),
child: const Text('Read Full Article'),
),
Gap(MediaQuery.of(context).padding.bottom),
],
), ),
Gap(MediaQuery.of(context).padding.bottom), ),
], ],
),
), ),
], ),
), ),
); );
} }

View File

@ -126,16 +126,21 @@ class ArticlesScreen extends ConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
return Scaffold( return Scaffold(
appBar: AppBar(title: Text(title ?? 'Articles')), appBar: AppBar(title: Text(title ?? 'Articles')),
body: CustomScrollView( body: Center(
slivers: [ child: ConstrainedBox(
SliverPadding( constraints: const BoxConstraints(maxWidth: 560),
padding: const EdgeInsets.only(top: 8, left: 8, right: 8), child: CustomScrollView(
sliver: SliverArticlesList( slivers: [
feedId: feedId, SliverPadding(
publisherId: publisherId, padding: const EdgeInsets.only(top: 8, left: 8, right: 8),
), sliver: SliverArticlesList(
feedId: feedId,
publisherId: publisherId,
),
),
],
), ),
], ),
), ),
); );
} }