Navigate back and show snack

Question

I am thinking of this pattern for my application, and cannot find a proper way of doing it. User is in list page, she clicks on an item and goes to edit page. She edits, and hits the save. Now I want the application to - show spinning wheel, while saving the item - after save pop the route to go back to list page, AND show a snackbar on the list page. I don't seem to find a way to pass a parameter to the previous route to tell it about the state, which is to show the snackbar.

Answer 1

For showing progress on click of save button you can use something like this. Firstly initialize a variable static bool isSaving = false; then in your scaffold use it like this.

child:Stack(
    children: <Widget>[
      isSaving
          ? new Container(
              child: new CircularProgressIndicator(
                value: null,
                strokeWidth: 2.0,
              ),
              alignment: Alignment.center,
            )
          : new Container(
              child: new RaisedButton(
                onPressed: () {
                  setState(() {
                    isSaving = true;
                    //Other Implementations here
                  });
                },
                child: new Text("Save"),
              ),
            ),
    ],
  ),

When the operation is complete again set state and make variable false. Now when you get notified that operation has been done use Navigator to go back.

Navigator.pop(context);

For showing snackbar in your previous screen use a Global Key.

GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();

Assign this key to your scaffold.

new Scaffold(
    key: scaffoldKey,
    ...
    )  

As answered here show snackbar just after pop operation like this.

scaffoldKey.currentState
    .showSnackBar(new SnackBar(content: new Text("Saved Successfully")));

Or can try a different approach as explained in this sample. Hope it helps.

Answer 2

You can send data back through pop method. You can do something like that.

In your edit page:

bool saved = item.save();
Navigator.pop(context, saved);

In your list page:

var saved = await Navigator.push(
  context, 
  MaterialPageRoute(builder: (context) => EditRoute(item)),
);
if (saved) {
  // Show success snackbar
} else {
  // Show error snackbar
}