PDFTron as a widget expands navigation bar on Android

[henritrees]

When using the PDFTron Flutter library as a widget it expands the Navigation bar to compensate for the status bar or changes the System UI Overlays, I'm not 100% sure what or why it's doing. This does not happen on iOS, only affected in Android.

Steps to Reproduce the Problem I created a simple example app based on the same pdftron_flutter example, which has a view where you can push a button to navigate to PDFTron widget.

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:pdftron_flutter/pdftron_flutter.dart';

void main() {
  runApp(MaterialApp(
    title: 'Example',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              child: Text('Open PDFTronWidget'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Viewer(key: UniqueKey())),
                );
              },
            ),
          ]
        )
      ),
    );
  }
}

class Viewer extends StatefulWidget {

  Viewer({Key key}) : super(key: key);

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

class _ViewerState extends State<Viewer> {
  String _version = 'Unknown';
  String _document = "http://www.africau.edu/images/default/sample.pdf";
  bool _showViewer = true;

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

  Future<void> initPlatformState() async {
    String version;
    try {
      PdftronFlutter.initialize("your_pdftron_license_key");
      version = await PdftronFlutter.version;
    } on PlatformException {
      version = 'Failed to get platform version.';
    }
    if (!mounted) return;
    setState(() {
      _version = version;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PdfTron'),
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: _showViewer ? DocumentView(
          onCreated: _onDocumentViewCreated,
        ): Container(),
      ),
    );
  }

  void _onDocumentViewCreated(DocumentViewController controller) async {
    var leadingNavCancel = startLeadingNavButtonPressedListener(() {
      Navigator.pop(context);
    });
    controller.openDocument(_document);
  }

}

In the first view, everything is normal.

When opening PDFTron widget the screen jumps a few times and the navigation bar doubles in size.

When navigating back with the back button, nothing changes. When opening the app again, something is recalculated and everything returns to normal. This occurs even when not using a navigation bar in the PDFTron widget view itself.

Expected behavior Using the PDFTron library as a widget should not change the status bar and padding, or whatever it does. This works great on iOS devices, and is probably related to the native Android PDFTron library.

Platform/Device Information (please complete the following information if applicable):

• Platform: Android
• Device: Google Pixel 4

In our application we have got around this problem by setting this when the PDFTron widget is loaded SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]); and setting this SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values); when the widget is disposed but this is not a valid workaround, as it makes the page jump and flicker many times.

[sgong-pdftron]

@henritrees we are able to reproduce, we will update you as soon as we have more information on this. Thanks.

[sgong-pdftron]

@henritrees while we are still investigating, do you need the "AppBar" for the viewer page? removing that app bar will resolve this problem, so it's something to do with compatibility of PDFTron viewer's app bar with flutter's app bar, which likely will not be a trivial fix. Thanks.

[henritrees]

@sgong-pdftron thanks for the reply. We do not need an AppBar in the PDFTron viewer page, but we need an AppBar for all of the other views we have in our application (as I would think a big majority of apps are written). Can you elaborate, based on my example how did you fix it? Because no matter how I wrap the viewer in the PDFTron widget, when I go back to the first view, my navigation bar is two times the normal height.

[sgong-pdftron]

@henritrees Thanks for the clarification. You are correct that when back to the first view, the status bar is 2x height. Would use the non-widget version be an option for you for now until this issue is resolved? It's not a trivial problem and I suspect it has something to do with https://github.com/flutter/flutter/issues/58273.

[henritrees]

Unfortunately we can not use the non-widget version because we have implemented widgets that we need to display on top of the Pdftron widget.

[sgong-pdftron]

There is a major update to widget version now, could you please give it a try?

[zhoulijun12315]

In the latest version, the same problem exists.

[sgong-pdftron]

@zhoulijun12315 would it be possible if you could provide us a sample project that can run as-is so we can take a look on our end? Thanks.

[zhoulijun12315]

@zhoulijun12315 would it be possible if you could provide us a sample project that can run as-is so we can take a look on our end? Thanks.

@sgong-pdftron I created a demo, you can download from here: https://github.com/zhoulijun12315/pdftron_demo

The screenshot：

1. normal

2. open pdftron page as widget （status bar expand）

3. back to home (all status bar expand)

[terryyoon-pdftron]

@zhoulijun12315 A new configuration has been added that can enable the viewer's full screen mode. Could you give it a try and see if this resolves the issue?

Config config = new Config();
config.fullScreenModeEnabled = true;

controller.openDocument(_document, config: config);

[zhoulijun12315]

@zhoulijun12315 A new configuration has been added that can enable the viewer's full screen mode. Could you give it a try and see if this resolves the issue?

Config config = new Config();
config.fullScreenModeEnabled = true;

controller.openDocument(_document, config: config);

hi：

I tested the fullScreenModeEnabled property and it worked.

However, the 'fullScreenModeEnabled' also hide the status bar , and caused the app to drop the height of the status bar. Can add a property to control the full screen without hiding the status bar？

[adiShinwari]

hey @zhoulijun12315 Did you solve it?