Home > Software design >  Flutter : success message when its complete
Flutter : success message when its complete

Time:08-06

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;
}
  • Related