in ,

Page Transformer for flutter

transformer_page_view

Creating a page transformer requires good knowledge of animations and animation methods, properties, and how to couple them together to create various effects. An understanding of the page properties is also required to pair with the animation effects. Here is a Page Transformer for Flutter that will be very helpful for you with unique creativity and very attractive.

Very simple to use

import 'package:transformer_page_view/transformer_page_view.dart';

...

new TransformerPageView(
loop: true,
transformer: new AccordionTransformer(),
itemBuilder: (BuildContext context, int index) {
  return new Container(
    color: list[index%list.length],
    child: new Center(
      child: new Text("$index",style: new TextStyle(fontSize: 80.0,color: Colors.white),),
    ),
  );
},
itemCount: 3)

Almost the same as PageView.builder, simplely specify a transformer to TransformerPageView,
which is a sub class of PageTransformer

Show cases

Parallax

welcome

Basic

AccordionTransformer

See code here

ThreeDTransformer

See code here

ScaleAndFadeTransformer

See code here

ZoomInPageTransformer

See code here

ZoomOutPageTransformer

See code here

DepthPageTransformer

See code here

Getting Started

Installation

Add

transformer_page_view:


to your pubspec.yaml ,and run

flutter packages get 

in your project’s root directory.

Basic Usage

ParameterDefaultDescription
scrollDirectionAxis.horizontalIf Axis.horizontal, the scroll view’s children are arranged horizontally in a row instead of vertically in a column.
loopfalseSet to true to enable continuous loop mode.
indexnoneIndex number of initial slide. if not set , it is controlled by the widget itself,otherwise, it is controlled by another widget, which is returned by itemBuilder
onPageChangedvoid onPageChanged(int index)Called with the new index when the user swiped
durationnew Duration(milliseconds:300)The milliseconds of every transaction animation costs
transformernoneThe most important property of this widget, it returns a transformed widget that based on the widget parameter. If the value is null, a itemBuilder must be specified
itemCountnoneNumber of the total items
itemBuildernoneA function that returns a widget based on index,if it’s null,a transformer must be specified

Build-in Parallax

We provide 3 build-in parallaxes, which handle color、image and container

ParallaxColor

ParallaxColor handles the color transform, which controls the color transform from one to another.

ParallaxImage

ParallaxImage handles the image, which speed is slower than the PageView

ParallaxContainer

The ParallaxContainer cleverly handles the text or other staff, which speed is faster than the PageView. 

3 build-in parallaxes are all used in subclass of PageTransform, if we group these parallaxes together, we can create very beautiful and cool things. Let’s do it.

beauty

GitHub

https://github.com/best-flutter/transformer_page_view

Written by James

Show alert dialog or modal action sheet adaptively according to platform

A rich and easy-to-use flutter page transition package