mirror of
https://github.com/krille-chan/fluffychat
synced 2024-09-10 09:05:10 +00:00
refactor: Same animations everywhere in app
This commit is contained in:
parent
1c632bead9
commit
4376070733
20 changed files with 60 additions and 37 deletions
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
const defaultAnimationDuration = Duration(milliseconds: 200);
|
|
@ -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<PIPView> 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,
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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: <Widget>[
|
||||
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),
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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<ConnectionStatusHeader> {
|
|||
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),
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue