HyperNet/Surface
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Better publisher screen layout

Browse Source
This commit is contained in:
LittleSheep 2024-12-01 22:51:04 +08:00
parent 23c5a1a23e
commit cf1c4403c1
3 changed files with 299 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
lib/screens/post/post_publisher.dart
View File

@ -6,6 +6,7 @@ import 'package:gap/gap.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'package:material_symbols_icons/symbols.dart'; import 'package:material_symbols_icons/symbols.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:sliver_tools/sliver_tools.dart';
import 'package:styled_widget/styled_widget.dart'; import 'package:styled_widget/styled_widget.dart';
import 'package:surface/providers/post.dart'; import 'package:surface/providers/post.dart';
import 'package:surface/providers/sn_network.dart'; import 'package:surface/providers/sn_network.dart';
@ -111,14 +112,59 @@ class _PostPublisherScreenState extends State<PostPublisherScreen> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final imageHeight = _appBarHeight + kToolbarHeight + 8; final imageHeight = _appBarHeight + kToolbarHeight + 8;
const labelShadows = <Shadow>[
Shadow(
offset: Offset(1, 1),
blurRadius: 5.0,
color: Color.fromARGB(255, 0, 0, 0),
),
];
final sn = context.read<SnNetworkProvider>(); final sn = context.read<SnNetworkProvider>();
return Scaffold(
body: CustomScrollView( // TODO fix loading on different type
return DefaultTabController(
length: 3,
child: Scaffold(
body: NestedScrollView(
controller: _scrollController, controller: _scrollController,
slivers: [ headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverOverlapAbsorber(
handle:
NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: MultiSliver(
children: [
SliverAppBar( SliverAppBar(
expandedHeight: _appBarHeight, expandedHeight: _appBarHeight,
title: Text(_publisher?.nick ?? 'loading'.tr()), title: _publisher == null
? Text('loading').tr()
: RichText(
textAlign: TextAlign.center,
text: TextSpan(children: [
TextSpan(
text: _publisher!.nick,
style: Theme.of(context)
.textTheme
.titleLarge!
.copyWith(
color: Colors.white,
shadows: labelShadows,
),
),
const TextSpan(text: '\n'),
TextSpan(
text: '@${_publisher!.name}',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
color: Colors.white,
shadows: labelShadows,
),
),
]),
),
pinned: true, pinned: true,
flexibleSpace: _publisher != null flexibleSpace: _publisher != null
? Stack( ? Stack(
@ -136,7 +182,8 @@ class _PostPublisherScreenState extends State<PostPublisherScreen> {
top: 0, top: 0,
left: 0, left: 0,
right: 0, right: 0,
height: 56 + MediaQuery.of(context).padding.top, height:
56 + MediaQuery.of(context).padding.top,
child: ClipRect( child: ClipRect(
child: BackdropFilter( child: BackdropFilter(
filter: ImageFilter.blur( filter: ImageFilter.blur(
@ -145,7 +192,8 @@ class _PostPublisherScreenState extends State<PostPublisherScreen> {
), ),
child: Container( child: Container(
color: Colors.black.withOpacity( color: Colors.black.withOpacity(
clampDouble(_appBarBlur * 0.1, 0, 0.5), clampDouble(
_appBarBlur * 0.1, 0, 0.5),
), ),
), ),
), ),
@ -171,26 +219,31 @@ class _PostPublisherScreenState extends State<PostPublisherScreen> {
const Gap(16), const Gap(16),
Expanded( Expanded(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment:
CrossAxisAlignment.start,
children: [ children: [
Text( Text(
_publisher!.nick, _publisher!.nick,
style: Theme.of(context).textTheme.titleMedium, style: Theme.of(context)
.textTheme
.titleMedium,
).bold(), ).bold(),
Text('@${_publisher!.name}').fontSize(13), Text('@${_publisher!.name}')
.fontSize(13),
], ],
), ),
), ),
ElevatedButton( ElevatedButton(
style: style: ButtonStyle(
ButtonStyle(elevation: WidgetStatePropertyAll(0)), elevation: WidgetStatePropertyAll(0)),
onPressed: () {}, onPressed: () {},
child: Text('subscribe').tr(), child: Text('subscribe').tr(),
), ),
], ],
).padding(right: 8), ).padding(right: 8),
const Gap(12), const Gap(12),
Text(_publisher!.description).padding(horizontal: 8), Text(_publisher!.description)
.padding(horizontal: 8),
const Gap(12), const Gap(12),
Column( Column(
children: [ children: [
@ -199,7 +252,8 @@ class _PostPublisherScreenState extends State<PostPublisherScreen> {
const Icon(Symbols.calendar_add_on), const Icon(Symbols.calendar_add_on),
const Gap(8), const Gap(8),
Text('publisherJoinedAt').tr(args: [ Text('publisherJoinedAt').tr(args: [
DateFormat('y/M/d').format(_publisher!.createdAt) DateFormat('y/M/d')
.format(_publisher!.createdAt)
]), ]),
], ],
), ),
@ -224,7 +278,8 @@ class _PostPublisherScreenState extends State<PostPublisherScreen> {
onTap: () {}, onTap: () {},
), ),
const Gap(8), const Gap(8),
AccountImage(content: _account?.avatar, radius: 8), AccountImage(
content: _account?.avatar, radius: 8),
], ],
), ),
], ],
@ -233,13 +288,43 @@ class _PostPublisherScreenState extends State<PostPublisherScreen> {
).padding(all: 16), ).padding(all: 16),
).center(), ).center(),
), ),
SliverToBoxAdapter( SliverToBoxAdapter(child: const Divider(height: 1)),
child: const Divider(height: 1), TabBar(
tabs: [
Tab(
icon: Icon(
Symbols.pages,
color: Theme.of(context).colorScheme.onSurface,
), ),
SliverInfiniteList( ),
Tab(
icon: Icon(
Symbols.sticky_note_2,
color: Theme.of(context).colorScheme.onSurface,
),
),
Tab(
icon: Icon(
Symbols.article,
color: Theme.of(context).colorScheme.onSurface,
),
),
],
),
SliverToBoxAdapter(child: const Divider(height: 1)),
Gap(MediaQuery.of(context).padding.top),
],
),
),
];
},
body: TabBarView(
children: [
InfiniteList(
itemCount: _posts.length, itemCount: _posts.length,
isLoading: _isBusy, isLoading: _isBusy,
hasReachedMax: _postCount != null && _posts.length >= _postCount!, hasReachedMax:
_postCount != null && _posts.length >= _postCount!,
onFetchData: _fetchPosts, onFetchData: _fetchPosts,
itemBuilder: (context, idx) { itemBuilder: (context, idx) {
return GestureDetector( return GestureDetector(
@ -265,8 +350,73 @@ class _PostPublisherScreenState extends State<PostPublisherScreen> {
}, },
separatorBuilder: (context, index) => const Divider(height: 1), separatorBuilder: (context, index) => const Divider(height: 1),
), ),
InfiniteList(
itemCount: _posts.where((e) => e.type == 'story').length,
isLoading: _isBusy,
hasReachedMax:
_postCount != null && _posts.length >= _postCount!,
onFetchData: _fetchPosts,
itemBuilder: (context, idx) {
return GestureDetector(
child: PostItem(
data:
_posts.where((e) => e.type == 'story').elementAt(idx),
maxWidth: 640,
onChanged: (data) {
setState(() => _posts[idx] = data);
},
onDeleted: () {
_posts.clear();
_fetchPosts();
},
),
onTap: () {
GoRouter.of(context).pushNamed(
'postDetail',
pathParameters: {'slug': _posts[idx].id.toString()},
extra: _posts[idx],
);
},
);
},
separatorBuilder: (context, index) => const Divider(height: 1),
),
InfiniteList(
itemCount: _posts.where((e) => e.type == 'article').length,
isLoading: _isBusy,
hasReachedMax:
_postCount != null && _posts.length >= _postCount!,
onFetchData: _fetchPosts,
itemBuilder: (context, idx) {
return GestureDetector(
child: PostItem(
data: _posts
.where((e) => e.type == 'article')
.elementAt(idx),
maxWidth: 640,
onChanged: (data) {
setState(() => _posts[idx] = data);
},
onDeleted: () {
_posts.clear();
_fetchPosts();
},
),
onTap: () {
GoRouter.of(context).pushNamed(
'postDetail',
pathParameters: {'slug': _posts[idx].id.toString()},
extra: _posts[idx],
);
},
);
},
separatorBuilder: (context, index) => const Divider(height: 1),
),
], ],
), ),
),
),
); );
} }
} }

8
pubspec.lock
View File

@ -1551,6 +1551,14 @@ packages:
description: flutter description: flutter
source: sdk source: sdk
version: "0.0.99" version: "0.0.99"
sliver_tools:
dependency: "direct main"
description:
name: sliver_tools
sha256: eae28220badfb9d0559207badcbbc9ad5331aac829a88cb0964d330d2a4636a6
url: "https://pub.dev"
source: hosted
version: "0.2.12"
source_gen: source_gen:
dependency: transitive dependency: transitive
description: description:

1
pubspec.yaml
View File

@ -94,6 +94,7 @@ dependencies:
permission_handler: ^11.3.1 permission_handler: ^11.3.1
flutter_staggered_grid_view: ^0.7.0 flutter_staggered_grid_view: ^0.7.0
popover: ^0.3.1 popover: ^0.3.1
sliver_tools: ^0.2.12
dev_dependencies: dev_dependencies:
flutter_test: flutter_test: