Performance lag while opening PDF file using Syncfusion PDF viewer

Question

I am using 'Syncfusion PDF viewer' to open PDF files in android. I am using 'Dio' and 'Path_provider' to download and save a file on its first time open so that it can be opened from the local storage without internet. The problem I am facing, when I am trying to open a PDF file from local storage (after it is already downloaded and saved), facing performance lag there in the page transition. I am sharing here the full code looking forward to suggestions on did I make any mistakes in the implementation.

main.dart file

import 'package:flutter/material.dart';
import 'book.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'title',
      theme: ThemeData(
        primarySwatch: Colors.cyan,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    List bookindex = [
      Books(subject: '১ম - ৩য় খন্ড', subtitle: 'সূরা ফাতিহা - সূরা বাকারা'),
      Books(
          subject: '৪র্থ - ৭ম খন্ড', subtitle: 'সূরা আল-ইমরান - সূরা মায়িদাহ'),
      Books(subject: '৮ম - ১১শ খন্ড', subtitle: 'সূরা আন\'আম - সূরা ইউনুস'),
      Books(subject: '১২শ - ১৩শ খন্ড', subtitle: 'সূরা হূদ - সূরা ইসরা'),
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Book List',
          style: TextStyle(
            //fontSize: 14,
            fontFamily: 'Baloo Da',
          ),
        ),
        centerTitle: true,
      ),
      body: ListView.builder(
        itemCount: bookindex.length,
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
              title: Text(
                bookindex[index].subject,
                style: TextStyle(
                  fontSize: 14,
                  fontFamily: 'HindSiliguri',
                ),
              ),
              subtitle: Text(
                bookindex[index].subtitle,
                style: TextStyle(
                  fontSize: 12,
                  fontFamily: 'HindSiliguri',
                ),
              ),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => Book(index)));
              },
            ),
          );
        },
      ),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 85.0,
        ),
      ),
    );
  }
}

class Books {
  String subject;
  String subtitle;
  String booklink;

  Books({this.subject, this.subtitle, this.booklink});
}

book.dart file

import 'dart:io';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

class Book extends StatefulWidget {
  final int index;
  Book(this.index);

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

class _BookState extends State<Book> {
  Directory tempDir;
  String tempPath;

  List booklist = [
    'https://rongdhonustudio.com/islamic_books/Tafsir_Ibn_Katheer/Tafseer-Ibn-Kathir-01.pdf',
    'https://rongdhonustudio.com/islamic_books/Tafsir_Ibn_Katheer/Tafseer-Ibn-Kathir-02.pdf',
    'https://rongdhonustudio.com/islamic_books/Tafsir_Ibn_Katheer/Tafseer-Ibn-Kathir-03.pdf',
    'https://rongdhonustudio.com/islamic_books/Tafsir_Ibn_Katheer/Tafseer-Ibn-Kathir-04.pdf',
  ];

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

  int percentage = 0, totalFileSize;

  Future<void> fileDownload() async {
    tempDir = await getTemporaryDirectory();
    //download file
    tempPath = tempDir.path + "/" + booklist[widget.index];

    var dio = Dio();

    if (await File(tempPath).exists()) {
      if (await File(tempPath).length() == 0) {
        dio.download(
          booklist[widget.index],
          tempPath,
          onReceiveProgress: (count, total) {
            this.setState(() {
              percentage = ((count / total) * 100).floor();
            });
          },
        );
      } else {
        this.setState(() {
          percentage = 100;
        });
      }
    } else {
      dio.download(
        booklist[widget.index],
        tempPath,
        onReceiveProgress: (count, total) {
          this.setState(() {
            percentage = ((count / total) * 100).floor();
          });
          percentage = ((count / total) * 100).floor();
          totalFileSize = total;
        },
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Syncfusion Flutter PDF Viewer'),
      ),
      body: percentage == 100
          ? SfPdfViewer.file(File(tempPath))
          : Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    padding: EdgeInsets.all(10),
                    child: LinearProgressIndicator(
                      backgroundColor: Colors.white,
                      value: percentage.toDouble() / 100,
                      valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
                    ),
                  ),
                  Text(
                    (percentage.toDouble()).toString() + " %",
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 23),
                  ),
                  Text("Please wait file downloading",
                      style:
                          TextStyle(fontWeight: FontWeight.bold, fontSize: 23))
                ],
              ),
            ),
    );
  }
}

Note that I am having these two warning in the console: I/Choreographer(31959): Skipped 257 frames! The application may be doing too much work on its main thread. W/Looper (31959): Slow Looper main: doFrame is 4295ms late — Rifat Hossain, May 03 '21 at 18:09
You should do a big async task in `initState`. It would be better to do it in a `FutureBuilder`. — Andrej, May 03 '21 at 20:17
How can I do that? I'm a newbie here so Can you please help with code example? — Rifat Hossain, May 03 '21 at 22:29

score 3 · Accepted Answer · edited Sep 30 '21 at 12:40

On analyzing the given codes, we can reproduce the reported UI lag in page transition. Syncfusion Flutter PdfViewer loads the PDF page's image which is rendered using native platform's renderer and this process takes some time to load a PDF document. Image loading is indicated using LinearProgressIndicator. To resolve the issue in page transition, we recommend adding Future.delayed before loading every pages. We have modified the code and shared for your reference. The Modified code can be downloaded from the following link. https://www.syncfusion.com/downloads/support/directtrac/general/ze/book496455946

Performance lag while opening PDF file using Syncfusion PDF viewer

1 Answers1