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
A package provides an easy way to add shimmer effect in Flutter project

Shimmer A package provides an easy way to add shimmer effect in Flutter project How to use import 'package:shimmer/shimmer.dart'; SizedBox( width:

HungHD 1.6k Jan 8, 2023
A flutter based liquid swipe

This repository contains the Liquid Swipe Flutter source code. Liquid swipe is the revealing clipper to bring off amazing liquid like swipe to stacked

Sahdeep Singh 987 Dec 28, 2022
photofilters library for flutter

Photo Filters package for flutter A flutter package for iOS and Android for applying filter to an image. A set of preset filters are also available. Y

Sharafudheen KK 336 Dec 23, 2022
Flutter Shine is a library for pretty and realistic shadows, dynamic light positions, extremely customizable shadows, no library dependencies, text or box shadows based on content.

Flutter Shine Show some ❤️ and star the repo to support the project Flutter widget inspired by Shine Installation Add the Package dependencies: flut

Jonathan Monga 139 Dec 16, 2022
A sample for having PageView transformation effects in Flutter.

What is it? The end result looks a little something like this: Sample project for creating nice looking PageView parallax effects in Flutter. Read the

Iiro Krankka 811 Dec 22, 2022
This flutter package contains a widget called DecodingTextEffect which is having some cool Decode Effects for texts.

This flutter package contains a widget called DecodingTextEffect which is having some cool Decode Effects for texts. Installing 1. Depend on it Add th

Aadarsh Patel 13 Nov 25, 2020
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
This is a Flutter app which shows how to use the PageView Class in your Flutter App

page_view_class A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Shehzaan Mansuri 1 Oct 25, 2021
Customizable Flutter widget which syncronize ScrollView with PageView as tabs

scrollable_list_tab_scroller Customizable Flutter widget which syncronize ScrollView with PageView as tabs. Create a custom page view as tabs which sy

Railson Ferreira de Souza 4 Dec 21, 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
Flutter pre-load PageView widget

PreloadPageView Like the name, this is the widget to support Pre-load function for PageView widget. For better user experience sometimes we need pre-l

Neil 106 Jan 6, 2023
Easy to use 3D Perspective PageView for Flutter

perspective_pageview With this you will be able to create 3D Perspective PageView in Flutter Easily Getting Started This project is a starting point f

Paras Jain 10 Nov 26, 2022
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
👆🏻 Builds indication marks for PageView.

PageViewIndicator Builds indication marks for PageView. Import import 'package:page_view_indicator/page_view_indicator.dart'; Usage Default Material b

Leo Cavalcante 159 Dec 21, 2022
The FlexGrid control provides a powerful and quickly way to display data in a tabular format. It is including that frozened column/row,loading more, high performance and better experience in TabBarView/PageView.

flex_grid Language: English| 中文简体 The FlexGrid control provides a powerful and quickly way to display data in a tabular format. It is including that f

FlutterCandies 39 Nov 8, 2022
Flutter Web application having splash screen and providing Web view Using web view packege.

Webview with Splash Screen in Flutter Flutter Web View With Splash Screen. Subscribe Our YouTube Channel. Visit Website Demo OutPut ?? Links Getting S

Habib ullah 1 Dec 7, 2021
"FlutterMoneyFormatter" is a Flutter extension to formatting various types of currencies according to the characteristics you like, without having to be tied to any localization.

FlutterMoneyFormatter FlutterMoneyFormatter is a Flutter extension to formatting various types of currencies according to the characteristics you like

Fadhly Permata 81 Jan 1, 2023
An Android Launcher (having Ubuntu-Gnome flavour) build with Flutter

Ubuntu Launcher Introduction Ubuntu launcher is an custom android launcher build with Flutter with a Ubuntu-Gnome look. Though flutter is a cross plat

5hifaT 252 Dec 22, 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