best-flutter / transformer_page_view

PageTransformer for flutter

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

Basic

See code here

See code here

See code here

See code here

See code here

See code here

Getting Started

• Installation
• Basic Usage
• Build-in Parallax
• Custom animation

Installation

Add

transformer_page_view:

to your pubspec.yaml ,and run

flutter packages get 

in your project's root directory.

Basic Usage

Parameter	Default	Description
scrollDirection	Axis.horizontal	If Axis.horizontal, the scroll view's children are arranged horizontally in a row instead of vertically in a column.
loop	false	Set to true to enable continuous loop mode.
index	none	Index 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
onPageChanged	void onPageChanged(int index)	Called with the new index when the user swiped
duration	new Duration(milliseconds:300)	The milliseconds of every transaction animation costs
transformer	none	The 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
itemCount	none	Number of the total items
itemBuilder	none	A 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

transformer_page_view's Issues

Go Next and Previous Screen with button

How can i go to next or previous screen by implement the button

Plz make fade transition

Page calculation is wrong for first calculation

If the position has no max- or minScrollExtent the realPage is not correctly calculated. This results in rendering issues in other libraries (flutter_swiper) that depend on it.

overlapping transform

How do I avoid overlapping when swipe with transform as below?

class DeckTransformer extends PageTransformer {
  @override
  Widget transform(Widget item, TransformInfo info) {
    double position = info.position;
    if (position <= 0) {
      return item;    
    } else if (position <= 1) {
      return Transform.translate(
        offset: Offset(0, -info.height * position),
        child: item,
      );
    }
    return item;
  }
}

TransformerPageView(
   scrollDirection: Axis.horizontal, 
   transformer: DeckTransformer(),

Sorry for posting help request in issue.

viewportFraction don't work

i try to use viewportFraction: 0.8 make three view in the screen,but it don't work.
and i use
pageController: TransformerPageController(
viewportFraction: 0.8,
),
it's work

Next and previous buttons

Good day

This Is an excellent plugin

I am wondering how we can control this pages with next and previous buttons

use ]flutter_swiper plugins, throw this error

Launching lib/main.dart on M811 in debug mode...
Built build/app/outputs/apk/debug/app-debug.apk.
I/flutter (10707): ══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (10707): The following NoSuchMethodError was thrown during a scheduler callback:
I/flutter (10707): The method 'findRenderObject' was called on null.
I/flutter (10707): Receiver: null
I/flutter (10707): Tried calling: findRenderObject()
I/flutter (10707): When the exception was thrown, this was the stack:
I/flutter (10707): #0 Object.noSuchMethod (dart:core/runtime/libobject_patch.dart:50:5)
I/flutter (10707): #1 _TransformerPageViewState._onGetSize
package:transformer_page_view/transformer_page_view.dart:455
I/flutter (10707): #2 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback
package:flutter/…/scheduler/binding.dart:988
I/flutter (10707): #3 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame
package:flutter/…/scheduler/binding.dart:936
I/flutter (10707): #4 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame
package:flutter/…/scheduler/binding.dart:840
I/flutter (10707): #8 _invoke (dart:ui/hooks.dart:209:10)
I/flutter (10707): #9 _drawFrame (dart:ui/hooks.dart:168:3)
I/flutter (10707): (elided 3 frames from package dart:async)
I/flutter (10707): ════════════════════════════════════════════════════════════════════════════════════════════════════

Could you please add a License?

Add orientation for parallax effect

I'm using lib for vertical page view, but parallax effect is only available on horizontal (position is affecting vertical position).
Is there any solution?

Unable to start

Hi guys,
i get an issue just after installation of this plugin.

Unable to find modules for some sources, this is usually the result of either a
bad import, a missing dependency in a package (or possibly a dev_dependency
needs to move to a real dependency), or a build failure (if importing a
generated file).

Please check the following imports:

import 'package:transformer_page_view/transformer_page_view.dart'; from project|lib/pages/login/index.dart at 12:1

Failed after 144ms

After short debugging i noticed that in the plugin:

** Imports are made like this:
import 'package:transformer_page_view/transformer_page_view.dart';
=>
Instead i think we you need to use related path :
import './transformer_page_view.dart';

After that, it starts working on the project when i put package files into the project without pubspec.yaml.

But when i use pubspec.yaml to load the package it dosen't works even if i done these modifications.

Could you please check this ?

Other thing I'm using the Beta channel of Flutter;

Thanks

Scrolling to last index upon adding new data dynamically

I am showing 10 pages on loading. When the user came to 10th page, I am fetching next 10 pages and adding to the list dynamically. When I added the data, It is directly going to last index.

How to run auto slide?

how to run auto slide after set duration?
duration: new Duration(milliseconds:500)

License

add license!

MIT?

Migrate to null-safety

Migrate existing code to null-safety.

Full Description
Since last week, Flutter 2.0 hit stable branch. With 2.0 we've received Dart 2.12 with new sound null safety mechanism. Current transformer_page_view package doesn't support null-safety yet therefore migration is a must.

Example Code
Migration will touch most of the code. Key objectives here is to utilise dart migrate so all of the heavy lifting is done. And after that, run the build and fix places, that were fixed incorrectly by the tool.

Platforms
Migration will touch all of the platforms.

Research Resources
null-safety is unavoidable thus sooner or later it must be done.
https://dart.dev/null-safety

Additional
This will be a heavy migration therefore careful code review is a must from one or more developers, after everything is done.

