title: Flutter show/hide options bar over pdf viewer
body: <p>I'm trying to keep the track on the page a user is reading from a pdf so first I tried to control the scroll for the file which does not make much sense as a pdf is displayed as it is, so if I split the pdf pages into different files I can keep the track but to allow the user change the page I'd like to add some controls like next page and previous page. First I tried to add a Floating Action Button which should be hidden and displayed when the user tap the screen so I did this: </p>
  
  <p>I'm using flutter_full_pdf_viewer plugin.</p>
  
  <pre><code>import 'dart:async';
  import 'dart:io';
  
  import 'package:flutter/foundation.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter_full_pdf_viewer/full_pdf_viewer_scaffold.dart';
  import 'package:path_provider/path_provider.dart';
  
  void main() {
    runApp(MaterialApp(
      title: 'Little Readers',
      home: MyApp(),
    ));
  }
  
  class MyApp extends StatefulWidget {
    @override
    _MyAppState createState() =&gt; new _MyAppState();
  }
  
  class _MyAppState extends State&lt;MyApp&gt; {
    String pathPDF = "";
    double iconSize = 80;
    MaterialColor iconColor = Colors.blue;
  
    @override
    void initState() {
      super.initState();
      createFileOfPdfUrl().then((file) {
        setState(() {
          pathPDF = file.path;
          print(pathPDF);
        });
      });
    }
  
    Future&lt;File&gt; createFileOfPdfUrl() async {
      final url = "http://africau.edu/images/default/sample.pdf";
      final filename = url.substring(url.lastIndexOf("/") + 1);
      var request = await HttpClient().getUrl(Uri.parse(url));
      var response = await request.close();
      var bytes = await consolidateHttpClientResponseBytes(response);
      String dir = (await getApplicationDocumentsDirectory()).path;
      File file = new File('$dir/$filename');
      await file.writeAsBytes(bytes);
      return file;
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('My App'),
        ),
        body: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            verticalDirection: VerticalDirection.down,
            children: &lt;Widget&gt;[
              Align(
                alignment: Alignment.topCenter,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: &lt;Widget&gt;[
                    IconButton(
                      iconSize: iconSize,
                      color: iconColor,
                      icon: Icon(Icons.book),
                      onPressed: () =&gt; Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) =&gt; PDFScreen(pathPDF)),
                          ),
                    ),
                  ],
                ),
              ),
            ]),
      );
    }
  }
  
  class PDFScreen extends StatelessWidget {
    String pathPDF = "";
    PDFScreen(this.pathPDF);
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Stack(
          children: &lt;Widget&gt;[
            PDFViewerScaffold(
              appBar: AppBar(
                title: Text("My Book"),
                actions: &lt;Widget&gt;[
                  IconButton(
                    icon: Icon(Icons.share),
                    onPressed: () =&gt; {},
                  )
                ],
              ),
              path: pathPDF,
            ),
            Positioned(
              child: new FloatingActionButton(
                child: Icon(Icons.camera_alt),
                backgroundColor: Colors.green.shade800,
                onPressed: () =&gt; {},
              ),
            ),
          ],
        ),
      );
    }
  }
  </code></pre>
  
  <p>the problem is FAB is displayed at the AppBar no matter if I set the top, bottom, left or right properties, it actually moves depending on the position I set but only through the AppBar.</p>
  
  <p><a href="https://i.stack.imgur.com/MViK3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MViK3.jpg" alt="enter image description here"></a></p>
  
  <p>As an alternative and actually I think it would be a more elegant solution I'd like to add an options bar just as the images gallery at android does when you tap on the image. </p>
  
  <p><a href="https://i.stack.imgur.com/75NNR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/75NNR.jpg" alt="enter image description here"></a></p>
  
  <p>of course I want to get it over the pdf viewer, but I'm having issues to find a component or a way to do it. So I'm looking for some direction on this...</p>