fluttercommunity / page_turn

Page Turn Widget - Add a page turn effect to widgets in your app. Maintainer: @rodydavis

Page Turn Widget

Add a page turn effect to widgets in your app.

Created by Simon Lightfoot @slightfoot

Screenshots

Example

import 'package:flutter/material.dart';

import 'package:page_turn/page_turn.dart';

import '../common/index.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({
    Key key,
  }) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final _controller = GlobalKey<PageTurnState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageTurn(
        key: _controller,
        backgroundColor: Colors.white,
        showDragCutoff: false,
        lastPage: Container(child: Center(child: Text('Last Page!'))),
        children: <Widget>[
          for (var i = 0; i < 20; i++) AlicePage(page: i),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.search),
        onPressed: () {
          _controller.currentState.goToPage(2);
        },
      ),
    );
  }
}

page_turn's Issues

Error on load from different screen

Issue description

Error when calling from screen during Navigator.push

Console log

E/flutter ( 8171): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: NoSuchMethodError: The method 'toImage' was called on null.
E/flutter ( 8171): Receiver: null
E/flutter ( 8171): Tried calling: toImage()
E/flutter ( 8171): #0      RenderRepaintBoundary.toImage (package:flutter/src/rendering/proxy_box.dart:2901)
E/flutter ( 8171): #1      _PageTurnWidgetState._captureImage (package:page_turn/src/builders/widget.dart:40)
E/flutter ( 8171): #2      SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1102)
E/flutter ( 8171): #3      SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1049)
E/flutter ( 8171): #4      SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:957)
E/flutter ( 8171): #5      _rootRun (dart:async/zone.dart:1126)
E/flutter ( 8171): #6      _CustomZone.run (dart:async/zone.dart:1023)
E/flutter ( 8171): #7      _CustomZone.runGuarded (dart:async/zone.dart:925)
E/flutter ( 8171): #8      _invoke (dart:ui/hooks.dart:259)
E/flutter ( 8171): #9      _drawFrame (dart:ui/hooks.dart:217)

PageTurn + Flutter WebView

Hi guys. I'm trying to use your plugin with Flutter WebView to render an epub file. The problem is that it seems that the PageTurn plugin doesn't work as expected when using Flutter WebView. All the pages are blank when using them together. Below the example main.dart I'm running:

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:page_turn/page_turn.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final _controller = GlobalKey<PageTurnState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageTurn(
        key: _controller,
        backgroundColor: Colors.white,
        showDragCutoff: false,
        lastPage: Container(child: Center(child: Text('Last Page!'))),
        children: <Widget>[
          for (var i = 0; i < 20; i++) WebViewWidget(),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.search),
        onPressed: () {
          _controller.currentState.goToPage(2);
        },
      ),
    );
  }
}

class WebViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final htmlExample = "<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>";
    return WebView(
        initialUrl: Uri.dataFromString(
              htmlExample,
              mimeType: 'text/html',
              encoding: Encoding.getByName('utf-8')
            ).toString(),
        javascriptMode: JavascriptMode.unrestricted,
        initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
      );
  }
}

And the pubspec.yaml:

name: page_turn_webview
description: A new Flutter project.

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  # Webview
  webview_flutter: ^0.3.20+2
  page_turn: ^1.0.1


dev_dependencies:
  flutter_test:
    sdk: flutter

  uses-material-design: true

it crashes when you have so many widgets!!!

Migration of the package to null safety

Getting issues in the implementation of the package in null-safety project.
A new version of the package migrated to null safety should be published in the pub.dev

PR #15 should be merged!!!

Detect when the page has been changed

I want to play an audio that reads the book whenever the page has been changed, but I am having a hard time figuring it out how to do that exactly.
How would I detect when a page has been changed?

Does not work in profile mode

In my case it looks fine in debug mode but when I run the app as profile mode it throws an exception

E/flutter ( 4423): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: Failed 
assertion: boolean expression must not be null
E/flutter ( 4423): #0      _PageTurnWidgetState._captureImage (package:page_turn/src/builders/widget.dart:40)
E/flutter ( 4423): #1      SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1113)
E/flutter ( 4423): #2      SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1060)
E/flutter ( 4423): #3      SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:968)
E/flutter ( 4423): #4      _rootRun (dart:async/zone.dart:1184)
E/flutter ( 4423): #5      _CustomZone.run (dart:async/zone.dart:1077)
E/flutter ( 4423): #6      _CustomZone.runGuarded (dart:async/zone.dart:979)
E/flutter ( 4423): #7      _invoke (dart:ui/hooks.dart:261)
E/flutter ( 4423): #8      _drawFrame (dart:ui/hooks.dart:219)
E/flutter ( 4423): 

The picture does not show when the number of pages is relatively small

