|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="utf-8"> |
| 5 | + <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| 6 | + <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"> |
| 7 | + <meta name="generator" content="made with love by dartdoc 0.39.0"> |
| 8 | + <meta name="description" content="page_transition API docs, for the Dart programming language."> |
| 9 | + <title>page_transition - Dart API docs</title> |
| 10 | + |
| 11 | + |
| 12 | + <link rel="preconnect" href="https://fonts.gstatic.com"> |
| 13 | + <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap" rel="stylesheet"> |
| 14 | + <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
| 15 | + <link rel="stylesheet" href="static-assets/github.css"> |
| 16 | + <link rel="stylesheet" href="static-assets/styles.css"> |
| 17 | + <link rel="icon" href="static-assets/favicon.png"> |
| 18 | + |
| 19 | +</head> |
| 20 | + |
| 21 | +<body data-base-href="" |
| 22 | + data-using-base-href="false"> |
| 23 | + |
| 24 | +<div id="overlay-under-drawer"></div> |
| 25 | + |
| 26 | +<header id="title"> |
| 27 | + <button id="sidenav-left-toggle" type="button"> </button> |
| 28 | + <ol class="breadcrumbs gt-separated dark hidden-xs"> |
| 29 | + <li><a href="https://github.com/kalismeras61/flutter_page_transition">page_transition package</a></li> |
| 30 | + </ol> |
| 31 | + <div class="self-name">page_transition</div> |
| 32 | + <form class="search navbar-right" role="search"> |
| 33 | + <input type="text" id="search-box" autocomplete="off" disabled class="form-control typeahead" placeholder="Loading search..."> |
| 34 | + </form> |
| 35 | +</header> |
| 36 | + |
| 37 | +<main> |
| 38 | + |
| 39 | + <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left"> |
| 40 | + <header id="header-search-sidebar" class="hidden-l"> |
| 41 | + <form class="search-sidebar" role="search"> |
| 42 | + <input type="text" id="search-sidebar" autocomplete="off" disabled class="form-control typeahead" placeholder="Loading search..."> |
| 43 | + </form> |
| 44 | + </header> |
| 45 | + |
| 46 | + <ol class="breadcrumbs gt-separated dark hidden-l" id="sidebar-nav"> |
| 47 | + <li><a href="https://github.com/kalismeras61/flutter_page_transition">page_transition package</a></li> |
| 48 | + </ol> |
| 49 | + |
| 50 | + <h5 class="hidden-xs"><span class="package-name">page_transition</span> <span class="package-kind">package</span></h5> |
| 51 | + <ol> |
| 52 | + <li class="section-title">Libraries</li> |
| 53 | + <li><a href="page_transition/page_transition-library.html">page_transition</a></li> |
| 54 | + </ol> |
| 55 | + </div> |
| 56 | + |
| 57 | + <div id="dartdoc-main-content" class="main-content"> |
| 58 | + <section class="desc markdown"> |
| 59 | + <h1 id="flutter-page-transition-package">Flutter Page Transition Package</h1> |
| 60 | +<p>This package gives you beautiful page transitions. |
| 61 | +<br/><br/></p> |
| 62 | +<p><a href="https://flutter.io"><img src="https://img.shields.io/badge/Platform-Flutter-yellow.svg" alt="flutter platform"></a> |
| 63 | +<a href="https://pub.dartlang.org/packages/page_transition"><img src="https://img.shields.io/pub/v/page_transition.svg" alt="pub package"></a> |
| 64 | +<a href="https://opensource.org/licenses/"><img src="https://img.shields.io/badge/BSD-2-Clause.svg?style=flat-square" alt="BSD-2-Clause"></a></p> |
| 65 | +<h2 id="demo">Demo</h2><img src="https://www.yasinilhan.com/page_transition/transition.gif" width="340" height="640" title="Screen Shoot"> |
| 66 | +<h2 id="usage">Usage</h2> |
| 67 | +<p>It is really easy to use! |
| 68 | +You should ensure that you add the <code>page_transition</code> as a dependency in your flutter project.</p> |
| 69 | +<pre class="language-yaml"><code class="language-yaml">dependencies: |
| 70 | + page_transition: "^1.1.7+6" |
| 71 | +</code></pre> |
| 72 | +<p>Than you can use it with below examples.</p> |
| 73 | +<pre class="language-dart"><code class="language-dart">Navigator.push(context, PageTransition(type: PageTransitionType.fade, child: DetailScreen())); |
| 74 | + |
| 75 | +Navigator.push(context, PageTransition(type: PageTransitionType.leftToRight, child: DetailScreen())); |
| 76 | + |
| 77 | +Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: DetailScreen())); |
| 78 | + |
| 79 | +Navigator.push(context, PageTransition(type: PageTransitionType.topToBottom, child: DetailScreen())); |
| 80 | + |
| 81 | +Navigator.push(context, PageTransition(type: PageTransitionType.bottomToTop, child: DetailScreen())); |
| 82 | + |
| 83 | +Navigator.push(context, PageTransition(type: PageTransitionType.scale, alignment: Alignment.bottomCenter, child: DetailScreen())); |
| 84 | + |
| 85 | +Navigator.push(context, PageTransition(type: PageTransitionType.size, alignment: Alignment.bottomCenter, child: DetailScreen())); |
| 86 | + |
| 87 | +Navigator.push(context, PageTransition(type: PageTransitionType.rotate, duration: Duration(second: 1), child: DetailScreen())); |
| 88 | + |
| 89 | +Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeftWithFade, child: DetailScreen())); |
| 90 | + |
| 91 | +Navigator.push(context, PageTransition(type: PageTransitionType.leftToRightWithFade, child: DetailScreen())); |
| 92 | +</code></pre> |
| 93 | +<h2 id="usage-for-predefined-routes">Usage for predefined routes</h2> |
| 94 | +<p>First, define the <code>onGenerateRoute</code> property in the <code>MaterialApp</code> widget like below and in switch cases you can transition to your new routes:</p> |
| 95 | +<pre class="language-dart"><code class="language-dart"> onGenerateRoute: (settings) { |
| 96 | + switch (settings.name) { |
| 97 | + case '/second': |
| 98 | + return PageTransition(child: SecondPage(), type: PageTransitionType.scale); |
| 99 | + break; |
| 100 | + default: |
| 101 | + return null; |
| 102 | + } |
| 103 | + }, |
| 104 | +</code></pre> |
| 105 | +<p>After that you can use your new route like this:</p> |
| 106 | +<pre class="language-dart"><code class="language-dart">Navigator.pushNamed(context, '/second'); |
| 107 | +</code></pre> |
| 108 | +<h3 id="usage-predefined-routes-with-routesettings">Usage predefined routes with RouteSettings</h3> |
| 109 | +<p>First, define the <code>onGenerateRoute</code> property in the <code>MaterialApp</code> widget like below and in switch cases you can transition to your new routes:</p> |
| 110 | +<pre class="language-dart"><code class="language-dart"> onGenerateRoute: (settings) { |
| 111 | + switch (settings.name) { |
| 112 | + case '/second': |
| 113 | + return PageTransition( |
| 114 | + child: SecondPage(), |
| 115 | + type: PageTransitionType.scale, |
| 116 | + settings: settings, |
| 117 | + ); |
| 118 | + break; |
| 119 | + default: |
| 120 | + return null; |
| 121 | + } |
| 122 | + }, |
| 123 | +</code></pre> |
| 124 | +<p>After that you can use your new route like this:</p> |
| 125 | +<pre class="language-dart"><code class="language-dart">Navigator.pushNamed(context, '/second', arguments: "arguments data"); |
| 126 | +</code></pre> |
| 127 | +<p>for more detail you can look example project.</p> |
| 128 | +<h3 id="usage-routes-with-inherited-theme">Usage routes with Inherited Theme</h3> |
| 129 | +<p>set <code>ctx</code> with BuildContext. <code>ctx</code> mandatory when inheritTheme set to <code>true</code></p> |
| 130 | +<pre class="language-dart"><code class="language-dart">Navigator.push( |
| 131 | + context, |
| 132 | + PageTransition( |
| 133 | + type: PageTransitionType.rightToLeft, |
| 134 | + child: TargetPage(), |
| 135 | + inheritTheme: true, |
| 136 | + ctx: context), |
| 137 | +); |
| 138 | +</code></pre> |
| 139 | +<h2 id="types-of-transitions">Types of transitions</h2> |
| 140 | +<ul> |
| 141 | +<li>fade</li> |
| 142 | +<li>rightToLeft</li> |
| 143 | +<li>leftToRight</li> |
| 144 | +<li>topToBottom</li> |
| 145 | +<li>bottomToTop</li> |
| 146 | +<li>scale (with alignment)</li> |
| 147 | +<li>rotate (with alignment)</li> |
| 148 | +<li>size (with alignment)</li> |
| 149 | +<li>rightToLeftWithFade,</li> |
| 150 | +<li>leftToRightWithFade,</li> |
| 151 | +<li>leftToRightJoined,</li> |
| 152 | +<li>rightToLeftJoined,</li> |
| 153 | +</ul> |
| 154 | +<h2 id="curves">Curves</h2> |
| 155 | +<p>You can use any type of CurvedAnimation <a href="https://docs.flutter.io/flutter/animation/Curves-class.html">curves</a>.</p> |
| 156 | +<h2 id="alignments">Alignments</h2> |
| 157 | +<p>You can use size, scale and rotate transform <a href="https://docs.flutter.io/flutter/painting/Alignment-class.html">alignment</a></p> |
| 158 | +<h2 id="contributing">Contributing</h2> |
| 159 | +<p>Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.</p> |
| 160 | +<p>Please make sure to update tests as appropriate.</p> |
| 161 | +<h2 id="license">License</h2> |
| 162 | +<p><a href="https://opensource.org/licenses/BSD-2-Clause">BSD 2-Clause</a></p> |
| 163 | + </section> |
| 164 | + |
| 165 | + <section class="summary"> |
| 166 | + <h2>Libraries</h2> |
| 167 | + <dl> |
| 168 | + <dt id="page_transition"> |
| 169 | + <span class="name"><a href="page_transition/page_transition-library.html">page_transition</a></span> |
| 170 | + </dt> |
| 171 | + <dd> |
| 172 | + |
| 173 | + </dd> |
| 174 | + </dl> |
| 175 | + </section> |
| 176 | + |
| 177 | + </div> <!-- /.main-content --> |
| 178 | + |
| 179 | + <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right"> |
| 180 | + </div> |
| 181 | + |
| 182 | +</main> |
| 183 | + |
| 184 | +<footer> |
| 185 | + <span class="no-break"> |
| 186 | + page_transition |
| 187 | + 1.1.7+6 |
| 188 | + </span> |
| 189 | + |
| 190 | +</footer> |
| 191 | + |
| 192 | +<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
| 193 | +<script src="static-assets/typeahead.bundle.min.js"></script> |
| 194 | +<script src="static-assets/highlight.pack.js"></script> |
| 195 | +<script src="static-assets/script.js"></script> |
| 196 | + |
| 197 | + |
| 198 | +</body> |
| 199 | + |
| 200 | +</html> |
0 commit comments