All Projects → kalismeras61 → Flutter_page_transition

kalismeras61 / Flutter_page_transition

Licence: bsd-2-clause
This is Flutter Page Transition Package

Programming Languages

dart
5743 projects

Projects that are alternatives of or similar to Flutter page transition

Motion-Tab-Bar
A beautiful animated flutter widget package library. The tab bar will attempt to use your current theme out of the box, however you may want to theme it.
Stars: ✭ 237 (-24.52%)
Mutual labels:  flutter-plugin, flutter-apps
Google nav bar
A modern google style nav bar for flutter.
Stars: ✭ 290 (-7.64%)
Mutual labels:  flutter-apps, flutter-plugin
liquid button
Liquify your buttons, web demo at website
Stars: ✭ 18 (-94.27%)
Mutual labels:  flutter-plugin, flutter-apps
getx-snippets-intelliJ
An extension to accelerate the process of developing applications with flutter, aimed at everyone using the GetX package.
Stars: ✭ 52 (-83.44%)
Mutual labels:  flutter-plugin, flutter-apps
A-Complete-Guide-To-Flutter
This repo contains all the small snippets related to Flutter Apps. Most of the projects/apps are deployed on Flutter Web using GitHub Actions CI Pipeline.
Stars: ✭ 70 (-77.71%)
Mutual labels:  flutter-plugin, flutter-apps
getwidget-docs
Get Widgets UI library docs.
Stars: ✭ 17 (-94.59%)
Mutual labels:  flutter-plugin, flutter-apps
Web Vuw
A Web View for flutter
Stars: ✭ 40 (-87.26%)
Mutual labels:  flutter-plugin, flutter-apps
Flutter Apps Collection
This is a repository of a collection of apps made in flutter
Stars: ✭ 98 (-68.79%)
Mutual labels:  flutter-apps, flutter-plugin
Flutter-Apps
🌀 This is mainly focus on a complete application for production
Stars: ✭ 18 (-94.27%)
Mutual labels:  flutter-plugin, flutter-apps
flutter-tunein
Dynamically themed Music Player built with flutter
Stars: ✭ 108 (-65.61%)
Mutual labels:  flutter-plugin, flutter-apps
flutter bolg manage
Flutter实战项目,采用Getx框架管理,遵循Material design设计风格,适合您实战参考或练手
Stars: ✭ 373 (+18.79%)
Mutual labels:  flutter-plugin, flutter-apps
Qrcode scanner
🛠 Flutter QR code scanner plugin.
Stars: ✭ 274 (-12.74%)
Mutual labels:  flutter-apps, flutter-plugin
Flutterexampleapps
[Example APPS] Basic Flutter apps, for flutter devs.
Stars: ✭ 15,950 (+4979.62%)
Mutual labels:  flutter-apps, flutter-plugin
flutter-app
Full Feature Todos Flutter Mobile app with fireStore integration.
Stars: ✭ 138 (-56.05%)
Mutual labels:  flutter-plugin, flutter-apps
Flutter Credit Card Input Form
Flutter Credit Card Input form
Stars: ✭ 201 (-35.99%)
Mutual labels:  flutter-apps, flutter-plugin
swipedetector
A Flutter package to detect up, down, left, right swipes.
Stars: ✭ 34 (-89.17%)
Mutual labels:  flutter-plugin, flutter-apps
Awesome Flutter
An awesome list that curates the best Flutter libraries, tools, tutorials, articles and more.
Stars: ✭ 38,582 (+12187.26%)
Mutual labels:  flutter-apps, flutter-plugin
Math Metrix
This is Math-Puzzle game made in flutter and available on Playstore & AppStore
Stars: ✭ 48 (-84.71%)
Mutual labels:  flutter-apps, flutter-plugin
nepali date picker
Material Style Date Picker with Bikram Sambat(Nepali) Calendar Support. Supports both Android and ios.
Stars: ✭ 30 (-90.45%)
Mutual labels:  flutter-plugin, flutter-apps
http middleware
A middleware library for Dart's http library.
Stars: ✭ 38 (-87.9%)
Mutual labels:  flutter-plugin, flutter-apps

Flutter Page Transition Package

This package gives you beautiful page transitions.

flutter platform pub package BSD-2-Clause

Demo

Usage

It is really easy to use! You should ensure that you add the page_transition as a dependency in your flutter project.

dependencies:
  page_transition: "^1.1.7+6"

Than you can use it with below examples.

Navigator.push(context, PageTransition(type: PageTransitionType.fade, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.leftToRight, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.topToBottom, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.bottomToTop, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.scale, alignment: Alignment.bottomCenter, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.size, alignment: Alignment.bottomCenter, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.rotate, duration: Duration(second: 1), child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeftWithFade, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.leftToRightWithFade, child: DetailScreen()));

Usage for predefined routes

First, define the onGenerateRoute property in the MaterialApp widget like below and in switch cases you can transition to your new routes:

  onGenerateRoute: (settings) {
    switch (settings.name) {
      case '/second':
        return PageTransition(child: SecondPage(), type: PageTransitionType.scale);
        break;
      default:
        return null;
    }
  },

After that you can use your new route like this:

Navigator.pushNamed(context, '/second');

Usage predefined routes with RouteSettings

First, define the onGenerateRoute property in the MaterialApp widget like below and in switch cases you can transition to your new routes:

   onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/second':
            return PageTransition(
              child: SecondPage(),
              type: PageTransitionType.scale,
              settings: settings,
            );
            break;
          default:
            return null;
        }
      },

After that you can use your new route like this:

Navigator.pushNamed(context, '/second', arguments: "arguments data");

for more detail you can look example project.

Usage routes with Inherited Theme

set ctx with BuildContext. ctx mandatory when inheritTheme set to true

Navigator.push(
      context,
      PageTransition(
        type: PageTransitionType.rightToLeft,
        child: TargetPage(),
        inheritTheme: true,
        ctx: context),
);

Types of transitions

  • fade
  • rightToLeft
  • leftToRight
  • topToBottom
  • bottomToTop
  • scale (with alignment)
  • rotate (with alignment)
  • size (with alignment)
  • rightToLeftWithFade,
  • leftToRightWithFade,
  • leftToRightJoined,
  • rightToLeftJoined,

Curves

You can use any type of CurvedAnimation curves.

Alignments

You can use size, scale and rotate transform alignment

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

BSD 2-Clause

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].