Each page of my project is not a text, but a network picture. However, when the number of pages is relatively small, the picture will not be displayed after the project is started, and the picture will appear after clicking hot reload. If the number of pages is large, such as 20 pages, the picture will be displayed directly after the project is started. I use android studio 3.6.1

show two pages in landscape mode

How to show two pages just like a book while in landscape mode, How to achieve this?

works in debug but throws Unhandled in release build

Nice work - much appreciated however..
Compiling in release mode throws this:
Unhandled Exception: LateInitializationError: Local 'result' has not been initialized.

it seems to be related to the following line in builders/widget.dart
WidgetsBinding.instance!.addPostFrameCallback(_captureImage);

Symptom: perfect in debug, blank screen in release
Fixing it is beyond my skill as I'm just learning.

E/flutter (18180): #2 _PageTurnWidgetState._captureImage (package:ssv1/book_screen/builders/widget.dart:40)
E/flutter (18180): #3 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144)
E/flutter (18180): #4 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1090)
E/flutter (18180): #5 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:998)
E/flutter (18180): #6 _rootRun (dart:async/zone.dart:1354)
E/flutter (18180): #7 _CustomZone.run (dart:async/zone.dart:1258)
E/flutter (18180): #8 _CustomZone.runGuarded (dart:async/zone.dart:1162)
E/flutter (18180): #9 _invoke (dart:ui/hooks.dart:167)
E/flutter (18180): #10 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:259)
E/flutter (18180): #11 _drawFrame (dart:ui/hooks.dart:126)
E/flutter (18180):
E/flutter (18180): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: LateInitializationError: Local 'result' has not been initialized.
E/flutter (18180): #0 LateError._throwLocalNotInitialized (dart:_internal-patch/internal_patch.dart:208)
E/flutter (18180): #1 RenderObject.debugNeedsPaint (package:flutter/src/rendering/object.dart:2112)
E/flutter (18180): #2 _PageTurnWidgetState._captureImage (package:ssv1/book_screen/builders/widget.dart:40)
E/flutter (18180): #3 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144)
E/flutter (18180): #4 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1090)
E/flutter (18180): #5 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:998)
E/flutter (18180): #6 _rootRun (dart:async/zone.dart:1354)
E/flutter (18180): #7 _CustomZone.run (dart:async/zone.dart:1258)
E/flutter (18180): #8 _CustomZone.runGuarded (dart:async/zone.dart:1162)
E/flutter (18180): #9 _invoke (dart:ui/hooks.dart:167)
E/flutter (18180): #10 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:259)
E/flutter (18180): #11 _drawFrame (dart:ui/hooks.dart:126)
E/flutter (18180):
E/flutter (18180): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: LateInitializationError: Local 'result' has not been initialized.
E/flutter (18180): #0 LateError._throwLocalNotInitialized (dart:_internal-patch/internal_patch.dart:208)
E/flutter (18180): #1 RenderObject.debugNeedsPaint (package:flutter/src/rendering/object.dart:2112)
E/flutter (18180): #2 _PageTurnWidgetState._captureImage (package:ssv1/book_screen/builders/widget.dart:40)
E/flutter (18180): #3 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144)
E/flutter (18180): #4 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1090)
E/flutter (18180): #5 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:998)
E/flutter (18180): #6 _rootRun (dart:async/zone.dart:1354)
E/flutter (18180): #7 _CustomZone.run (dart:async/zone.dart:1258)
E/flutter (18180): #8 _CustomZone.runGuarded (dart:async/zone.dart:1162)
E/flutter (18180): #9 _invoke (dart:ui/hooks.dart:167)
E/flutter (18180): #10 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:259)
E/flutter (18180): #11 _drawFrame (dart:ui/hooks.dart:126)
E/flutter (18180):
E/flutter (18180): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: LateInitializationError: Local 'result' has not been initialized.
E/flutter (18180): #0 LateError._throwLocalNotInitialized (dart:_internal-patch/internal_patch.dart:208)
E/flutter (18180): #1 RenderObject.debugNeedsPaint (package:flutter/src/rendering/object.dart:2112)
E/flutter (18180): #2 _PageTurnWidgetState._captureImage (package:ssv1/book_screen/builders/widget.dart:40)
E/flutter (18180): #3 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144)
E/flutter (18180): #4 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1090)
E/flutter (18180): #5 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:998)
E/flutter (18180): #6 _rootRun (dart:async/zone.dart:1354)
E/flutter (18180): #7 _CustomZone.run (dart:async/zone.dart:1258)
E/flutter (18180): #8 _CustomZone.runGuarded (dart:async/zone.dart:1162)
E/flutter (18180): #9 _invoke (dart:ui/hooks.dart:167)
E/flutter (18180): #10 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:259)
E/flutter (18180): #11 _drawFrame (dart:ui/hooks.dart:126)
E/flutter (18180):
E/flutter (18180): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: LateInitializationError: Local 'result' has not been initialized.
E/flutter (18180): #0 LateError._throwLocalNotInitialized (dart:_internal-patch/internal_patch.dart:208)
E/flutter (18180): #1 RenderObject.debugNeedsPaint (package:flutter/src/rendering/object.dart:2112)
E/flutter (18180): #2 _PageTurnWidgetState._captureImage (package:ssv1/book_screen/builders/widget.dart:40)
E/flutter (18180): #3 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144)
E/flutter (18180): #4 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1090)
E/flutter (18180): #5 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:998)
E/flutter (18180): #6 _rootRun (dart:async/zone.dart:1354)
E/flutter (18180): #7 _CustomZone.run (dart:async/zone.dart:1258)
E/flutter (18180): #8 _CustomZone.runGuarded (dart:async/zone.dart:1162)
E/flutter (18180): #9 _invoke (dart:ui/hooks.dart:167)
E/flutter (18180): #10 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:259)
E/flutter (18180): #11 _drawFrame (dart:ui/hooks.dart:126)
E/flutter (18180):
E/flutter (18180): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: LateInitializationError: Local 'result' has not been initialized.
E/flutter (18180): #0 LateError._throwLocalNotInitialized (dart:_internal-patch/internal_patch.dart:208)
E/flutter (18180): #1 RenderObject.debugNeedsPaint (package:flutter/src/rendering/object.dart:2112)
E/flutter (18180): #2 _PageTurnWidgetState._captureImage (package:ssv1/book_screen/builders/widget.dart:40)
E/flutter (18180): #3 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144)
E/flutter (18180): #4 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1090)
E/flutter (18180): #5 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:998)
E/flutter (18180): #6 _rootRun (dart:async/zone.dart:1354)
E/flutter (18180): #7 _CustomZone.run (dart:async/zone.dart:1258)
E/flutter (18180): #8 _CustomZone.runGuarded (dart:async/zone.dart:1162)
E/flutter (18180): #9 _invoke (dart:ui/hooks.dart:167)
E/flutter (18180): #10 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:259)
E/flutter (18180): #11 _drawFrame (dart:ui/hooks.dart:126)

