While I am trying to upload a picture using uploadcare. Once I upload an image I do not receive a further response. Maybe I am missing something, but I have been following uploadcare's documentations.
Initialization of uploadcare auth.
#override
void initState() {
super.initState();
_uploadcareClient = UploadcareClient.withSimpleAuth(
publicKey: DotEnv().env['UPLOADCARE_PUBLIC_KEY'],
privateKey: DotEnv().env['UPLOADCARE_PRIVATE_KEY'],
apiVersion: 'v0.5',
);
}
I followed the steps to upload image as shown bellow
Future _onUpload() async {
final file = await showModalBottomSheet<File>(
context: context,
builder: (context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
title: Text('Pick image from gallery'),
onTap: () async => Navigator.pop(
context,
await ImagePicker.pickImage(
source: ImageSource.gallery,
),
),
),
ListTile(
title: Text('Pick image from camera'),
onTap: () async => Navigator.pop(
context,
await ImagePicker.pickImage(
source: ImageSource.camera,
),
),
),
ListTile(
title: Text('Pick video from gallery'),
onTap: () async => Navigator.pop(
context,
await ImagePicker.pickVideo(
source: ImageSource.gallery,
),
),
),
ListTile(
title: Text('Pick video from camera'),
onTap: () async => Navigator.pop(
context,
await ImagePicker.pickVideo(
source: ImageSource.camera,
),
),
),
],
);
});
if (file != null) {
Navigator.push(
context,
MaterialPageRoute(
fullscreenDialog: true,
builder: (context) => UploadScreen(
file: file,
uploadcareClient: _uploadcareClient,
),
));
}
}
Upload process:
Related
How can I to close all the showDialogs in my aplication? in this case _mostrarDialogConfirmacion is the dialog where i request to the user a confirmation to make a query, cargandoDialog is another dialog where i show a loading message while the query is executing, when the query finish, i want to close the two dialogs and only see the _mostrarDialogMensaje dialog
_mostrarDialogConfirmacion(
mensaje,
BuildContext context,
codLink,
motivo,
) {
return showDialog(
context: context,
builder: (context){
return AlertDialog(
title: const Text(
'Informacion',
textAlign: TextAlign.center,
),
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget> [
Text(mensaje, textAlign: TextAlign.center),
],
),
actions: <Widget> [
TextButton(
onPressed: () async {
Navigator.of(context).pop();
cargandoDialog(context);
List<dynamic> ingresarReclamo1 = await ingresarReclamo
.ingresarReclamo(codLink, titular, motivo);
// ignore: use_build_context_synchronously
Navigator.of(context).pop();
// ignore: use_build_context_synchronously
_mostrarDialogMensaje(
ingresarReclamo1[0].observaciones,
ingresarReclamo1[0].validado,
context,
);
},
child: const Text('Si')
),
TextButton(
onPressed: ()=> Navigator.of(context).pop(),
child: const Text('No')
),
],
);
}
);
}
you will dismiss first dialog and then you can use whenComplete to dismiss the second dialog
showDialog(
.....
).whenComplete(() => Navigator.of(context).pop())
You can return bool while .pop(boolValue) to check the tap button. Also, the showDialog is a future method, you can use await until it finished and then processed to next dialog. Navigator.of(context).pop() will be used to close recent dialog on this case. As for my understanding about the question, try this example code.
_mostrarDialogConfirmacion(mensaje, BuildContext context, codLink, motivo) {
return showDialog(
context: context,
barrierDismissible: false,
builder: (context) {
return AlertDialog(
title: const Text('Informacion', textAlign: TextAlign.center),
content: Column(
mainAxisSize: MainAxisSize.min,
),
actions: <Widget>[
TextButton(
onPressed: () async {
// Navigator.of(context)
// .pop(); //if you like to close previous one before showing the next dialog
final bool isSi = await showDialog(
barrierDismissible: false,
builder: (context) => AlertDialog(
content: Text("Second Dialog"),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop(true);
},
child: const Text('Si')),
TextButton(
onPressed: () =>
Navigator.of(context).pop(false),
child: const Text('No')),
],
),
context: context);
if (mounted && isSi) {
Navigator.of(context).pop();
await showDialog(
builder: (context) => AlertDialog(
content: Text("_mostrarDialogMensaje")),
context: context);
}
},
child: const Text('Si')),
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: const Text('No')),
],
);
});
}
I'm trying to use a SimpleDialog to select an image from Gallery or Camera but I'm getting the run error type 'SimpleDialog' is not a subtype of type '(() => void)?'
This is my function to call the dialog box
selectImage(context) {
{
return SimpleDialog(
title: Text("Upload Image"),
children: [
SimpleDialogOption(
child: Text("Take Photo"),
onPressed: handleTakePhoto,
),
SimpleDialogOption(
child: Text("Upload From Gallery"),
onPressed: handleChooseFromGallery,
),
SimpleDialogOption(
onPressed: () => Navigator.pop(context),
child: Center(
child: Text("Cancel"),
),
),
],
);
}
}
My handleTakePhoto and handleChooseFromGallery functions are as
handleTakePhoto() async {
Navigator.pop(context);
File file = (await ImagePicker().getImage(
source: ImageSource.camera,
maxHeight: 675.0,
maxWidth: 960,
// imageQuality: 50, //TODO: Look into this
)) as File;
setState(() {
this.file = file;
});
}
handleChooseFromGallery() async {
Navigator.pop(context);
File file = (await ImagePicker().getImage(
source: ImageSource.gallery,
maxWidth: 960,
maxHeight: 675,
preferredCameraDevice: CameraDevice.rear)) as File;
setState(() {
this.file = file;
});
}
Where have I gone wrong?
try to this way implement third dialog
SimpleDialogOption(
onPressed: () { Navigator.pop(context) },
child: Center(
child: Text("Cancel"),
),
),
SimpleDialog needs to be wrap inside showDialog, to get it displayed
Future<void> selectImage() async {
await showDialog(
context: context,
builder: (BuildContext context) {
return SimpleDialog(
title: Text("Upload Image"),
children: [
SimpleDialogOption(
child: Text("Take Photo"),
onPressed: handleTakePhoto,
),
SimpleDialogOption(
child: Text("Upload From Gallery"),
onPressed: handleChooseFromGallery,
),
SimpleDialogOption(
onPressed: () => Navigator.pop(context),
child: Center(
child: Text("Cancel"),
),
),
],
);
});
}
Output:
I have a problem. I would like to pop the screen (of main context) when alert dialog is closed.
So here how it goes:
User does some staff.
Alert dialog is open
It is open for 3 seconds.
Alert dialog is closed
We move user to the main screen (EmailPage for me)
Whole method:
Future<void> _sendMessageToSupport() async {
final body = {
'email': emailController.text, //
'topic': topicController.text, //
'message': contentController.text,
};
final jsonString = json.encode(body);
final uri =
Uri.http(AppConstants.BASE_URL, AppConstants.SUPPORT_CONTACT_ENDPOINT);
final headers = {HttpHeaders.contentTypeHeader: 'application/json'};
_setRefreshProgressIndicator(true);
await http.post(uri, headers: headers, body: jsonString);
_setRefreshProgressIndicator(false);
showDialog(
barrierDismissible: false,
context: context,
builder: (context) {
Future.delayed(
Duration(seconds: 3),
() {
Navigator.of(context).pop(true);
/*Navigator.push(context,
new MaterialPageRoute(builder: (context) => EmailPage()));*/ //navigates to EmailPage rather than pop to it
},
);
return AlertDialog(
title: Text(
'blabla',
style: TextStyle(
fontSize: 18,
color: Color(0xff000000),
),
textAlign: TextAlign.center,
),
);
},
);
}
We move to this screen (let's say A screen) from the EmailPage. User does staff and we should automatically back to the EmailPage. I have made it like this:
Future.delayed(
Duration(seconds: 3),
() {
Navigator.of(context).pop(true);
/*Navigator.push(context,
new MaterialPageRoute(builder: (context) => EmailPage()));*/ //navigates to EmailPage rather than pop
},
);
but the problem is we move user to EmailPage by pushing new screen and then when he clicks on the back arrow on the appbar he is moved to screen A again.
Could you tell me how can I do it? I mean, I know that I need to pop from context of build method, but how? When I did something like this (pop on the end of the method):
builder: (context) {
Future.delayed(
Duration(seconds: 3),
() {
Navigator.of(context).pop(true);
/*Navigator.push(context,
new MaterialPageRoute(builder: (context) => EmailPage()));*/ //navigates to EmailPage rather than pop
},
);
return AlertDialog(
title: Text(
'Wysłano zapytanie do supportu. Postaramy się odpowiedzieć jak najszybciej!',
style: TextStyle(
fontSize: 18,
color: Color(0xff000000),
),
textAlign: TextAlign.center,
),
);
},
);
Navigator.of(context).pop(true);
}
then popup was not even shown.
Let me know if this is not what you're looking for.
class EmailPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('EmailPage')),
body: Center(
child: ElevatedButton(
onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => PageA())),
child: Text('Go to Page A'),
),
),
);
}
}
class PageA extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('PageA')),
body: Center(
child: ElevatedButton(
onPressed: () {
Timer(Duration(seconds: 3), () {
Navigator.pop(context); // Dismisses dialog
Navigator.pop(context); // Navigates back to previous screen
});
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text('Dialog'),
content: Text('Dismissing in 3s'),
),
);
},
child: Text('Show Dialog'),
),
),
);
}
}
The Alert Dialog returns a future that runs when the Dialog is Closed so you can subscribe to that future and use your pop code inside that future. /
Here is a simple example to showcase
RaisedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Are you sure?'),
content: Text('Do you want to remove item?'),
actions: <Widget>[
FlatButton(
onPressed: () => Navigator.of(context).pop('Success'),
child: Text('NO')),
FlatButton(
onPressed: () => Navigator.of(context).pop('Failure'),
child: Text('YES'))
],
)).then((value) =>
print('Result: ' + value.toString()));
},
child: Text('Show Alert Dialog'),
),
I have a bottom navigation bar in a StatefulWidget, and a dialog with 3 options open camera, gallery or cancel.
Here is my code:
navigation bar
Widget build(BuildContext context) {
return new Scaffold(
body: PageView(
children: [
Container(
color: Colors.white,child: HomePage(),),
Container(
color: Colors.white,child: AddPost(),),
],
controller: pageController,
physics: NeverScrollableScrollPhysics(),
onPageChanged: onPageChanged,
),
bottomNavigationBar: CupertinoTabBar(
backgroundColor: Colors.white,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home,
title: Container(height: 0.0),
backgroundColor: Colors.white),
BottomNavigationBarItem(
icon: Icon(Icons.add_circle,
title: Container(height: 0.0),
)
],
onTap: navigationTapped,
currentIndex: _page,
),
);
}
dialog
File file;
_selectImage( ) async {
return showDialog<Null>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return SimpleDialog(
title: const Text('Create a Post'),
children: <Widget>[
SimpleDialogOption(
child: const Text('Take a photo'),
onPressed: () async {
Navigator.pop(context);
File imageFile =
await ImagePicker.pickImage(source: ImageSource.camera, maxWidth: 1920, maxHeight: 1200, imageQuality: 80);
setState(() {
file = imageFile;
});
}),
SimpleDialogOption(
child: const Text('Choose from Gallery'),
onPressed: () async {
Navigator.of(context).pop();
File imageFile =
await ImagePicker.pickImage(source: ImageSource.gallery, maxWidth: 1920, maxHeight: 1200, imageQuality: 80);
setState(() {
file = imageFile;
});
}),
SimpleDialogOption(
child: const Text("Cancel"),
onPressed: () {
Navigator.pop(context);
},
)
],
);
},
);
}
I want to do something like this, i can open the dialog but it didn't wait til option is selected
void navigationTapped(int page) async{
if(page != 1){
pageController.jumpToPage(page);
}else{
await _selectImage(); //opens dialog
}
//Handle button tap
}
How can i do to await until option is select by the user on tap the navigation bar?
Thanks in advance!
In your _selectImage function, you can wait the dialog to be closed to do some code like this :
await showDialog(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return SimpleDialog(
title: const Text('Create a Post'),
children: <Widget>[
SimpleDialogOption(
child: const Text('Take a photo'),
onPressed: () async {
Navigator.pop(context);
File imageFile = await ImagePicker.pickImage(source: ImageSource.camera, maxWidth: 1920, maxHeight: 1200, imageQuality: 80);
setState(() {
file = imageFile;
});
}),
SimpleDialogOption(
child: const Text('Choose from Gallery'),
onPressed: () async {
Navigator.of(context).pop();
File imageFile = await ImagePicker.pickImage(source: ImageSource.gallery, maxWidth: 1920, maxHeight: 1200, imageQuality: 80);
setState(() {
file = imageFile;
});
}),
SimpleDialogOption(
child: const Text("Cancel"),
onPressed: () {
Navigator.pop(context);
},
)
],
);
},
).then((onValue) {
if (onValue != null) {
/// Code you want to do
}
});
The onValue can be set using this function :
Navigator.pop(context, valueYouWantToReturn);
If you want to do some code even if onValue is null (Navigator.pop(context)), delete the condition
child: RaisedButton(
color: const Color(0xFF5867DD),
onPressed: (){
updateProfilePic();
},
Widget updateProfilePic(){
return SimpleDialog(
title: const Text('Select any option'),
children: <Widget>[
SimpleDialogOption(
onPressed: () { profileImg = ImagePicker.pickImage(source: ImageSource.gallery)
.whenComplete(() {
setState(() {});
}); },
child: const Text('open gallery'),
),
SimpleDialogOption(
onPressed: () { profileImg = ImagePicker.pickImage(source: ImageSource.camera)
.whenComplete(() {
setState(() {});
}); },
child: const Text('open camera'),
),
],
);
}
I am trying to implement Dialog when the button is pressed.I want to select image from gallery and camera so that i created a dialog to select any option to upload the picture.The issue is when i click the button dialog is not visible.
You need to call showDialog
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text(title),
content: Text(message),
);
});
As mentioned by Figen Güngör You need to call showDialog.
Just want to clarify that it is a Future (function) not a Widget, therefore your code would be like this:
Future updateProfilePic(BuildContext context){
return showDialog(
context: context,
builder : (BuildContext context){
return SimpleDialog(
title: const Text('Select any option'),
children: <Widget>[
SimpleDialogOption(
onPressed: () { profileImg = ImagePicker.pickImage(source: ImageSource.gallery)
.whenComplete(() {
setState(() {});
}); },
child: const Text('open gallery'),
),
SimpleDialogOption(
onPressed: () { profileImg = ImagePicker.pickImage(source: ImageSource.camera)
.whenComplete(() {
setState(() {});
}); },
child: const Text('open camera'),
),
],
);
},
);
}