roughike / page-transformer

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 blogpost here.

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

page-transformer's Issues

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

Image from URL

What if I want to load an image from URL instead of loading it from assets/1.png, I want to load from www.example.com/assets/1.png

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

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.

PageView How to achieve overlapping pages？

Buttons at the last page

Thanks for the tutorial and the beautiful onboarding pages.
Can you show me how to add 2 buttons at the last page/screen and redirect to either register or login pages?

Thanks

Any way to get the current page index?

I want to change some part of the parent widget when the pager index changes. Is there any way to get the current page index?

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.