📱 Responsive for desktop

This commit is contained in:
2025-05-21 00:04:36 +08:00
parent 1f2a5c107d
commit ea90364566
23 changed files with 761 additions and 440 deletions

View File

@ -4,6 +4,7 @@ import 'package:gap/gap.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:island/models/post.dart';
import 'package:island/pods/network.dart';
import 'package:island/services/responsive.dart';
import 'package:island/widgets/app_scaffold.dart';
import 'package:island/widgets/post/post_item.dart';
import 'package:island/widgets/post/post_quick_reply.dart';
@ -29,36 +30,68 @@ class PostDetailScreen extends HookConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) {
final post = ref.watch(postProvider(id));
final isWide = isWideScreen(context);
return AppScaffold(
appBar: AppBar(title: const Text('Post')),
body: post.when(
data:
(post) => Stack(
fit: StackFit.expand,
children: [
Column(
children: [
PostItem(item: post!, isOpenable: false),
const Divider(height: 1),
Expanded(child: PostRepliesList(postId: id)),
Gap(MediaQuery.of(context).padding.bottom),
],
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Material(
elevation: 2,
child: PostQuickReply(parent: post).padding(
bottom: MediaQuery.of(context).padding.bottom,
top: 16,
horizontal: 16,
),
data: (post) {
final content = Stack(
fit: StackFit.expand,
children: [
Column(
children: [
PostItem(
item: post!,
isOpenable: false,
backgroundColor: isWide ? Colors.transparent : null,
),
const Divider(height: 1),
Expanded(child: PostRepliesList(postId: id)),
Gap(MediaQuery.of(context).padding.bottom),
],
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Material(
elevation: 2,
color: Colors.transparent,
child: PostQuickReply(parent: post).padding(
bottom: MediaQuery.of(context).padding.bottom + 16,
top: 16,
horizontal: 16,
),
),
],
),
),
],
);
return isWide
? Center(
child: Card(
elevation: 8,
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16),
topRight: Radius.circular(16),
),
),
color: Theme.of(
context,
).colorScheme.surfaceContainerLow.withOpacity(0.8),
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: kWideScreenWidth - 160,
),
child: content,
),
),
)
: content;
},
loading: () => const Center(child: CircularProgressIndicator()),
error: (e, _) => Text('Error: $e'),
),