firebase - Flutter：上传完成后导航新屏幕

Question

我想在上传完成后导航到新屏幕。

              return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
              if (_uploadTask.isComplete)
                Text('Yükleme Tamamlandı',
                    style: TextStyle(
                        color: Colors.greenAccent,
                        height: 2,
                        fontWeight: FontWeight.w500,
                        fontSize: 30)
                ),

这是详细的代码：

           /// Widget to capture and crop the image
               class DocUploadScreen extends StatefulWidget {
               createState() => _DocUploadScreenState();
               }

           class _DocUploadScreenState extends State<DocUploadScreen> 
               {
               /// Active image file
                   File _imageFile;

              /// Select an image via gallery or camera
              Future<void> _pickImage(ImageSource source) async {
              File selected = await ImagePicker.pickImage(source: 
              source);

                 setState(() {
                 _imageFile = selected;
                   });
                     }

                     /// Remove image
                    void _clear() {
                      setState(() => _imageFile = null);
                          }

                      @override
                      Widget build(BuildContext context) {
                       return Scaffold(
                       appBar: AppBar(
                       title: Text("FÖY YÜKLEME EKRANI"),
                          ),
                        bottomNavigationBar: BottomAppBar(
                        child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: 
                         MainAxisAlignment.spaceEvenly,
                         children: <Widget>[
                         IconButton(
                           icon: Icon(
                            Icons.photo_camera,
                              size: 30,
                                ),
                          onPressed: () => 
                           _pickImage(ImageSource.camera),
                           color: Colors.blue,
                               ),
                             IconButton(
                             icon: Icon(
                             Icons.photo_library,
                             size: 30,
                                    ),
                             onPressed: () => 
                            _pickImage(ImageSource.gallery),
                            color: Colors.red,
                             ),
                               ],
                                 ),
                                    ),
             body: ListView(
             children: <Widget>[
               if (_imageFile != null) ...[
               Container(
               padding: EdgeInsets.all(32), child: 
               Image.file(_imageFile)),
                Row(
                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                   children: <Widget>[
                   FlatButton(
                   color: Colors.blueAccent,
                   textColor: Colors.white,
                   child: Icon(Icons.refresh),
                   onPressed: _clear,
                      ),
                         ],
                            ),
                   Padding(
                   padding: const EdgeInsets.all(32),
                   child: Uploader(
                   file: _imageFile,
                         ),
                           )
                             ]
                               ],
                                  ),
                                      );
                                          }
                                              }

           class Uploader extends StatefulWidget {
           final File file;

           Uploader({Key key, this.file}) : super(key: key);

           createState() => _UploaderState();
             }

           class _UploaderState extends State<Uploader> {
           final FirebaseStorage _storage =
           FirebaseStorage(storageBucket: 'gs://emo-is0.appspot.com');

           StorageUploadTask _uploadTask;

           _startUpload() {
           String filePath = 'faturalar/${DateTime.now()}.png';
           setState(() {
           _uploadTask = 
           _storage.ref().child(filePath).putFile(widget.file);
                 });
                      }

               @override
               Widget build(BuildContext context) {

               if (_uploadTask != null) {
                return StreamBuilder<StorageTaskEvent>(
                stream: _uploadTask.events,
                 builder: (context, snapshot) {
                 var event = snapshot?.data?.snapshot;

                 double progressPercent = event != null
                 ? event.bytesTransferred / event.totalByteCount
                 : 0;

                   return Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   crossAxisAlignment: CrossAxisAlignment.center,
                   children: [
                   if (_uploadTask.isComplete)
                    Text('Yükleme Tamamlandı',
                    style: TextStyle(
                        color: Colors.greenAccent,
                        height: 2,
                        fontWeight: FontWeight.w500,
                        fontSize: 30)
                         ),

                       if (_uploadTask.isPaused)
                       FlatButton(
                        child: Icon(Icons.play_arrow, size: 50),
                        onPressed: _uploadTask.resume,
                          ),
                         if (_uploadTask.isInProgress)
                         FlatButton(
                         child: Icon(Icons.pause, size: 50),
                         onPressed: _uploadTask.pause,
                           ),
                         LinearProgressIndicator(value: 
                       progressPercent),
                       Text(
                       '${(progressPercent * 100).toStringAsFixed(2)} 
                       % ',
                        style: TextStyle(fontSize: 50),
                          ),
                           ]);
                              });
                                    }

                                else {

                              return FlatButton.icon(
                              color: Colors.blue,
                              textColor: Colors.white,
                              label: Text('Sunucuya Yükle'),
                              icon: Icon(Icons.cloud_upload),
                              onPressed: _startUpload);
                                 }

                                     }
                                             }

上传过程完成后，应该导航到新屏幕。在这里我尝试了这些代码，我无法实现处理导航。所以我应该把代码放在哪里，以便在上传过程完成后会有导航。

标签： firebaseflutterdartnavigationfirebase-storage

Answer 1

我认为您执行上传是单独的功能（您可以在此处为我们提供更多代码，您如何执行上传），因此使该功能异步并等待其完成并在其前面加上“等待”。之后调用导航到新页面的函数。

您的代码应如下所示：

Future _startUpload() {
  String filePath = 'faturalar/${DateTime.now()}.png';
  setState(() {
    _uploadTask = 
    _storage.ref().child(filePath).putFile(widget.file);
  });
}

void upload() async{
    await _startUpload;
    if (_uploadTask != null) {
      navigateToNewPage();
    } else {
      print('Upload went wrong');
    }
  }

  void navigateToNewPage() {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SecondPage()),
    );
  }

我想在看到文本 Yükleme Tamamlandı 后导航...