A sample for having PageView transformation effects in Flutter.

Overview

What is it?

The end result looks a little something like this:

PageTransformer sample.

Sample project for creating nice looking PageView parallax effects in Flutter.

Read the blogpost here.

All the related source code is located in the /lib folder; no separate Android / iOS code needed.

Comments
  • Problems if initialPage is not 0, have to scroll a little to trigger the NotificationListener

    Problems if initialPage is not 0, have to scroll a little to trigger the NotificationListener

    Hi, thank you for your library! But I think the page transformer doesn't work well if the initial page is not zero. Scrolling a little triggers the NotificationListener and then everything is fine.

    Here are some screenshots.

    schermata 2018-10-13 alle 11 58 53 schermata 2018-10-13 alle 11 59 05
    opened by vmihalachi 2
  • Error running Gradle

    Error running Gradle

    flutter run Launching lib/main.dart on ONEPLUS A5010 in debug mode... Initializing gradle... 0.7s Resolving dependencies...

    • Error running Gradle: ProcessException: Process "/Users/pixarise/Code/page-transformer/android/gradlew" exited abnormally:

    BUILD FAILED

    Total time: 0.606 secs

    FAILURE: Build failed with an exception.

    • Where: Build file '/Users/pixarise/Code/page-transformer/android/build.gradle' line: 3

    • What went wrong: A problem occurred evaluating root project 'android'.

    Could not find method google() for arguments [] on repository container.

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Command: /Users/pixarise/Code/page-transformer/android/gradlew app:properties

    Please review your Gradle project setup in the android/ folder.

    opened by gousta 3
  • minor calculation bug in PageVisibilityResolver

    minor calculation bug in PageVisibilityResolver

    Correct _calculatePagePosition() for case when PageVisibilityResolver has null (initial) properties, and PageController.initialPage is non-zero. I expect this will fix https://github.com/roughike/page-transformer/issues/7

    opened by manangatangy 1
  • Dart2

    Dart2

    Hi guys,

    I use your lib in my project. After time, I upgrade the project with Dart 2 and now I have the important issue, so I cannot compile

    Running "flutter packages upgrade" in baby_learn_with_game...
    The current Dart SDK version is 2.1.0-dev.1.0.flutter-ccb16f7282. Because baby_learn_with_game depends on page_transformer any which requires SDK version <2.0.0, version solving failed.
    pub upgrade failed (1)

    Have idea how to fix it?

    J

    opened by pjcau 2
  • PagerView Indicator

    PagerView Indicator

    If someone is looking for a page indicator as well.

      DotsIndicator({
        this.controller,
        this.itemCount,
        this.onPageSelected,
        this.color: Colors.white,
      }) : super(listenable: controller);
    
      /// The PageController that this DotsIndicator is representing.
      final PageController controller;
    
      /// The number of items managed by the PageController
      final int itemCount;
    
      /// Called when a dot is tapped
      final ValueChanged<int> onPageSelected;
    
      /// The color of the dots.
      ///
      /// Defaults to `Colors.white`.
      final Color color;
    
      // The base size of the dots
      static const double _kDotSize = 8.0;
    
      // The increase in the size of the selected dot
      static const double _kMaxZoom = 2.0;
    
      // The distance between the center of each dot
      static const double _kDotSpacing = 25.0;
    
      Widget _buildDot(int index) {
        double selectedness = Curves.easeOut.transform(
          max(
            0.0,
            1.0 - ((controller.page ?? controller.initialPage) - index).abs(),
          ),
        );
        double zoom = 1.0 + (_kMaxZoom - 1.0) * selectedness;
        return new Container(
          width: _kDotSpacing,
          child: new Center(
            child: new Material(
              color: color,
              type: MaterialType.circle,
              child: new Container(
                width: _kDotSize * zoom,
                height: _kDotSize * zoom,
                child: new InkWell(
                  onTap: () => onPageSelected(index),
                ),
              ),
            ),
          ),
        );
      }
    
      Widget build(BuildContext context) {
        return new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: new List<Widget>.generate(itemCount, _buildDot),
        );
      }
    }
    

    Reference

    opened by sawankumarbundelkhandi 0
Owner
Iiro Krankka
Iiro Krankka
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button Language: English | 中文简体 Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's h

FlutterCandies 357 Dec 27, 2022
Flutter Smooth PageView indicators

smooth_page_indicator Customizable animated page indicator with a set of built-in effects. infinite Loop support [new] Scrolling dots effect Effects E

Milad akarie 859 Jan 5, 2023
A Flutter PageView Indicator has Worm animation

Worm Indicator A Flutter PageView indicator insprired by worm animation. It can be easily integrated with any Flutter PageView. Pull requests are welc

Phuc Huynh 11 May 3, 2022
Facilitator for having a Splash Screen with a Flare animation

flare_splash_screen Facilitator for having a Splash screen with a Flare animation until some work has been done for the initialization of the app If y

Jimmy Aumard 94 Oct 6, 2022
Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.

Lottie for Flutter Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and rende

Xavier H. 894 Jan 2, 2023
A flutter package which contains a collection of some cool and beautiful effects; support android and ios

flutter effects A flutter package which contains a collection of some cool and beautiful effects; support android and ios . Screenshot type support ch

大海豚 462 Jan 3, 2023
Render After Effects animations natively on Flutter

Draw Lottie files on a Flutter Widget

Bouziani Mohammed 2 Mar 10, 2022
Add particle effects to anything.

Showcase Features Highly customizable (Don't like my particle effects? Make your own with little effort!) Very easy to use A lot of premade particles

Norbert Kozsir 271 Oct 2, 2022
Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider.

DrawApp Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider. All code free to

Jake Gough 226 Nov 3, 2022
🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Ayush Agarwal 1.4k Jan 6, 2023
This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS

AwesomeFlutterUI The purpose of this repository is to demonstrate the use of different widgets and tricks in flutter and how to use them in your proje

Subir Chakraborty 132 Nov 13, 2022
This is a Flutter URL preview plugin for Flutter that previews the content of a URL

flutter_link_preview This is a URL preview plugin that previews the content of a URL Language: English | 中文简体 Special feature Use multi-processing to

yung 67 Nov 2, 2022
Flutter liquid swipe - Liquid Swipe Animation Built With Flutter

Flutter Liquid Swipe liquid Swipe animation is amazing and its Created for iOS P

Jahongir Anvarov 6 Dec 1, 2022
A candy sorter game made with Flutter for the march flutter challenge.

A candy sorter game made with Flutter for the march flutter challenge.

Debjeet Das 1 Apr 9, 2022
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ Flutter Spinkit A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit. ?? Installing dependencies:

Jeremiah Ogbomo 2.7k Dec 30, 2022
A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

drawing_animation From static SVG assets See more examples in the showcasing app. Dynamically created from Path objects which are animated over time m

null 442 Dec 27, 2022
Flutter package for creating awesome animations.

?? Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. ?? fully tested ?? well documented ?? e

Felix Blaschke 879 Dec 31, 2022
Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

null 472 Jan 9, 2023
A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Potato Open Sauce Project 6 Apr 26, 2022