feat(ui): Animate a transition between chat state and no chat state

This commit is contained in:
PapaTutuWawa 2022-11-21 18:19:58 +01:00
parent d10efc274c
commit 9b3130f363
2 changed files with 39 additions and 5 deletions

View File

@ -41,7 +41,6 @@ PopupMenuItem<dynamic> popupItemWithIcon(dynamic value, String text, IconData ic
/// as it should /// as it should
// TODO(PapaTutuWawa): The conversation title may overflow the Topbar // TODO(PapaTutuWawa): The conversation title may overflow the Topbar
// TODO(Unknown): Maybe merge with BorderlessTopbar // TODO(Unknown): Maybe merge with BorderlessTopbar
// TODO(PapaTutuWawa): Make the conversation title go up, when we display "online" and down if we don't have to anymore
class ConversationTopbar extends StatelessWidget implements PreferredSizeWidget { class ConversationTopbar extends StatelessWidget implements PreferredSizeWidget {
const ConversationTopbar({ super.key }); const ConversationTopbar({ super.key });
@ -75,6 +74,10 @@ class ConversationTopbar extends StatelessWidget implements PreferredSizeWidget
} }
} }
bool _isChatStateVisible(ChatState state) {
return state != ChatState.inactive && state != ChatState.gone;
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return BlocBuilder<ConversationBloc, ConversationState>( return BlocBuilder<ConversationBloc, ConversationState>(
@ -110,14 +113,43 @@ class ConversationTopbar extends StatelessWidget implements PreferredSizeWidget
conversation: context.read<ConversationBloc>().state.conversation, conversation: context.read<ConversationBloc>().state.conversation,
), ),
), ),
child: Column( child: Stack(
children: [
AnimatedPositioned(
duration: const Duration(milliseconds: 200),
top: _isChatStateVisible(state.conversation!.chatState) ?
0 :
10,
left: 0,
right: 0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
TopbarTitleText(state.conversation!.title), TopbarTitleText(state.conversation!.title),
],
),
),
Positioned(
left: 0,
right: 0,
bottom: 0,
child: AnimatedOpacity(
opacity: _isChatStateVisible(state.conversation!.chatState) ?
1.0 :
0.0,
duration: const Duration(milliseconds: 100),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildChatState(state.conversation!.chatState), _buildChatState(state.conversation!.chatState),
], ],
), ),
), ),
), ),
],
),
),
),
// ignore: implicit_dynamic_type // ignore: implicit_dynamic_type
PopupMenuButton( PopupMenuButton(
onSelected: (result) { onSelected: (result) {

View File

@ -4,12 +4,14 @@ class TopbarTitleText extends StatelessWidget {
const TopbarTitleText(this.text, { super.key }); const TopbarTitleText(this.text, { super.key });
final String text; final String text;
static const double fontSize = 20;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Text( return Text(
text, text,
style: const TextStyle( style: const TextStyle(
fontSize: 20, fontSize: fontSize,
), ),
); );
} }