No Right to Left swiping (for Arabic as an example)

I can't make the swiping from Right to Left as I'm using this package for an Arabic text. It'd be a good addition if added.

Not working well with Flutter 1.20

I'm having issues getting this to be performant in Flutter 1.20.
It's impossible to use on a simulator and pretty choppy on an actual device.
Am I doing something wrong or is this how it is?

EDIT: I was testing on an iPad. I've since tested on multiple devices. It works pretty well on Android devices and some iPhone devices but is hardly runnable on the iPad.
I think the issue has to do with the device's pixel ratio.

Blurred text on pages

Due to the selected rendering method (capturing the image and then rendering it) the all fonts on page are blurred.

May be when animation amount.value == 1 it's better to render not as a picture, but as usual?

Now there is very poor font clarity. Even on example page of package we can see this.

lots of issue please improved this issue

• page zoom IN zomeOut ( main problem )

• list view , grid view.

• please add sound effects when page trun new page

• some time freeze page few mint

Flutter web support

I can't get this working on web. Both the example website and when I compile it jump to the last page and throws an exception:

Debug service listening on ws://127.0.0.1:53824/Ao0v8w6pq20=

�[38;5;248m════════ Exception caught by scheduler library ═════════════════════════════════�[39;49m
�[38;5;244mThe following assertion was thrown during a scheduler callback:�[39;49m
Assertion failed: org-dartlang-sdk:///flutter_web_sdk/lib/_engine/engine/surface/scene_builder.dart:267:12
retainedSurface.isActive || retainedSurface.isReleased
is not true

�[38;5;244mWhen the exception was thrown, this was the stack�[39;49m
�[38;5;248mthrow_ (package:build_web_compilers/src/dev_compiler/C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart:196:49)�[39;49m
�[38;5;248massertFailed (package:build_web_compilers/src/dev_compiler/C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart:26:3)�[39;49m
�[38;5;248maddRetained (package:build_web_compilers/src/dev_compiler/C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/surface/scene_builder.dart:267:55)�[39;49m
�[38;5;244m[_addToSceneWithRetainedRendering]�[39;49m
�[38;5;244maddChildrenToScene�[39;49m
�[38;5;244m...�[39;49m
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

I would love to use this on web. Is there any solution or is this an engine issue?

ListViews as children

Give the ability to put listviews/pageviews/gridviews as children with top-down scroll gestures

RangeError on first page.

Whenever i am swiping for previous page on first page it gives this error. which seems right that i dont have any page before this. but problem is, app freezes for 10-15 seconds before normal execution. I was wondering if i need to handle this type of exeception or can you add a drag effect which can be seen in ListView when scrolling is over...