<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flutter samples</title>
<link href="styles.css" rel="stylesheet" media="screen">
<link href="https://fonts.googleapis.com/css?family=Google+Sans|Google+Sans+Display|Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="packages/mdc_web/material-components-web.min.js"></script>
<script src="https://kit.fontawesome.com/16cc04762e.js"></script>
<script defer src="description.dart.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-67589403-8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-67589403-8');
</script>
</head>
<body>
<div class="content">
<div class="navbar">
<a class="leading" href="./">
<img src="images/logos/logo_lockup_flutter_horizontal_wht_96.png" />
<span class="title">Samples</span>
</a>
<div class="nav-items">
<a href="https://flutter.dev/">Flutter Home</a>
<a href="https://api.flutter.dev/">API Docs</a>
</div>
</div>
<div class="container">
<div class="description-title-row">
<h1>Animate a page route transition</h1>
<div class="type-label type-label-bordered">cookbook</div>
</div>
<p>By Flutter</p>
<div class="toolbar">
<div class="buttons">
<button class="mdc-button mdc-button--outlined" onclick="window.location.href = 'https://flutter.dev/docs/cookbook/animation/page-route-animation.html';"> <span class="mdc-button__ripple"></span>View Recipe</button>
</div>
<div class="tags-container">
<div class="tags-label">
<i class="material-icons">local_offer</i>
<span>Tags</span>
</div>
<div class="tags">
<a href="./#?search=tag%3Acookbook">cookbook</a>
<a href="./#?search=tag%3Aanimation">animation</a>
</div>
</div>
</div>
<div class="slider-container">
<div class="slider-content">
<div class="slider-single"><img class="slider-single-image" src="images/cookbook/animation-page-route-animation.png" alt="Cookbook article" /></div>
</div>
</div>
<div class="description">
<p>A design language, such as Material, defines standard behaviors when
transitioning between routes (or screens). Sometimes, though, a custom
transition between screens can make an app more unique. To help,
PageRouteBuilder provides an Animation object.
This Animation can be used with Tween and
Curve objects to customize the transition animation.
This recipe shows how to transition between
routes by animating the new route into view from
the bottom of the screen.</p>
</div>
</div>
</div>
</body>
<div class="footer">
<span>© Flutter 2022</span>
</div>
</html>