Flutter fileimage not appearing in page flip animation widget - pdf

Question

I want to create a book app like google's play book application
my books are in pdf, Im getting them from Firebase storage, then im converting that pdf to image, page by page, its working fine
but when I try to put the file inside the PageFlip widget, it doesn't work as intended... it starts converting pdf to images, all good, then shows blank screen, when I press ctrl+s to refresh, then it does the conversion again, then it works
when I restart the app, again first time shows blank screen, after refresh it works fine
I can swipe through the images and animation works fine on them, but some pages are still blank, they're not rendered as image
for example, im on page 1 I swipe, page 2 (shows fine), again, page 3 (shows fine).... page 22(is blank/not rendered), page 23(shows fine)
the animation is a bit laggy too, not as smooth as playbooks application,
can someone help please?
My code
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:internet_file/internet_file.dart';
import 'package:path_provider/path_provider.dart';
import 'package:pdfx/pdfx.dart';
import 'package:show_up_animation/show_up_animation.dart';
import '../helpers/ui_control.dart';
import '../models/book.dart';
import '../providers/book.dart';
import '../providers/loading.dart';
import '../providers/user.dart';
import '../widgets/featured_book.dart';
import '../widgets/page_flip.dart';
import '../widgets/slide_route.dart';
class BookView extends StatefulWidget {
const BookView({Key? key, required this.book, required this.currentPage})
: super(key: key);
final BookModel book;
final int currentPage;
#override
_BookViewState createState() => _BookViewState();
}
class _BookViewState extends State<BookView> {
late int page;
bool show = true;
Future<List<File>> pdfToImages(Future<PdfDocument> pdf) async {
final pdfDoc = await pdf;
List<File> images = [];
print('converting pdf to image');
for (int i = 1; i <= pdfDoc.pagesCount; i++) {
final tempDir = await getTemporaryDirectory();
File file =
File('${tempDir.path}/${widget.book.id}-${widget.book.title}-$i.png');
if (!file.existsSync()) {
final page = await pdfDoc.getPage(i);
final image = await page.render(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
backgroundColor: "#EFEADD",
);
Uint8List imageInUnit8List = image!.bytes;
file.writeAsBytesSync(imageInUnit8List);
page.close();
}
images.add(file);
}
return images;
}
#override
void initState() {
super.initState();
page = widget.currentPage;
}
void _onTap() {
setState(() {
show = !show;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: FutureBuilder<List<File>>(
future: pdfToImages(
PdfDocument.openData(InternetFile.get(widget.book.path))),
builder: (context, snapshot) {
if (snapshot.hasError) {
return Center(child: Text(snapshot.error.toString()));
}
if (!snapshot.hasData) {
return const Center(child: CircularProgressIndicator());
}
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: _onTap,
child: InteractiveViewer(
child: PageFlipWidget(
backgroundColor: const Color(0xFFEFEADD),
lastPage: Image.file(
snapshot.data!.elementAt(widget.book.pageCount - 1)),
onMiddleTap: _onTap,
children: List.generate(widget.book.pageCount, (index) {
return Image.file(
snapshot.data!.elementAt(index),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
);
}),
),
),
);
}),
);
}
}
Page flip animation widget
import 'package:flutter/material.dart';
import 'dart:math' as math;
import 'dart:ui' as ui;
import 'package:flutter/rendering.dart';
class PageFlipWidget extends StatefulWidget {
const PageFlipWidget({
Key? key,
this.duration = const Duration(milliseconds: 450),
this.cutoff = 0.6,
this.backgroundColor = const Color(0xFFFFFFFF),
required this.children,
this.initialIndex = 0,
this.lastPage,
this.showDragCutoff = false,
required this.onMiddleTap,
}) : super(key: key);
final Color backgroundColor;
final List\<Widget\> children;
final Duration duration;
final int initialIndex;
final Widget? lastPage;
final bool showDragCutoff;
final double cutoff;
final VoidCallback onMiddleTap;
#override
PageFlipWidgetState createState() =\> PageFlipWidgetState();
}
class PageFlipWidgetState extends State\<PageFlipWidget\>
with TickerProviderStateMixin {
int pageNumber = 0;
List\<Widget\>? pages = \[\];
final List\<AnimationController\> \_controllers = \[\];
bool? \_isForward;
#override
void didUpdateWidget(PageFlipWidget oldWidget) {
if (oldWidget.children != widget.children) {
\_setUp();
}
if (oldWidget.duration != widget.duration) {
\_setUp();
}
if (oldWidget.backgroundColor != widget.backgroundColor) {
\_setUp();
}
super.didUpdateWidget(oldWidget);
}
#override
void dispose() {
for (var c in \_controllers) {
c.dispose();
}
super.dispose();
}
#override
void initState() {
super.initState();
\_setUp();
}
void \_setUp() {
\_controllers.clear();
pages?.clear();
for (var i = 0; i < widget.children.length; i++) {
final controller = AnimationController(
value: 1,
duration: widget.duration,
vsync: this,
);
_controllers.add(controller);
final child = PageFlipBuilder(
backgroundColor: widget.backgroundColor,
amount: controller,
child: widget.children[i],
);
pages?.add(child);
}
pages = pages?.reversed.toList();
pageNumber = widget.initialIndex;
}
bool get \_isLastPage =\>
pages != null && (pages?.length ?? 0 - 1) == pageNumber;
bool get \_isFirstPage =\> pageNumber == 0;
void \_flipPage(DragUpdateDetails details, BoxConstraints dimens) {
final ratio = details.delta.dx / dimens.maxWidth;
if (\_isForward == null) {
if (details.delta.dx \> 0) {
\_isForward = false;
} else {
\_isForward = true;
}
}
if (\_isForward! || pageNumber == 0) {
\_isLastPage ? null : \_controllers\[pageNumber\].value += ratio;
} else {
\_controllers\[pageNumber - 1\].value += ratio;
}
}
Future \_onDragFinish() async {
if (\_isForward != null) {
if (\_isForward!) {
if (!\_isLastPage &&
\_controllers\[pageNumber\].value \<= (widget.cutoff + 0.15)) {
await nextPage();
} else {
\_isLastPage ? null : await \_controllers\[pageNumber\].forward();
}
} else {
if (!\_isFirstPage &&
\_controllers\[pageNumber - 1\].value \>= widget.cutoff) {
await previousPage();
} else {
if (\_isFirstPage) {
await \_controllers\[pageNumber\].forward();
} else {
\_isFirstPage ? null : await \_controllers\[pageNumber - 1\].reverse();
}
}
}
}
\_isForward = null;
}
Future nextPage() async {
await \_controllers\[pageNumber\].reverse();
if (mounted) {
setState(() {
pageNumber++;
});
}
}
Future previousPage() async {
await \_controllers\[pageNumber - 1\].forward();
if (mounted) {
setState(() {
pageNumber--;
});
}
}
Future goToPage(int index) async {
if (mounted) {
setState(() {
pageNumber = index;
});
}
for (var i = 0; i \< \_controllers.length; i++) {
if (i == index) {
\_controllers\[i\].forward();
} else if (i \< index) {
// \_controllers\[i\].value = 0;
\_controllers\[i\].reverse();
} else {
if (\_controllers\[i\].status == AnimationStatus.reverse) {
\_controllers\[i\].value = 1;
}
}
}
}
#override
Widget build(BuildContext context) {
return Material(
child: LayoutBuilder(
builder: (context, dimens) =\> GestureDetector(
behavior: HitTestBehavior.opaque,
onHorizontalDragCancel: () =\> \_isForward = null,
onHorizontalDragUpdate: (details) =\> \_flipPage(details, dimens),
onHorizontalDragEnd: (details) =\> \_onDragFinish(),
child: Stack(
fit: StackFit.expand,
children: \<Widget\>\[
if (widget.lastPage != null) ...\[
widget.lastPage!,
\],
...pages!,
Positioned.fill(
child: Flex(
direction: Axis.horizontal,
children: \<Widget\>\[
Flexible(
flex: (widget.cutoff \* 0.75 \* 10).round(),
child: Container(
color: widget.showDragCutoff
? Colors.blue.withAlpha(100)
: null,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: \_isFirstPage ? null : previousPage,
),
),
),
Flexible(
flex: 10,
child: Container(
color: widget.showDragCutoff
? Colors.orange.withAlpha(100)
: null,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: widget.onMiddleTap,
),
),
),
Flexible(
flex: (widget.cutoff \* 0.75 \* 10).round(),
child: Container(
color: widget.showDragCutoff
? Colors.red.withAlpha(100)
: null,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: \_isLastPage ? null : nextPage,
),
),
),
\],
),
),
\],
),
),
),
);
}
}
class PageFlipEffect extends CustomPainter {
PageFlipEffect({
required this.amount,
required this.image,
this.backgroundColor,
this.radius = 0.18,
}) : super(repaint: amount);
final Animation\<double\> amount;
final ui.Image image;
final Color? backgroundColor;
final double radius;
#override
void paint(ui.Canvas canvas, ui.Size size) {
final pos = amount.value;
final movX = (1.0 - pos) \* 0.85;
final calcR = (movX \< 0.20) ? radius \* movX \* 5 : radius;
final wHRatio = 1 - calcR;
final hWRatio = image.height / image.width;
final hWCorrection = (hWRatio - 1.0) / 2.0;
final w = size.width.toDouble();
final h = size.height.toDouble();
final c = canvas;
final shadowXf = (wHRatio - movX);
final shadowSigma =
Shadow.convertRadiusToSigma(8.0 + (32.0 * (1.0 - shadowXf)));
final pageRect = Rect.fromLTRB(0.0, 0.0, w * shadowXf, h);
if (backgroundColor != null) {
c.drawRect(pageRect, Paint()..color = backgroundColor!);
}
if (pos != 0) {
c.drawRect(
pageRect,
Paint()
..color = Colors.black54
..maskFilter = MaskFilter.blur(BlurStyle.outer, shadowSigma),
);
}
final ip = Paint();
for (double x = 0; x < size.width; x++) {
final xf = (x / w);
final v = (calcR * (math.sin(math.pi / 0.5 * (xf - (1.0 - pos)))) +
(calcR * 1.1));
final xv = (xf * wHRatio) - movX;
final sx = (xf * image.width);
final sr = Rect.fromLTRB(sx, 0.0, sx + 1.0, image.height.toDouble());
final yv = ((h * calcR * movX) * hWRatio) - hWCorrection;
final ds = (yv * v);
final dr = Rect.fromLTRB(xv * w, 0.0 - ds, xv * w + 1.0, h + ds);
c.drawImageRect(image, sr, dr, ip);
}
}
#override
bool shouldRepaint(PageFlipEffect oldDelegate) {
return oldDelegate.image != image ||
oldDelegate.amount.value != amount.value;
}
}
class PageFlipBuilder extends StatefulWidget {
const PageFlipBuilder({
Key? key,
required this.amount,
this.backgroundColor = const Color(0xFFFFFFCC),
this.child,
}) : super(key: key);
final Animation\<double\> amount;
final Color backgroundColor;
final Widget? child;
#override
State\<PageFlipBuilder\> createState() =\> \_PageFlipBuilderState();
}
class \_PageFlipBuilderState extends State\<PageFlipBuilder\> {
final \_boundaryKey = GlobalKey();
ui.Image? \_image;
#override
void didUpdateWidget(PageFlipBuilder oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.child != widget.child) {
\_image = null;
}
}
void \_captureImage(Duration timeStamp) async {
final pixelRatio = MediaQuery.of(context).devicePixelRatio;
final boundary = \_boundaryKey.currentContext?.findRenderObject()
as RenderRepaintBoundary;
if (boundary.debugNeedsPaint) {
await Future.delayed(const Duration(milliseconds: 20));
return \_captureImage(timeStamp);
}
final image = await boundary.toImage(pixelRatio: pixelRatio);
setState(() =\> \_image = image);
}
#override
Widget build(BuildContext context) {
if (\_image != null) {
return CustomPaint(
painter: PageFlipEffect(
amount: widget.amount,
image: \_image!,
backgroundColor: widget.backgroundColor,
),
size: Size.infinite,
);
} else {
WidgetsBinding.instance.addPostFrameCallback(\_captureImage);
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
final size = constraints.biggest;
return Stack(
clipBehavior: Clip.hardEdge,
children: \<Widget\>\[
Positioned(
left: 1 + size.width,
top: 1 + size.height,
width: size.width,
height: size.height,
child: RepaintBoundary(
key: \_boundaryKey,
child: widget.child,
),
),
\],
);
},
);
}
}
}
class PageFlipImage extends StatefulWidget {
const PageFlipImage({
Key? key,
required this.amount,
this.image,
this.backgroundColor = const Color(0xFFFFFFCC),
}) : super(key: key);
final Animation\<double\> amount;
final ImageProvider? image;
final Color? backgroundColor;
#override
State\<PageFlipImage\> createState() =\> \_PageFlipImageState();
}
class \_PageFlipImageState extends State\<PageFlipImage\> {
ImageStream? \_imageStream;
ImageInfo? \_imageInfo;
bool \_isListeningToStream = false;
late ImageStreamListener \_imageListener;
#override
void initState() {
super.initState();
\_imageListener = ImageStreamListener(\_handleImageFrame);
}
#override
void dispose() {
\_stopListeningToStream();
super.dispose();
}
#override
void didChangeDependencies() {
\_resolveImage();
if (TickerMode.of(context)) {
\_listenToStream();
} else {
\_stopListeningToStream();
}
super.didChangeDependencies();
}
#override
void didUpdateWidget(PageFlipImage oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.image != oldWidget.image) {
\_resolveImage();
}
}
#override
void reassemble() {
\_resolveImage(); // in case the image cache was flushed
super.reassemble();
}
void \_resolveImage() {
final ImageStream newStream =
widget.image!.resolve(createLocalImageConfiguration(context));
\_updateSourceStream(newStream);
}
void \_handleImageFrame(ImageInfo imageInfo, bool synchronousCall) {
setState(() =\> \_imageInfo = imageInfo);
}
// Updates \_imageStream to newStream, and moves the stream listener
// registration from the old stream to the new stream (if a listener was
// registered).
void \_updateSourceStream(ImageStream newStream) {
if (\_imageStream?.key == newStream.key) return;
if (_isListeningToStream) _imageStream?.removeListener(_imageListener);
_imageStream = newStream;
if (_isListeningToStream) _imageStream?.addListener(_imageListener);
}
void \_listenToStream() {
if (\_isListeningToStream) return;
\_imageStream?.addListener(\_imageListener);
\_isListeningToStream = true;
}
void \_stopListeningToStream() {
if (!\_isListeningToStream) return;
\_imageStream?.removeListener(\_imageListener);
\_isListeningToStream = false;
}
#override
Widget build(BuildContext context) {
if (\_imageInfo != null) {
return CustomPaint(
painter: PageFlipEffect(
amount: widget.amount,
image: \_imageInfo!.image,
backgroundColor: widget.backgroundColor,
),
size: Size.infinite,
);
} else {
return const SizedBox();
}
}
}
in the beginning I was converting the pdf page to uint8list and using the image.memory widget, and it was not working swell, so I converted the uint8list bytes into file and then using image.file, it started getting this issue where it first it blank then after ctrl+s it starts rendering but some pages still not rendered
I think image.asset works well, but idk if that's helpful, I need my files on firebase storage.