如何在导航到 PDF 查看页面时添加 CircularProgressIndicator

Question

在下面的代码中，我正在从我的图像文件夹中读取一个 pdf 文件，然后在新页面中查看它。但是当我导航到新页面时，加载 pdf 需要时间。所以，我想在过渡时添加一个 CircularProgressIndicator。我不知道该怎么做。如何添加 CircularProgressIndicator 小部件？

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'package:flutter_full_pdf_viewer/flutter_full_pdf_viewer.dart';

class PdfPage extends StatefulWidget {
  @override
  _PdfPageState createState() => _PdfPageState();
}

class _PdfPageState extends State<PdfPage> {
  Future<String> makeFile() async {

    Directory tempDir = await getTemporaryDirectory();
    String tempPath = tempDir.path;
    File tempFile = File('$tempPath/copy.pdf');
    ByteData bd = await rootBundle.load('images/dummy.pdf');
    await tempFile.writeAsBytes(bd.buffer.asUint8List(), flush: true);
    return tempFile.path;
  }

  bool isLoading = false;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    makeFile().then((value) {
      setState(() {
        path = value;
        print(path);
        //isLoading = false;
      });
    });
  }

  String path;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: RaisedButton(
          child: Text("Open PDF Screen"),
          onPressed: () {
            // CircularProgressIndicator(value: true,);
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => PDFScreen(path)));
          },
        ),
      ),
    );
  }
}

class PDFScreen extends StatelessWidget {
  final String path;
//  final bool isLoading;
  PDFScreen(
    this.path,
  );

  @override
  Widget build(BuildContext context) {
    return PDFViewerScaffold(
        appBar: AppBar(
          title: Text("Scaffold PDF"),
        ),
        path: path);
  }
}

Answer 1

一种方法是在对话框中使用它。

static Future showDialog(BuildContext context, GlobalKey _key) async   {
  return showLoadingDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context){
      return SimpleDialog(
          key: _key,
          children: <Widget>[
            Center(
              child: Container(
                child: Row(
                children: <Widget>[
                  CircularProgressIndicator(),
                  SizedBox(
                    height:10,
                    width:10,
                  ),
                  Text("Please Wait!"),
                ]
             ),
          ],
        ),
      );
    }
  );
}

这里GlobalKey用于Show或hide创建的对话框。

要调用这个简单的初始化 class 中的 GlobalKey 作为 GlobalKey<State> _dialogKey = GlobalKey<State>();。

那么您可以将对话框显示为：

showLoadingDialog(context, _dialogKey);

当你想隐藏它时，只需调用：

Navigator.of(_dialogKey.currentContext,rootNavigator: true).pop();

这只是在 SimpleDialog 中使用 CircularProgressIndicator 的一种方法，希望对您有所帮助。

Answer 2

您可以使用 FutureBuilder class，它正是为此而设计的。也就是说，预计将来会采取一些行动，同时您希望显示进度指示器。该操作可能实际完成或 return 错误。 Futurebuilder 让您处理所有这些场景。

您可以将 makefile() 转移到 class PDFScreen 并使用小部件构建方法 return FutureBuilder。最简单的实现如下。

@override
Widget build(BuildContext context) {
   return FutureBuilder<String>(
       future: makeFile(),
       builder: (BuildContext context, AsyncSnapshot<String>  snapshot) {
           if (snapshot.connectionState != ConnectionState.done) {
               return CircularProgressIndicator();
            } else {
               return PDFViewerScaffold(
                   appBar: AppBar(
                       title: Text("Scaffold PDF"),
                   ),
                   path: snapshot.data
                );
            }
        },
   );
}

您可能想访问 Medium 上的 official docuementation or this 博客。

如何在导航到 PDF 查看页面时添加 CircularProgressIndicator

How to add a CircularProgressIndicator while navigating to a PDF View Page

pdf-viewer

dart

flutter