Skip to content

Commit

Permalink
Redesign enter exit animation specs
Browse files Browse the repository at this point in the history
Add examples to custom modal types
  • Loading branch information
ulusoyca committed Jun 30, 2024
1 parent d9863f5 commit da2fa58
Show file tree
Hide file tree
Showing 17 changed files with 483 additions and 21 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ class AddWaterDescriptionModalPage {
return WoltModalSheetCloseButton(onClosed: Navigator.of(context).pop);
}),
child: const Padding(
padding: EdgeInsets.only(bottom: (2 * WoltElevatedButton.height) + 8),
padding: EdgeInsets.only(bottom: (2 * WoltElevatedButton.defaultHeight) + 8),
child: Padding(
padding: EdgeInsets.all(16.0),
child: ModalSheetContentText(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ class GrindOrRejectModalPage {
),
trailingNavBarWidget: const WoltModalSheetCloseButton(),
child: const Padding(
padding: EdgeInsets.only(bottom: (2 * WoltElevatedButton.height) + 48),
padding: EdgeInsets.only(bottom: (2 * WoltElevatedButton.defaultHeight) + 48),
child: Padding(
padding: EdgeInsets.all(16.0),
child:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ class OfferRecommendationModalPage {
16,
16,
16,
index == tileCount - 1 ? WoltElevatedButton.height * 2 : 0,
index == tileCount - 1 ? WoltElevatedButton.defaultHeight * 2 : 0,
),
child: ExtraRecommendationTile(
recommendation: recommendation,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ class GrindOrRejectModalPage extends WoltModalSheetPage {
) : super(
child: const Padding(
padding:
EdgeInsets.only(bottom: (2 * WoltElevatedButton.height) + 48),
EdgeInsets.only(bottom: (2 * WoltElevatedButton.defaultHeight) + 48),
child: Padding(
padding: EdgeInsets.all(16.0),
child: ModalSheetContentText(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ class OfferRecommendationModalPage {
16,
16,
16,
index == tileCount - 1 ? WoltElevatedButton.height * 2 : 0,
index == tileCount - 1 ? WoltElevatedButton.defaultHeight * 2 : 0,
),
child: ExtraRecommendationTile(
recommendation: recommendation,
Expand Down
4 changes: 3 additions & 1 deletion demo_ui_components/lib/src/button/wolt_elevated_button.dart
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,19 @@ class WoltElevatedButton extends StatelessWidget {
this.enabled = true,
this.colorName = WoltColorName.blue,
this.theme = WoltElevatedButtonTheme.primary,
this.height = defaultHeight,
required this.onPressed,
required this.child,
});

static const height = 56.0;
static const defaultHeight = 56.0;

final WoltColorName colorName;
final WoltElevatedButtonTheme theme;
final bool enabled;
final VoidCallback onPressed;
final Widget child;
final double height;

@override
Widget build(BuildContext context) {
Expand Down
3 changes: 3 additions & 0 deletions demo_ui_components/lib/src/colors/wolt_colors.dart
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ class WoltColors {
static const red16 = Color(0xFFFEDFDC);
static const red8 = Color(0xFFFFEFEE);

static const yellow = Color(0xFFFEA90D);
static const yellow8 = Color(0xFFFFF9EC);

static const blue = Color(0xFF009DE0);
static const blue64 = Color(0xFF5CC0EB);
static const blue48 = Color(0xFF99D8F3);
Expand Down
1 change: 0 additions & 1 deletion lib/src/modal_type/wolt_modal_type.dart
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'package:wolt_modal_sheet/src/modal_type/wolt_modal_dismiss_direction.dart';
import 'package:wolt_modal_sheet/wolt_modal_sheet.dart';

export 'wolt_bottom_sheet_type.dart';
Expand Down
1 change: 1 addition & 0 deletions lib/wolt_modal_sheet.dart
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export 'src/modal_page/sliver_wolt_modal_sheet_page.dart';
export 'src/modal_page/wolt_modal_sheet_page.dart';
export 'src/modal_page/non_scrolling_wolt_modal_sheet_page.dart';
export 'src/modal_type/wolt_modal_type.dart';
export 'src/modal_type/wolt_modal_dismiss_direction.dart';
export 'src/theme/wolt_modal_sheet_theme_data.dart';
export 'src/wolt_modal_sheet.dart';
export 'src/wolt_modal_sheet_route.dart';
Expand Down
99 changes: 99 additions & 0 deletions playground/lib/home/custom_sheets/floating_bottom_sheet_type.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import 'package:flutter/material.dart';
import 'package:wolt_modal_sheet/wolt_modal_sheet.dart';

class FloatingBottomSheetType extends WoltModalType {
final EdgeInsetsDirectional padding;
static const Duration _defaultEnterDuration = Duration(milliseconds: 350);
static const Duration _defaultExitDuration = Duration(milliseconds: 300);

const FloatingBottomSheetType({
this.padding = const EdgeInsetsDirectional.all(16.0),
}) : super(
shapeBorder: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(28.0)),
),
showDragHandle: false,
dismissDirection: WoltModalDismissDirection.down,
transitionDuration: _defaultEnterDuration,
reverseTransitionDuration: _defaultExitDuration,
);

@override
String routeLabel(BuildContext context) {
final MaterialLocalizations localizations = MaterialLocalizations.of(context);
return localizations.bottomSheetLabel;
}

@override
BoxConstraints layoutModal(Size availableSize) {
const padding = 32.0;
final availableWidth = availableSize.width;
double width = availableWidth > 523.0 ? 312.0 : availableWidth - padding;

if (availableWidth > 523.0) {
width = 312.0;
} else if (availableWidth > 240.0) {
width = 240.0;
} else {
width = availableWidth * 0.7;
}

return BoxConstraints(
minWidth: width,
maxWidth: width,
minHeight: 0,
maxHeight: availableSize.height * 0.8,
);
}
@override
Offset positionModal(Size availableSize, Size modalContentSize, TextDirection textDirection) {
return Offset(
availableSize.width - modalContentSize.width - padding.end,
availableSize.height - modalContentSize.height - padding.bottom,
);
}

@override
Widget buildTransitions(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
final alphaAnimation = Tween<double>(
begin: 0.0,
end: 1.0,
).animate(CurvedAnimation(
parent: animation,
curve: const Interval(0.0, 100.0 / 300.0, curve: Curves.linear),
reverseCurve: const Interval(100.0 / 250.0, 1.0, curve: Curves.linear),
));

final slideAnimation = Tween<Offset>(
begin: const Offset(1, 1),
end: Offset.zero,
).animate(CurvedAnimation(
parent: animation,
curve: Curves.easeInOutCubic,
));

final scaleAnimation = Tween<double>(
begin: 0.0,
end: 1.0,
).animate(CurvedAnimation(
parent: animation,
curve: Curves.easeInOutCubic,
));

return FadeTransition(
opacity: alphaAnimation,
child: SlideTransition(
position: slideAnimation,
child: ScaleTransition(
scale: scaleAnimation,
child: child,
),
),
);
}
}
81 changes: 81 additions & 0 deletions playground/lib/home/custom_sheets/top_notification_sheet_type.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:wolt_modal_sheet/wolt_modal_sheet.dart';

class TopNotificationSheetType extends WoltModalType {
final EdgeInsetsDirectional padding;

const TopNotificationSheetType({
this.padding = const EdgeInsetsDirectional.all(32.0),
}) : super(
shapeBorder: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(24)),
),
dismissDirection: WoltModalDismissDirection.up,
showDragHandle: false,
);

@override
String routeLabel(BuildContext context) {
final MaterialLocalizations localizations = MaterialLocalizations.of(context);
return localizations.dialogLabel;
}

@override
BoxConstraints layoutModal(Size availableSize) {
final availableWidth = availableSize.width;
double width = availableWidth > 523.0 ? 312.0 : availableWidth - padding.end;

if (availableWidth > 523.0) {
width = 312.0;
} else if (availableWidth > 240.0) {
width = 240.0;
} else {
width = availableWidth - padding.end;
}
return BoxConstraints(
minWidth: width,
maxWidth: width,
minHeight: 0,
maxHeight: availableSize.height * 0.6,
);
}

@override
Offset positionModal(Size availableSize, Size modalContentSize, TextDirection textDirection) {
final xOffset = max(0.0, (availableSize.width - modalContentSize.width) / 2);
final yOffset = padding.top;
return Offset(xOffset, yOffset);
}

@override
Widget buildTransitions(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
final alphaAnimation = Tween<double>(
begin: 0.0,
end: 1.0,
).animate(CurvedAnimation(
parent: animation,
curve: const Interval(0.0, 100.0 / 300.0, curve: Curves.linear),
reverseCurve: const Interval(100.0 / 250.0, 1.0, curve: Curves.linear),
));

return FadeTransition(
opacity: alphaAnimation,
child: SlideTransition(
position: animation.drive(
Tween(
begin: const Offset(0.0, -1.0),
end: Offset.zero,
).chain(CurveTween(curve: Curves.easeOutQuad)),
),
child: child,
),
);
}
}
31 changes: 30 additions & 1 deletion playground/lib/home/home_screen.dart
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import 'package:demo_ui_components/demo_ui_components.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:playground/home/custom_sheets/floating_bottom_sheet_type.dart';
import 'package:playground/home/custom_sheets/top_notification_sheet_type.dart';
import 'package:playground/home/pages/custom_sheet_pages/new_order_notification_page.dart';
import 'package:playground/home/pages/root_sheet_page.dart';
import 'package:wolt_modal_sheet/wolt_modal_sheet.dart';

Expand Down Expand Up @@ -122,7 +125,7 @@ class _HomeScreenState extends State<HomeScreen> {
const Text('RTL'),
],
),
const SizedBox(height: 4),
const SizedBox(height: 16),
SizedBox(
width: _contentWidth,
child: WoltElevatedButton(
Expand Down Expand Up @@ -182,12 +185,38 @@ class _HomeScreenState extends State<HomeScreen> {
child: const Text('Show Modal Sheet'),
),
),
const SizedBox(height: 12),
SizedBox(
width: _contentWidth,
child: WoltElevatedButton(
onPressed: () {
WoltModalSheet.show(
barrierDismissible: false,
context: context,
modalTypeBuilder: (_) => const TopNotificationSheetType(),
pageListBuilder: (_) => [NewOrderNotificationPage()],
);
},
child: const Text('Show Custom Modal Sheet'),
),
)
],
),
),
),
);
}),
floatingActionButton: FloatingActionButton(
onPressed: () {
WoltModalSheet.show(
barrierDismissible: false,
context: context,
modalTypeBuilder: (_) => const FloatingBottomSheetType(),
pageListBuilder: (_) => [NewOrderNotificationPage()],
);
},
child: const Icon(Icons.notifications_active),
)
);
}
}
Expand Down
Loading

0 comments on commit da2fa58

Please sign in to comment.