How can I use Parallax transformer in basic PageView.builder?

I have a basic page view with 3 pges and I have my own content. How can I use Parallax transformer?

  final _controller = new PageController();
  final List<Widget> _pages = [
    Page1(),
    Page2(),
    Page3(),
  ];
  int page = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    bool isDone = page == _pages.length - 1;
    return new Scaffold(
        backgroundColor: Colors.transparent,
        drawer: new PrimeDrawer(index: page),
        body: new Stack(
          children: <Widget>[
            // FULL PAGE
            new Positioned.fill(
              child: new PageView.builder(
                physics: new AlwaysScrollableScrollPhysics(),
                controller: _controller,
                itemCount: _pages.length,
                itemBuilder: (BuildContext context, int index) {
                  return _pages[index % _pages.length];
                },
                onPageChanged: (int p) {
                  setState(() {
                    page = p;
                  });
                },
              ),
            ),

 //TOP BAR
            new Positioned(
              top: 0.0,
              left: 0.0,
              right: 0.0,
              child: new SafeArea(
                child: AppBar(
                  backgroundColor: Colors.transparent,
                  elevation: 0.0,
                  primary: false,
                  actions: <Widget>[
                    FlatButton(
                      child: Icon(
                        isDone ? Icons.home : Icons.arrow_forward_ios,
                        size: 20,
                        color: Colors.white,
                      ),
                      onPressed: isDone
                          ? () {
                              //Navigator.pop(context);
                              _controller.animateToPage(0,
                                  duration: Duration(milliseconds: 200),
                                  curve: Curves.easeOut);
                            }
                          : () {
                              _controller.animateToPage(page + 1,
                                  duration: Duration(milliseconds: 200),
                                  curve: Curves.easeIn);
                            },
                    )
                  ],
                ),
              ),
            ),

 new Positioned(
              bottom: 10.0,
              left: 0.0,
              right: 0.0,
              child: new SafeArea(
                child: new Column(
                  children: <Widget>[
                    new Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: new DotsIndicator(
                        controller: _controller,
                        itemCount: _pages.length,
                        onPageSelected: (int page) {
                          _controller.animateToPage(
                            page,
                            duration: const Duration(milliseconds: 300),
                            curve: Curves.ease,
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),

Page Controller

No page controller property for TransformerPageView.builder.

Reveal or Cover Content

Any idea how to have a transition where the current content stays fixed in position and when you swipe, the new content gets revealed to cover the current/old content?

Also, the other way around: Current/old content slides away and new content gets revealed under it.

Thanks

please check pull request 11

Im getting a lot of errors if this fix is not in.

#11

move to next child and doesn't loop around again

Hi there,

Thank you so much for the awesome plugin!
I have two questions..
I have in my walkthrough pages a next button .. which if i click it will slide to next child .. is it possible to do that?
the other questions is .. i have 3 pages .. when am in 3 i don't want it to loop again to 1 .. and the same when am in page 1 i don't want it to go back to 3 when sliding .. is it possible to stop the loop?

Thank you so much!

Getting error "childManager" and "viewportFraction" are not defined

Getting error "childManager" and "viewportFraction" are not defined at

MyViewPort(
{@required RenderSliverBoxChildManager childManager,
double viewportFraction = 1.0,
this.itemCount})
: super(childManager: childManager, viewportFraction: viewportFraction);

Maximum Scrollable Page View

Hi,

I found that TransformerPageView has been limited to 40 pages in my app.

I am still wondering, did it happen by design of this package, or it was caused from Sqlite query result which may limit the result by default.

thanks

put page indicator in Transformer_Page_View

Hi
how can I put page indicator in Transformer_Page_View?

可以添加个书籍翻页的那种动画吗

如题

No Open Source License File.

It would be better to add LICENSE like MIT or Apache License 2.0 etc.

cf. https://choosealicense.com/no-permission/

NoSuchMethodError: The method '*' was called on null.

flutter 1.12.13
{StatckTrace=#0 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:366)
#1 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:204)
#2 _TransformerPageViewState.onChangeNotifier (package:transformer_page_view/transformer_page_view.dart:606)
#3 ChangeNotifier.notifyListeners (package:flutter/src/foundation/change_notifier.dart:206)
#4 IndexController.next (package:transformer_page_view/index_controller.dart:30)
#5 _SwiperTimerMixin._onTimer (package:flutter_swiper/src/swiper.dart:370)
#6 _rootRunUnary (dart:async/zone.dart:1134)
#7 _CustomZone.runUnary (dart:async/zone.dart:1031)
#8 _CustomZone.runUnaryGuarded (dart:async/zone.dart:933)
#9 _CustomZone.bindUnaryCallbackGuarded. (dart:async/zone.dart:970)
#10 _rootRunUnary (dart:async/zone.dart:1138)
#11 _CustomZone.runUnary (dart:async/zone.dart:1031)
#12 _CustomZone.bindUnaryCallback. (dart:async/zone.dart:954)
#13 _Timer._runTimers (dart:isolate-patch/timer_impl.dart:384)
#14 _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:418)
#15 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:174)
, FlutterErrorDetail=}

There is no built-in transformer

I cleaned the project, checked the lib version (0.1.6) but it can't find transformers, also I've checked the downloaded files inside External Libraries and there is no transformer either.

I suggest add buildin_transformers.dart file inside the lib.

Add dots

Add dots and customize width when selected.

could you review the Pull request for null safety

could you review the Pull request for null safety