💄 Optimize the explore page app bar behavior

This commit is contained in:
2024-10-10 23:36:07 +08:00
parent 382e3c4a4c
commit af7cc8dab0
5 changed files with 101 additions and 66 deletions

View File

@ -75,10 +75,12 @@ class _DashboardScreenState extends State<DashboardScreen> {
final src = Get.find<MessagesFetchingProvider>();
final out = await src.getWhatsNewEvents(_lastRead.messagesLastReadAt!);
if (out == null) return;
setState(() {
_currentMessages = out.$1;
_currentMessagesCount = out.$2;
});
if (mounted) {
setState(() {
_currentMessages = out.$1;
_currentMessagesCount = out.$2;
});
}
}
bool _signingDaily = true;

View File

@ -80,62 +80,85 @@ class _ExploreScreenState extends State<ExploreScreen>
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return [
SliverAppBar(
flexibleSpace: SizedBox(
height: 48,
child: const Row(
children: [
RealmSwitcher(),
SliverLayoutBuilder(
builder: (context, constraints) {
final scrollOffset = constraints.scrollOffset;
final colorChangeOffset = 120;
final scrollProgress =
(scrollOffset / colorChangeOffset).clamp(0.0, 1.0);
final backgroundColor = Color.lerp(
Theme.of(context)
.colorScheme
.surfaceContainerLow
.withOpacity(0),
Theme.of(context)
.colorScheme
.surfaceContainerLow
.withOpacity(0.9),
scrollProgress,
);
return SliverAppBar(
backgroundColor: backgroundColor,
flexibleSpace: SizedBox(
height: 48,
child: const Row(
children: [
RealmSwitcher(),
],
).paddingSymmetric(horizontal: 8),
).paddingOnly(top: MediaQuery.of(context).padding.top),
snap: true,
floating: true,
toolbarHeight: AppTheme.toolbarHeight(context),
leading: AppBarLeadingButton.adaptive(context),
actions: [
const BackgroundStateWidget(),
const NotificationButton(),
SizedBox(
width: AppTheme.isLargeScreen(context) ? 8 : 16,
),
],
).paddingSymmetric(horizontal: 8),
).paddingOnly(top: MediaQuery.of(context).padding.top),
floating: true,
toolbarHeight: AppTheme.toolbarHeight(context),
leading: AppBarLeadingButton.adaptive(context),
actions: [
const BackgroundStateWidget(),
const NotificationButton(),
SizedBox(
width: AppTheme.isLargeScreen(context) ? 8 : 16,
),
],
bottom: TabBar(
controller: _tabController,
dividerHeight: 0.3,
tabAlignment: TabAlignment.fill,
tabs: [
Tab(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.feed, size: 20),
const Gap(8),
Text('postListNews'.tr),
],
),
bottom: TabBar(
controller: _tabController,
dividerHeight: 0.3,
tabAlignment: TabAlignment.fill,
tabs: [
Tab(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.feed, size: 20),
const Gap(8),
Text('postListNews'.tr),
],
),
),
Tab(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.people, size: 20),
const Gap(8),
Text('postListFriends'.tr),
],
),
),
Tab(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.shuffle_on_outlined, size: 20),
const Gap(8),
Text('postListShuffle'.tr),
],
),
),
],
),
Tab(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.people, size: 20),
const Gap(8),
Text('postListFriends'.tr),
],
),
),
Tab(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.shuffle_on_outlined, size: 20),
const Gap(8),
Text('postListShuffle'.tr),
],
),
),
],
),
);
},
)
];
},

View File

@ -546,7 +546,6 @@ class _PostEditorTextField extends StatelessWidget {
final Function onUpdate;
const _PostEditorTextField({
super.key,
required this.focusNode,
required this.controller,
required this.onUpdate,