💄 Web article has max width
This commit is contained in:
parent
46919dec31
commit
2eba871a6d
@ -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),
|
),
|
||||||
],
|
],
|
||||||
),
|
|
||||||
),
|
),
|
||||||
],
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
),
|
),
|
||||||
],
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user