From 4376070733428b2c73aa2b64a641583079f9187f Mon Sep 17 00:00:00 2001 From: Krille Date: Sat, 7 Jan 2023 09:22:31 +0100 Subject: [PATCH] refactor: Same animations everywhere in app --- lib/config/themes.dart | 3 +++ lib/pages/chat/chat_emoji_picker.dart | 4 +++- lib/pages/chat/chat_input_row.dart | 4 +++- lib/pages/chat/events/image_bubble.dart | 2 +- lib/pages/chat/reactions_picker.dart | 4 +++- lib/pages/chat/reply_display.dart | 4 +++- lib/pages/chat/seen_by_row.dart | 5 +++-- lib/pages/chat/typing_indicators.dart | 4 ++-- lib/pages/chat_list/chat_list_body.dart | 13 +++++++------ lib/pages/chat_list/chat_list_item.dart | 9 +++++---- lib/pages/chat_list/navi_rail_item.dart | 4 +++- lib/pages/chat_list/start_chat_fab.dart | 7 ++++--- lib/pages/dialer/pip/constants.dart | 1 - lib/pages/dialer/pip/pip_view.dart | 6 +++--- .../homeserver_picker/homeserver_picker_view.dart | 5 +++-- lib/pages/settings/settings_view.dart | 5 +++-- lib/pages/story/story_view.dart | 4 +++- lib/widgets/connection_status_header.dart | 5 +++-- lib/widgets/layouts/side_view_layout.dart | 3 ++- lib/widgets/mxc_image.dart | 5 +++-- 20 files changed, 60 insertions(+), 37 deletions(-) delete mode 100644 lib/pages/dialer/pip/constants.dart diff --git a/lib/config/themes.dart b/lib/config/themes.dart index 0d7ce2c7f..4d328ddb1 100644 --- a/lib/config/themes.dart +++ b/lib/config/themes.dart @@ -38,6 +38,9 @@ abstract class FluffyThemes { subtitle2: fallbackTextStyle, ); + static const Duration animationDuration = Duration(milliseconds: 250); + static const Curve animationCurve = Curves.easeInOut; + static ThemeData buildTheme(Brightness brightness, [Color? seed]) => ThemeData( visualDensity: VisualDensity.standard, diff --git a/lib/pages/chat/chat_emoji_picker.dart b/lib/pages/chat/chat_emoji_picker.dart index 069c4fc12..9a025c9c6 100644 --- a/lib/pages/chat/chat_emoji_picker.dart +++ b/lib/pages/chat/chat_emoji_picker.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:emoji_picker_flutter/emoji_picker_flutter.dart'; +import 'package:fluffychat/config/themes.dart'; import 'chat.dart'; class ChatEmojiPicker extends StatelessWidget { @@ -11,7 +12,8 @@ class ChatEmojiPicker extends StatelessWidget { @override Widget build(BuildContext context) { return AnimatedContainer( - duration: const Duration(milliseconds: 300), + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, height: controller.showEmojiPicker ? MediaQuery.of(context).size.height / 2 : 0, diff --git a/lib/pages/chat/chat_input_row.dart b/lib/pages/chat/chat_input_row.dart index da4e63cc7..3f5659408 100644 --- a/lib/pages/chat/chat_input_row.dart +++ b/lib/pages/chat/chat_input_row.dart @@ -10,6 +10,7 @@ import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/utils/platform_infos.dart'; import 'package:fluffychat/widgets/avatar.dart'; import 'package:fluffychat/widgets/matrix.dart'; +import '../../config/themes.dart'; import '../../widgets/m2_popup_menu_button.dart'; import 'chat.dart'; import 'input_bar.dart'; @@ -84,7 +85,8 @@ class ChatInputRow extends StatelessWidget { controller.onAddPopupMenuButtonSelected('file'), helpLabel: L10n.of(context)!.sendFile, child: AnimatedContainer( - duration: const Duration(milliseconds: 200), + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, height: 56, width: controller.inputText.isEmpty ? 56 : 0, alignment: Alignment.center, diff --git a/lib/pages/chat/events/image_bubble.dart b/lib/pages/chat/events/image_bubble.dart index 787c65846..7eefc45c9 100644 --- a/lib/pages/chat/events/image_bubble.dart +++ b/lib/pages/chat/events/image_bubble.dart @@ -85,7 +85,7 @@ class ImageBubble extends StatelessWidget { child: Hero( tag: event.eventId, child: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), + duration: const Duration(seconds: 1), child: Container( constraints: maxSize ? BoxConstraints( diff --git a/lib/pages/chat/reactions_picker.dart b/lib/pages/chat/reactions_picker.dart index 7d26e4e5f..53f8cfe7e 100644 --- a/lib/pages/chat/reactions_picker.dart +++ b/lib/pages/chat/reactions_picker.dart @@ -6,6 +6,7 @@ import 'package:matrix/matrix.dart'; import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/config/app_emojis.dart'; import 'package:fluffychat/pages/chat/chat.dart'; +import '../../config/themes.dart'; class ReactionsPicker extends StatelessWidget { final ChatController controller; @@ -20,7 +21,8 @@ class ReactionsPicker extends StatelessWidget { controller.room!.canSendDefaultMessages && controller.selectedEvents.isNotEmpty; return AnimatedContainer( - duration: const Duration(milliseconds: 300), + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, height: (display) ? 56 : 0, child: Material( color: Colors.transparent, diff --git a/lib/pages/chat/reply_display.dart b/lib/pages/chat/reply_display.dart index a801e944c..1b12e497e 100644 --- a/lib/pages/chat/reply_display.dart +++ b/lib/pages/chat/reply_display.dart @@ -4,6 +4,7 @@ import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:matrix/matrix.dart'; import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart'; +import '../../config/themes.dart'; import 'chat.dart'; import 'events/reply_content.dart'; @@ -14,7 +15,8 @@ class ReplyDisplay extends StatelessWidget { @override Widget build(BuildContext context) { return AnimatedContainer( - duration: const Duration(milliseconds: 300), + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, height: controller.editEvent != null || controller.replyEvent != null ? 56 : 0, diff --git a/lib/pages/chat/seen_by_row.dart b/lib/pages/chat/seen_by_row.dart index 9bd298102..0df319f83 100644 --- a/lib/pages/chat/seen_by_row.dart +++ b/lib/pages/chat/seen_by_row.dart @@ -22,8 +22,9 @@ class SeenByRow extends StatelessWidget { const BoxConstraints(maxWidth: FluffyThemes.columnWidth * 2.5), height: seenByUsers.isEmpty ? 0 : 24, duration: seenByUsers.isEmpty - ? const Duration(milliseconds: 0) - : const Duration(milliseconds: 300), + ? Duration.zero + : FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, alignment: controller.timeline!.events.isNotEmpty && controller.timeline!.events.first.senderId == Matrix.of(context).client.userID diff --git a/lib/pages/chat/typing_indicators.dart b/lib/pages/chat/typing_indicators.dart index a3ea967c6..12bd11ad2 100644 --- a/lib/pages/chat/typing_indicators.dart +++ b/lib/pages/chat/typing_indicators.dart @@ -24,8 +24,8 @@ class TypingIndicators extends StatelessWidget { constraints: const BoxConstraints(maxWidth: FluffyThemes.columnWidth * 2.5), height: typingUsers.isEmpty ? 0 : Avatar.defaultSize + bottomPadding, - duration: const Duration(milliseconds: 300), - curve: Curves.bounceInOut, + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, alignment: controller.timeline!.events.isNotEmpty && controller.timeline!.events.first.senderId == Matrix.of(context).client.userID diff --git a/lib/pages/chat_list/chat_list_body.dart b/lib/pages/chat_list/chat_list_body.dart index 2d1b5a805..8a0703519 100644 --- a/lib/pages/chat_list/chat_list_body.dart +++ b/lib/pages/chat_list/chat_list_body.dart @@ -14,6 +14,7 @@ import 'package:fluffychat/utils/stream_extension.dart'; import 'package:fluffychat/widgets/avatar.dart'; import 'package:fluffychat/widgets/profile_bottom_sheet.dart'; import 'package:fluffychat/widgets/public_room_bottom_sheet.dart'; +import '../../config/themes.dart'; import '../../widgets/connection_status_header.dart'; import '../../widgets/matrix.dart'; @@ -82,12 +83,12 @@ class ChatListViewBody extends StatelessWidget { AnimatedContainer( clipBehavior: Clip.hardEdge, decoration: const BoxDecoration(), - curve: Curves.easeInOut, height: roomSearchResult == null || roomSearchResult.chunk.isEmpty ? 0 : 106, - duration: const Duration(milliseconds: 250), + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, child: roomSearchResult == null ? null : ListView.builder( @@ -120,12 +121,12 @@ class ChatListViewBody extends StatelessWidget { AnimatedContainer( clipBehavior: Clip.hardEdge, decoration: const BoxDecoration(), - curve: Curves.easeInOut, height: userSearchResult == null || userSearchResult.results.isEmpty ? 0 : 106, - duration: const Duration(milliseconds: 250), + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, child: userSearchResult == null ? null : ListView.builder( @@ -163,9 +164,9 @@ class ChatListViewBody extends StatelessWidget { const ConnectionStatusHeader(), AnimatedContainer( height: controller.isTorBrowser ? 64 : 0, - duration: const Duration(milliseconds: 300), + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, clipBehavior: Clip.hardEdge, - curve: Curves.bounceInOut, decoration: const BoxDecoration(), child: Material( color: Theme.of(context).colorScheme.surface, diff --git a/lib/pages/chat_list/chat_list_item.dart b/lib/pages/chat_list/chat_list_item.dart index e27f5f051..79f35ea68 100644 --- a/lib/pages/chat_list/chat_list_item.dart +++ b/lib/pages/chat_list/chat_list_item.dart @@ -9,6 +9,7 @@ import 'package:vrouter/vrouter.dart'; import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart'; import 'package:fluffychat/utils/room_status_extension.dart'; +import '../../config/themes.dart'; import '../../utils/date_time_extension.dart'; import '../../widgets/avatar.dart'; import '../../widgets/matrix.dart'; @@ -241,8 +242,8 @@ class ChatListItem extends StatelessWidget { width: typingText.isEmpty ? 0 : 18, clipBehavior: Clip.hardEdge, decoration: const BoxDecoration(), - duration: const Duration(milliseconds: 300), - curve: Curves.bounceInOut, + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, padding: const EdgeInsets.only(right: 4), child: Icon( Icons.edit_outlined, @@ -304,8 +305,8 @@ class ChatListItem extends StatelessWidget { ), const SizedBox(width: 8), AnimatedContainer( - duration: const Duration(milliseconds: 300), - curve: Curves.bounceInOut, + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, padding: const EdgeInsets.symmetric(horizontal: 7), height: unreadBubbleSize, width: diff --git a/lib/pages/chat_list/navi_rail_item.dart b/lib/pages/chat_list/navi_rail_item.dart index bcd70aae0..ed8f5e163 100644 --- a/lib/pages/chat_list/navi_rail_item.dart +++ b/lib/pages/chat_list/navi_rail_item.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:fluffychat/config/app_config.dart'; +import '../../config/themes.dart'; class NaviRailItem extends StatelessWidget { final String toolTip; @@ -31,7 +32,8 @@ class NaviRailItem extends StatelessWidget { left: 0, child: AnimatedContainer( width: isSelected ? 4 : 0, - duration: const Duration(milliseconds: 200), + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, decoration: BoxDecoration( color: Theme.of(context).colorScheme.primary, borderRadius: const BorderRadius.only( diff --git a/lib/pages/chat_list/start_chat_fab.dart b/lib/pages/chat_list/start_chat_fab.dart index 5abac9b4d..6dda4a51f 100644 --- a/lib/pages/chat_list/start_chat_fab.dart +++ b/lib/pages/chat_list/start_chat_fab.dart @@ -3,6 +3,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:vrouter/vrouter.dart'; +import '../../config/themes.dart'; import 'chat_list.dart'; class StartChatFloatingActionButton extends StatelessWidget { @@ -55,13 +56,13 @@ class StartChatFloatingActionButton extends StatelessWidget { @override Widget build(BuildContext context) { return AnimatedContainer( - duration: const Duration(milliseconds: 200), - curve: Curves.easeInOut, + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, width: controller.filteredRooms.isEmpty ? null : controller.scrolledToTop ? 144 - : 64, + : 56, child: controller.scrolledToTop ? FloatingActionButton.extended( backgroundColor: Theme.of(context).colorScheme.primary, diff --git a/lib/pages/dialer/pip/constants.dart b/lib/pages/dialer/pip/constants.dart deleted file mode 100644 index 5dfbd72db..000000000 --- a/lib/pages/dialer/pip/constants.dart +++ /dev/null @@ -1 +0,0 @@ -const defaultAnimationDuration = Duration(milliseconds: 200); diff --git a/lib/pages/dialer/pip/pip_view.dart b/lib/pages/dialer/pip/pip_view.dart index 15a175395..95fd195a5 100644 --- a/lib/pages/dialer/pip/pip_view.dart +++ b/lib/pages/dialer/pip/pip_view.dart @@ -1,6 +1,6 @@ import 'package:flutter/material.dart'; -import 'constants.dart'; +import 'package:fluffychat/config/themes.dart'; import 'dismiss_keyboard.dart'; class PIPView extends StatefulWidget { @@ -45,11 +45,11 @@ class PIPViewState extends State with TickerProviderStateMixin { super.initState(); _corner = widget.initialCorner; _toggleFloatingAnimationController = AnimationController( - duration: defaultAnimationDuration, + duration: FluffyThemes.animationDuration, vsync: this, ); _dragAnimationController = AnimationController( - duration: defaultAnimationDuration, + duration: FluffyThemes.animationDuration, vsync: this, ); } diff --git a/lib/pages/homeserver_picker/homeserver_picker_view.dart b/lib/pages/homeserver_picker/homeserver_picker_view.dart index 4ea3a20ea..1fafc6d3f 100644 --- a/lib/pages/homeserver_picker/homeserver_picker_view.dart +++ b/lib/pages/homeserver_picker/homeserver_picker_view.dart @@ -5,6 +5,7 @@ import 'package:url_launcher/url_launcher.dart'; import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/widgets/layouts/login_scaffold.dart'; +import '../../config/themes.dart'; import 'homeserver_app_bar.dart'; import 'homeserver_picker.dart'; @@ -29,9 +30,9 @@ class HomeserverPickerView extends StatelessWidget { // usually forced to logout as TOR browser is non-persistent AnimatedContainer( height: controller.isTorBrowser ? 64 : 0, - duration: const Duration(milliseconds: 300), + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, clipBehavior: Clip.hardEdge, - curve: Curves.bounceInOut, decoration: const BoxDecoration(), child: Material( clipBehavior: Clip.hardEdge, diff --git a/lib/pages/settings/settings_view.dart b/lib/pages/settings/settings_view.dart index 911fd6c47..048cee4fa 100644 --- a/lib/pages/settings/settings_view.dart +++ b/lib/pages/settings/settings_view.dart @@ -6,6 +6,7 @@ import 'package:vrouter/vrouter.dart'; import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/utils/platform_infos.dart'; +import '../../config/themes.dart'; import '../../widgets/content_banner.dart'; import 'settings.dart'; @@ -42,9 +43,9 @@ class SettingsView extends StatelessWidget { children: [ AnimatedContainer( height: controller.showChatBackupBanner ? 54 : 0, - duration: const Duration(milliseconds: 300), + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, clipBehavior: Clip.hardEdge, - curve: Curves.bounceInOut, decoration: const BoxDecoration(), child: ListTile( leading: const Icon(Icons.backup_outlined), diff --git a/lib/pages/story/story_view.dart b/lib/pages/story/story_view.dart index d3c314d79..8b60033d4 100644 --- a/lib/pages/story/story_view.dart +++ b/lib/pages/story/story_view.dart @@ -15,6 +15,7 @@ import 'package:fluffychat/utils/platform_infos.dart'; import 'package:fluffychat/utils/string_color.dart'; import 'package:fluffychat/utils/url_launcher.dart'; import 'package:fluffychat/widgets/avatar.dart'; +import '../../config/themes.dart'; import '../../widgets/m2_popup_menu_button.dart'; class StoryView extends StatelessWidget { @@ -247,7 +248,8 @@ class StoryView extends StatelessWidget { onHorizontalDragStart: controller.hold, onHorizontalDragEnd: controller.unhold, child: AnimatedContainer( - duration: const Duration(milliseconds: 200), + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, padding: const EdgeInsets.symmetric( horizontal: 16.0, vertical: 80, diff --git a/lib/widgets/connection_status_header.dart b/lib/widgets/connection_status_header.dart index afd05b230..7d58b000f 100644 --- a/lib/widgets/connection_status_header.dart +++ b/lib/widgets/connection_status_header.dart @@ -5,6 +5,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:matrix/matrix.dart'; +import '../config/themes.dart'; import '../utils/localized_exception_extension.dart'; import 'matrix.dart'; @@ -42,8 +43,8 @@ class ConnectionStatusHeaderState extends State { client.prevBatch != null; return AnimatedContainer( - duration: const Duration(milliseconds: 200), - curve: Curves.bounceInOut, + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, height: hide ? 0 : 36, clipBehavior: Clip.hardEdge, decoration: BoxDecoration(color: Theme.of(context).colorScheme.surface), diff --git a/lib/widgets/layouts/side_view_layout.dart b/lib/widgets/layouts/side_view_layout.dart index d0955cbab..a3dab39b7 100644 --- a/lib/widgets/layouts/side_view_layout.dart +++ b/lib/widgets/layouts/side_view_layout.dart @@ -31,7 +31,8 @@ class SideViewLayout extends StatelessWidget { color: Theme.of(context).dividerColor, ), AnimatedContainer( - duration: const Duration(milliseconds: 300), + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, clipBehavior: Clip.antiAlias, decoration: const BoxDecoration(), width: hideSideView ? 0 : 360.0, diff --git a/lib/widgets/mxc_image.dart b/lib/widgets/mxc_image.dart index 2414ae2dc..495fb9ec9 100644 --- a/lib/widgets/mxc_image.dart +++ b/lib/widgets/mxc_image.dart @@ -5,6 +5,7 @@ import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; import 'package:matrix/matrix.dart'; +import 'package:fluffychat/config/themes.dart'; import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_file_extension.dart'; import 'package:fluffychat/widgets/matrix.dart'; @@ -32,9 +33,9 @@ class MxcImage extends StatefulWidget { this.placeholder, this.isThumbnail = true, this.animated = false, - this.animationDuration = const Duration(milliseconds: 200), + this.animationDuration = FluffyThemes.animationDuration, this.retryDuration = const Duration(seconds: 2), - this.animationCurve = Curves.linear, + this.animationCurve = FluffyThemes.animationCurve, this.thumbnailMethod = ThumbnailMethod.scale, this.cacheKey, Key? key,