transformer_page_view 0.1.6

Build Status PRs Welcome pub package

transformer_page_view #

PageTransformer for flutter

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 view

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

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

3 build-in parallaxes are all used in subclass of PageTransform,group these parallaxes together, we can create very cool things.

Inspired by page-transformer, and we have an easier way to create this.

See code here

Custom animation #

[0.1.6] - [2019.03.22]

* Fix setState() called after dispose()

[0.1.5] - [2019.03.10]

* Fix findRenderObject is null

[0.1.4] - [2018.10.19]

* Fix display items when itemCount changes

[0.1.3] - [2018.10.18]

* Fix zero item count

[0.1.1] - [2018.10.10]

* Fix next/previous index in none loop mode.

[0.1.0] - [2018.10.08]

* Implement `TransformerPageController`

[0.0.8] - [2018.09.20]

* Ignore not valid event

[0.0.7] - [2018.09.20]

* Fix bugs

[0.0.6] - [2018.09.20]

* Fix bugs

[0.0.5] - [2018.09.19]

* Fix bugs

[0.0.4] - [2018.09.19]

* Fix bugs

[0.0.2] - [2018.08.30]

* Update readme

[0.0.1] - [2018.08.30]

* Basic animation

example/README.md

example #

A new Flutter application.

Getting Started #

For help getting started with Flutter, view our online documentation.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  transformer_page_view: ^0.1.6

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:transformer_page_view/transformer_page_view.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
92
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80
Overall:
Weighted score of the above. [more]
92
Learn more about scoring.

We analyzed this package on Jul 22, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.3

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/transformer_page_view.dart.

Run flutter format to format lib/transformer_page_view.dart.

Maintenance suggestions

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.50.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_driver
flutter_test

Admin