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 heroDurationNormal = Duration(milliseconds: 450);
const settingsHighlightDuration = Duration(milliseconds: 750);
/// Size of the photo/video thumbnails /// Size of the photo/video thumbnails
/// ///
/// It's advisable to use a single size to minimize cache size /// It's advisable to use a single size to minimize cache size

View file

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

View file

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