Flutter : Navigate New Screen Just after Upload Completed - firebase

Question

I would like to navigate to new screen just after upload completed.
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)
),
Here is the detailed codes :
/// 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);
}
}
}
Just after upload process completed there should be navigation to new screen. Here I tried these codes, I can not achieve to handle navigation. So Where should I put code so there will be navigation just after upload process completed.

Answer 1

I think you do the upload is separate function (you could provide us with more code here, how you do the upload), so make that function async and wait for it to complete with "await" in front of it. After that call a function that navigates to the new page.
Your code should look like this:
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()),
);
}
I want to navigate just after text Yükleme Tamamlandı seen...

Answer 2

I've not worked with this package but I'd try it like this instead:
_startUpload() async {
String filePath = 'föyler/${DateTime.now()}.png';
StorageUploadTask uploadTask = _storage.ref().child(filePath).putFile(widget.file);
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
navigateToNewPage();
}