Animate settings highlight

This commit is contained in:
Ming Ming 2023-07-23 13:08:30 +08:00
parent 56e3fbd784
commit e53d0ecf6c
3 changed files with 42 additions and 15 deletions

View file

@ -22,6 +22,8 @@ const animationDurationTabTransition = Duration(milliseconds: 300);
const heroDurationNormal = Duration(milliseconds: 450);
const settingsHighlightDuration = Duration(milliseconds: 750);
/// Size of the photo/video thumbnails
///
/// It's advisable to use a single size to minimize cache size

View file

@ -87,16 +87,20 @@ class _WrappedAccountSettings extends StatefulWidget {
const _WrappedAccountSettings();
@override
State<StatefulWidget> createState() => __WrappedAccountSettingsState();
State<StatefulWidget> createState() => _WrappedAccountSettingsState();
}
@npLog
class __WrappedAccountSettingsState extends State<_WrappedAccountSettings>
with RouteAware, PageVisibilityMixin {
class _WrappedAccountSettingsState extends State<_WrappedAccountSettings>
with RouteAware, PageVisibilityMixin, TickerProviderStateMixin {
@override
void initState() {
super.initState();
_accountController = context.read<AccountController>();
WidgetsBinding.instance.addPostFrameCallback((_) {
_animationController.repeat(reverse: true);
});
}
@override
@ -107,6 +111,7 @@ class __WrappedAccountSettingsState extends State<_WrappedAccountSettings>
_accountController.syncController
.requestResync(_bloc.state.account, _bloc.state.personProvider);
}
_animationController.dispose();
super.dispose();
}
@ -183,15 +188,28 @@ class __WrappedAccountSettingsState extends State<_WrappedAccountSettings>
),
_BlocSelector<PersonProvider>(
selector: (state) => state.personProvider,
builder: (context, state) => ListTile(
title: Text(L10n.global().settingsPersonProviderTitle),
subtitle: Text(state.toUserString()),
onTap: () => _onPersonProviderPressed(context),
tileColor: _bloc.highlight ==
AccountSettingsOption.personProvider
? Theme.of(context).colorScheme.primaryContainer
: null,
),
builder: (context, state) {
if (_bloc.highlight ==
AccountSettingsOption.personProvider) {
return AnimatedBuilder(
animation: _highlightAnimation,
builder: (context, child) => ListTile(
title: Text(
L10n.global().settingsPersonProviderTitle),
subtitle: Text(state.toUserString()),
onTap: () => _onPersonProviderPressed(context),
tileColor: _highlightAnimation.value,
),
);
} else {
return ListTile(
title:
Text(L10n.global().settingsPersonProviderTitle),
subtitle: Text(state.toUserString()),
onTap: () => _onPersonProviderPressed(context),
);
}
},
),
],
),
@ -263,6 +281,14 @@ class __WrappedAccountSettingsState extends State<_WrappedAccountSettings>
late final _bloc = context.read<_Bloc>();
late final AccountController _accountController;
late final _animationController = AnimationController(
vsync: this,
duration: k.settingsHighlightDuration,
);
late final _highlightAnimation = ColorTween(
end: Theme.of(context).colorScheme.primaryContainer,
).animate(_animationController);
}
class _DoneButton extends StatelessWidget {

View file

@ -58,13 +58,12 @@ extension $_StateCopyWith on _State {
// NpLogGenerator
// **************************************************************************
extension _$__WrappedAccountSettingsStateNpLog
on __WrappedAccountSettingsState {
extension _$_WrappedAccountSettingsStateNpLog on _WrappedAccountSettingsState {
// ignore: unused_element
Logger get _log => log;
static final log =
Logger("widget.settings.account_settings.__WrappedAccountSettingsState");
Logger("widget.settings.account_settings._WrappedAccountSettingsState");
}
extension _$_PersonProviderDialogNpLog on _PersonProviderDialog {