easing transactions

master
gitea 2 months ago
parent ffd1ac5ddc
commit 9743f9a8ec

@ -7,6 +7,7 @@ import '../../data/recipes/recipe_service.dart';
import '../../data/recipes/models/recipe_model.dart';
import '../add_recipe/add_recipe_screen.dart';
import '../photo_gallery/photo_gallery_screen.dart';
import '../navigation/material3_page_route.dart';
/// Favourites screen displaying user's favorite recipes.
class FavouritesScreen extends StatefulWidget {
@ -165,8 +166,9 @@ class _FavouritesScreenState extends State<FavouritesScreen> {
void _viewRecipe(RecipeModel recipe) async {
await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => AddRecipeScreen(recipe: recipe, viewMode: true),
Material3PageRoute(
child: AddRecipeScreen(recipe: recipe, viewMode: true),
useEmphasized: true, // Use emphasized easing for more fluid feel
),
);
// Reload favourites after viewing (in case favorite was toggled)
@ -177,8 +179,9 @@ class _FavouritesScreenState extends State<FavouritesScreen> {
void _editRecipe(RecipeModel recipe) async {
final result = await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => AddRecipeScreen(recipe: recipe),
Material3PageRoute(
child: AddRecipeScreen(recipe: recipe),
useEmphasized: true, // Use emphasized easing for more fluid feel
),
);
if (result == true || mounted) {

@ -6,6 +6,7 @@ import '../../data/recipes/models/recipe_model.dart';
import '../shared/primary_app_bar.dart';
import '../add_recipe/add_recipe_screen.dart';
import '../navigation/main_navigation_scaffold.dart';
import '../navigation/material3_page_route.dart';
import 'package:video_player/video_player.dart';
/// Home screen showing recipes overview, stats, tags, and favorites.
@ -90,8 +91,9 @@ class _HomeScreenState extends State<HomeScreen> {
void _navigateToRecipe(RecipeModel recipe) async {
final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AddRecipeScreen(recipe: recipe, viewMode: true),
Material3PageRoute(
child: AddRecipeScreen(recipe: recipe, viewMode: true),
useEmphasized: true, // Use emphasized easing for more fluid feel
),
);
// Reload data if recipe was edited

@ -0,0 +1,74 @@
import 'package:flutter/material.dart';
/// Material Design 3 easing curves
/// Reference: https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration
class Material3Easing {
/// Standard easing curve for entering animations
/// Cubic(0.2, 0, 0, 1)
static const Curve standardEnter = Cubic(0.2, 0, 0, 1);
/// Standard easing curve for exiting animations
/// Cubic(0, 0, 0.2, 1)
static const Curve standardExit = Cubic(0, 0, 0.2, 1);
/// Emphasized easing curve for entering animations
/// Cubic(0.2, 0, 0, 1)
static const Curve emphasizedEnter = Cubic(0.2, 0, 0, 1);
/// Emphasized easing curve for exiting animations
/// Cubic(0.05, 0.7, 0.1, 1)
static const Curve emphasizedExit = Cubic(0.05, 0.7, 0.1, 1);
}
/// Material Design 3 page route with custom easing animations.
///
/// Uses Material Design 3 motion guidelines for smooth, fluid transitions.
/// Reference: https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration
class Material3PageRoute<T> extends PageRouteBuilder<T> {
final Widget child;
final bool useEmphasized;
Material3PageRoute({
required this.child,
this.useEmphasized = false,
RouteSettings? settings,
}) : super(
pageBuilder: (context, animation, secondaryAnimation) => child,
transitionDuration: useEmphasized
? const Duration(milliseconds: 400)
: const Duration(milliseconds: 300),
reverseTransitionDuration: useEmphasized
? const Duration(milliseconds: 400)
: const Duration(milliseconds: 300),
settings: settings,
transitionsBuilder: (context, animation, secondaryAnimation, child) {
// Use Material Design 3 easing curves
final enterCurve = useEmphasized
? Material3Easing.emphasizedEnter
: Material3Easing.standardEnter;
final exitCurve = useEmphasized
? Material3Easing.emphasizedExit
: Material3Easing.standardExit;
// Apply easing curves to animations
final curvedAnimation = CurvedAnimation(
parent: animation,
curve: enterCurve,
reverseCurve: exitCurve,
);
// Slide transition with fade
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(0.0, 0.05), // Slight upward slide
end: Offset.zero,
).animate(curvedAnimation),
child: FadeTransition(
opacity: curvedAnimation,
child: child,
),
);
},
);
}

@ -9,6 +9,7 @@ import '../../data/local/models/item.dart';
import '../add_recipe/add_recipe_screen.dart';
import '../photo_gallery/photo_gallery_screen.dart';
import '../navigation/main_navigation_scaffold.dart';
import '../navigation/material3_page_route.dart';
import 'bookmark_dialog.dart';
import '../../data/recipes/models/bookmark_category_model.dart';
@ -382,8 +383,9 @@ class _RecipesScreenState extends State<RecipesScreen> with WidgetsBindingObserv
void _viewRecipe(RecipeModel recipe) async {
await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => AddRecipeScreen(recipe: recipe, viewMode: true),
Material3PageRoute(
child: AddRecipeScreen(recipe: recipe, viewMode: true),
useEmphasized: true, // Use emphasized easing for more fluid feel
),
);
// Always reload recipes after viewing/editing to ensure UI is up-to-date

Loading…
Cancel
Save

Powered by TurnKey Linux.