I recently made a button, and I'm wondering how to include a message that says "success" after the button is pressed and data is stored in the firebase. The button functions as intended and all data is stored in Firebase, as can be seen in the code, but I would want to have a message inside the button or on the screen informing the user that the data has been uploaded successfully.
code -
Container(
height: 60,
width: 290,
padding: EdgeInsets.all(10),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
textStyle: TextStyle(fontSize: 24),
minimumSize: Size.fromHeight(24),
shape: StadiumBorder()),
child: isLoading
? Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
CircularProgressIndicator(
color: Colors.white),
SizedBox(width: 10),
Text('Please wait'),
])
: Text(
'Submit',
style: TextStyle(fontSize: 21),
),
onPressed: () async {
Map<String, dynamic> data = {
'Other medication':
_othermedicationController.text,
'Preventer inhaler': _preventController.text,
'Reliever inhaler': _relieverController.text,
'Triggers': _triggersController.text
(', ')
_triggersController2.text
};
if (isLoading) return;
FirebaseFirestore.instance
.collection('user')
.doc()
.collection('Medication')
.add(data);
setState(() => isLoading = true);
await Future.delayed(Duration(seconds: 2));
setState(() => isLoading = false);
},
),
),
thank you
CodePudding user response:
you may use ScaffoldMessenger and show a snackbar
https://docs.flutter.dev/cookbook/design/snackbars
CodePudding user response:
There are multiple ways you can add messages on screen.
Snackbar
showSnackBar(context){
const snackBar = SnackBar(
content: Text('Saved Successfully'),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}
AlertDialog
showAlertDialog(BuildContext context) {
AlertDialog alert = AlertDialog(
title: Text("Success"),
content: Text("Content saved successfully"),
actions: [
TextButton(
child: Text("Great"),
onPressed: () {Navigator.pop(context);},
)
],
);
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
CodePudding user response:
you have to make a seperate bool function with a try catch then return true if success else false and reflect the ui accordingly to return value ... some thing like as following : -
Container(
height: 60,
width: 290,
padding: EdgeInsets.all(10),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
textStyle: TextStyle(fontSize: 24),
minimumSize: Size.fromHeight(24),
shape: StadiumBorder()),
child: isLoading
? Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
CircularProgressIndicator(
color: Colors.white),
SizedBox(width: 10),
Text('Please wait'),
])
: Text(
'Submit',
style: TextStyle(fontSize: 21),
),
onPressed: () async {
Map<String, dynamic> data = {
'Other medication':
_othermedicationController.text,
'Preventer inhaler': _preventController.text,
'Reliever inhaler': _relieverController.text,
'Triggers': _triggersController.text
(', ')
_triggersController2.text
};
if (isLoading) return;
final success = await getData();
if(success) {print('success');}
//show toast or something
},
),
),
Future<bool>getData()async{
bool success = false;
try {
await FirebaseFirestore.instance
.collection('user')
.doc()
.collection('Medication')
.add(data);
setState(() => isLoading = true);
success = true;
}catch(e){
success = false ;
setState(() => isLoading = false;
print(e);
}
return success;
}