flutter - 当用户点击封面时，我想查看PDF文件

Question

我想在用户点击封面时查看PDF文件。我是Flutter的新手。
你们能找出我的代码有什么问题吗？当我点击书时，它什么也没做。
我认为问题出在PDF Viewer的功能中。
我正在使用advance_pdf_viewer 1.1.6。

class Books extends StatefulWidget {
  @override
  _BooksState createState() => _BooksState();
}

class _BooksState extends State<Books> {
  bool _isLoading = true;
  PDFDocument document;
  var url;

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

  loadDocument() async {
    document = await PDFDocument.fromURL(url);

    setState(() => _isLoading = false);
  }

  changePDF(value) async {
    setState(() => _isLoading = true);
    if (value == 1) {
      document = await PDFDocument.fromURL(url);
    } else {
      print('nothing');
    }

    setState(() => _isLoading = false);
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: Firestore.instance.collection('books').snapshots(),
        builder: (
          context,
          snapshot,
        ) {
          if (snapshot.data == null)
            return Center(
              child: CircularProgressIndicator(
                backgroundColor: Colors.red,
                valueColor: new AlwaysStoppedAnimation<Color>(Colors.teal),
              ),
            );
          return GridView.builder(
            shrinkWrap: true,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3, childAspectRatio: 0.7),
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context, index) => Padding(
              padding: const EdgeInsets.all(8.0),
              child: GridTile(
                child: InkWell(
                  onTap: () async {
                    PDFDocument.fromURL(snapshot.data.documents[index]['url']);

                    _isLoading
                        ? Center(child: CircularProgressIndicator())
                        : PDFViewer(document: document);
                  },
                  child: Container(
                    height: 200,
                    width: 110,
                    decoration: BoxDecoration(
                        boxShadow: [
                          BoxShadow(
                            color: Colors.red[500].withOpacity(0.6),
                            spreadRadius: 0.5,
                            blurRadius: 1,
                            offset: Offset(2, 0),
                          ),
                        ],
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(3),
                        border: Border.all(
                            style: BorderStyle.solid,
                            color: Colors.red[500],
                            width: 0.3)),
                    child: Column(children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(5.0),
                        child: Container(
                          child: Image.network(
                            snapshot.data.documents[index]['image'],
                            width: 100,
                          ),
                        ),
                      ),
                      SizedBox(height: 5),
                      Text(
                        snapshot.data.documents[index]['name'],
                      )
                    ]),
                  ),
                ),
              ),
            ),
          );
        });
  }
}

Answer 1

PDFViewer返回一个小部件。如果您想在点击InkWell时查看pdf文件，则需要制作一个显示PDFViewer返回的小部件的小部件，例如，

class PDFScreen extends StatelessWidget {
  PDFDocument document;
  PDFScreen({@required this.document});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      child: PDFViewer(document: document)
    );
  }
}

并将 onTap()的 InkWell更改为:

onTap: () async {
    PDFDocument.fromURL(snapshot.data.documents[index]['url']);

    _isLoading
    ? Center(child: CircularProgressIndicator())
        : Navigator.push(context, MaterialPageRoute(builder: (context) => PDFScreen(document: document)));
  },