page curl effect using pdf file

Viewed 983

I have a PDF file and I would like to reproduce a page curl effect like in this package page:

https://pub.flutter-io.cn/packages/page_turn

I tried using this page_turn plugin and it takes list of widgets that will display in order. I tried using native_pdf_renderer plugin to render the pdf and display on each page, but when I do this, the pages are blank. but if I remove from the PageTurn widget, it works.

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

class TestScreen extends StatelessWidget {
  final _controller = GlobalKey<PageTurnState>();

  Future<PdfPageImage> getPageImage() async {
    final document = await PdfDocument.openAsset('assets/pdfs/222.pdf');
    final page = await document.getPage(6);
    final pageImage = await page.render(
      width: page.width,
      height: page.height,
      format: PdfPageFormat.JPEG,
    );
    await page.close();
    return pageImage;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          child: FutureBuilder<PdfPageImage>(
        future: getPageImage(),
        builder: (context, snapshot) {
          print(snapshot.data);
          if (snapshot.data == null) return CircularProgressIndicator();
          // This works:
          // return Image(
          //   image: MemoryImage(snapshot.data.bytes),
          // );
          //This makes all my pages blank
          return PageTurn(
            key: _controller,
            backgroundColor: Colors.white,
            children: <Widget>[
              Image(
                image: MemoryImage(snapshot.data.bytes),
              ),
              Image(
                image: MemoryImage(snapshot.data.bytes),
              ),
              Image(
                image: MemoryImage(snapshot.data.bytes),
              ),
            ],
          );
        },
      )),
    );
  }
}
1 Answers

after reading the lib code i see there is widget to show image pre-renderd you should use PageTurnImage instead Image like this

 PageTurn(
        key: _controller,
        backgroundColor: Colors.white,
        children: <Widget>[
          PageTurnImage(
            image: MemoryImage(snapshot.data.bytes),
          ),
          PageTurnImage(
            image: MemoryImage(snapshot.data.bytes),
          ),
          PageTurnImage(
            image: MemoryImage(snapshot.data.bytes),
          ),
        ],
      );

try it and give me a feedback and up vote if it work

Related