image_picker Cancel: Navigation.pop inside Widget builder for Flutter - build

Question

I have the following issue in my Flutter App:
For the image_picker Cancel-button to work properly, I needed to be able to Navigate.pop() at the moment the user presses the Cancel-button inside the image_picker Plugin.
The main question for this image_picker-Cancel issue is: How can I navigate back (i.e. Navigator.pop(context)) inside a builder of a Widget ?
The following throws an error:
Widget _cancelBtnPressedWidget(BuildContext context) {
Navigator.pop(context);
}
I know a Widget is supposed to return something. Therefore is it possible to pseudo-return something - but actually keep the Navigator.pop() as the main action inside the Widget ??? (and best, automatically invoked without extra user-interaction)...
From the above code, the error sais:
flutter: ══╡ EXCEPTION CAUGHT BY ANIMATION LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown while notifying status listeners for AnimationController:
flutter: setState() or markNeedsBuild() called during build.
flutter: This Overlay widget cannot be marked as needing to build because the framework is already in the
flutter: process of building widgets. A widget can be marked as needing to be built during the build phase
flutter: only if one of its ancestors is currently building. This exception is allowed because the framework
flutter: builds parent widgets before children, which means a dirty descendant will always be built.
flutter: Otherwise, the framework might not visit this widget during this build phase.
flutter: The widget on which setState() or markNeedsBuild() was called was:
flutter: Overlay-[LabeledGlobalKey<OverlayState>#b5c98](state: OverlayState#6a872(entries:
flutter: [OverlayEntry#cd1e7(opaque: false; maintainState: false), OverlayEntry#43b81(opaque: false;
flutter: maintainState: true), OverlayEntry#f0b49(opaque: false; maintainState: false),
flutter: OverlayEntry#b9362(opaque: false; maintainState: true)]))
flutter: The widget which was currently being built when the offending call was made was:
flutter: FutureBuilder<File>(dirty, state: _FutureBuilderState<File>#d3cac)
.
Here a more detailed description to where the above requirement comes from :
In fact, I would like to use the Navigator.pop() as soon as the user presses the cancel-Button as for a image_picker Plugin usage.
I realised that the snapshot.hashCode-change is one way to detect the Cancel-Button from being pressed by the user. Therefore if the user presses that Cancel-button, I would like to do no more than navigate.pop back to where I came from ;)... I don't want to show anymore or keep the user inside a Widget, but immediately return back to the view that originally Navigate.pushed.
Here is the image-picker part that does the image-finding - and the Cancel-treatment (i.e. call of _cancelBtnPressedWidget-Widget).
import 'package:flutter/material.dart';
import 'dart:io';
import 'package:image_picker/image_picker.dart';
File _imageFile;
bool _pickImage = true;
int _hashy = 0;
#override
Widget build(BuildContext context) {
if (_pickImage) {
return FutureBuilder<File>(
future: ImagePicker.pickImage(source: ImageSource.camera),
builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
if (snapshot.hasData) {
_pickImage = false;
_imageFile = snapshot.data;
return _showImage(snapshot.data);
} else {
// when cancel is pressed, the hashCode changes...
if ((_hashy != 0) && (snapshot.hashCode != _hashy)) {
// when cancel pressed
return _cancelBtnPressedWidget(context);
}
_hashy = snapshot.hashCode;
return Scaffold(
body: Center(
child: Text('no image picker available'),
),
);
}
},
);
} else {
return _showImage(_imageFile);
}
}
Widget _cancelBtnPressedWidget(BuildContext context) {
// requires a return ..... How to overcome this requirement ????
Navigator.pop(context);
}
Widget _showImage(File imgFile) {
return Scaffold(
body: SafeArea(
child: Stack(
alignment: AlignmentDirectional.topStart,
children: <Widget>[
Positioned(
left: 0.0,
bottom: 0.0,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Center(
child: imgFile == null
? Text('No image selected.')
: Image.file(imgFile),
),
),
// more stacks ... not important here....
],
),
),
);
}
Of course, inside pubspec.yaml you add the necessary dependency:
dependencies:
flutter:
sdk: flutter
image_picker: ^0.5.0+3
Add-on:
I tried to add a confirmation-dialog (i.e. to ask the user "Do you really want to cancel").
Now, the above error is gone. However, now the image_picker keeps popping up again and again...overwriting this dialog.
What am I still doing wrong her ??
Widget _cancelBtnPressedWidget(BuildContext context) {
return AlertDialog(
title: Text('Camera Alert'),
content: Text('Are you sure you want to cancel ?'),
actions: <Widget>[
FlatButton(
child: Text('Close'),
onPressed: () {
Navigator.pop(context);
},
)
],
);
}

Answer 1

I finally found an answer:
Indeed, I was able to place a confirmation-dialog and there I was able to place the necessary return Widget.
Now the Cancel for the image_picker is working as expected !
Here is the entire Code:
import 'package:flutter/material.dart';
import 'dart:io';
import 'package:image_picker/image_picker.dart';
class MyImagePickerView extends StatefulWidget {
_MyImagePickerViewState createState() => _MyImagePickerViewState();
}
class _MyImagePickerViewState extends State<MyImagePickerView> {
File _imageFile;
bool _pickImage = true;
int _hashy = 0;
bool _cancelPressed = false;
#override
Widget build(BuildContext context) {
if (_pickImage) {
return FutureBuilder<File>(
future: ImagePicker.pickImage(source: ImageSource.camera),
builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
if (snapshot.hasData) {
_pickImage = false;
_imageFile = snapshot.data;
return _showImage(snapshot.data);
} else {
// when cancel is pressed, the hashCode changes...
if ((_hashy != 0) && (snapshot.hashCode != _hashy)) {
// when cancel pressed
return _cancelBtnPressedWidget(context);
}
_hashy = snapshot.hashCode;
return Scaffold(
body: Center(
child: Text('no image picker available'),
),
);
}
},
);
} else {
if (_cancelPressed) {
return _showAlert();
} else {
return _showImage(_imageFile);
}
}
}
Widget _cancelBtnPressedWidget(BuildContext context) {
_cancelPressed = true;
_pickImage = false;
return Scaffold(
body: Center(
child: Text('Press button to start.'),
),
);
}
Widget _showImage(File imgFile) {
StateContainerState container = StateContainer.of(context);
return Scaffold(
body: SafeArea(
child: Stack(
alignment: AlignmentDirectional.topStart,
children: <Widget>[
Positioned(
left: 0.0,
bottom: 0.0,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Center(
child: imgFile == null
? Text('No image selected.')
: Image.file(imgFile),
),
),
// more stacks ... not important here....
],
),
),
);
}
Widget _showAlert() {
return AlertDialog(
title: Text('Camera Alert'),
content: Text('Are you sure you want to cancel the Camera ?'),
actions: <Widget>[
FlatButton(
child: Text('No'),
onPressed: () {
setState(() {
_pickImage = true;
_cancelPressed = false;
});
},
),
FlatButton(
child: Text('Yes'),
onPressed: () {
Navigator.pop(context);
},
),
],
);
}
#override
void dispose() {
_myController.dispose();
super.dispose();
}
}

Answer 2

To me it doesn't seem like you are capturing the click at all. For me I would return a button in the _cancelBtnPressedWidget and in the onPressed call the pop.