Snackbar is displayed after tapping back button

Question

Flow is: user clicks on a link from screen 1 to go to screen 2. On screen 2, user enters required data and taps on save button that saves data and navigates to screen 1 where I want to show a snackbar.

This sounds very similar to this and this post, but it's not working for me. So, I followed this code sample which works properly, but there's one issue.

If I press app bar back button or device back button from screen 2, it still shows the snackbar on screen 1. Wondering how could I avoid this behavior of not showing snackbar after hitting back buttons.

After user saves data on screen 2, I am simply using Navigator.pop(context) that takes user to screen 1. On screen 1, I've a method that navigates to screen 2 and triggers snackbar as below:

Navigator.push(
      context, MaterialPageRoute(builder: (context) => Screen2())
    );
    scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Show me'),));

Although this works, I don't want to show the snackbar if user clicks back button.

Answer 1

Problem is, your snackBar has duration, within that duration if you navigate back to the screen, you'll see that old snackBar again.

Solution is add this method before Navigator:

Scaffold.of(context).removeCurrentSnackBar();

In your case, you're using scaffoldKey, so translate it as you need. But, be sure you are contacting with right Scaffold.

scaffoldKey.currentState.removeCurrentSnackBar();

Official link: https://api.flutter.dev/flutter/material/ScaffoldState/removeCurrentSnackBar.html

Edit: About calling Screen 1 Scaffold inside Screen 2 Scaffold:

Your screen has Scaffolds. Scaffolds have keys in your situation as I see.

Let's say Screen1 has screen1Key ScaffoldState key. Same for Screen2.

Inside Screen2 you must call

screen1Key.currentState.removeCurrentSnackBar();

full example:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Screen1(),
  ));
}

GlobalKey<ScaffoldState> screen1Key = GlobalKey<ScaffoldState>();
GlobalKey<ScaffoldState> screen2Key = GlobalKey<ScaffoldState>();

class Screen1 extends StatefulWidget {
  @override
  _Screen1State createState() => _Screen1State();
}

class _Screen1State extends State<Screen1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: screen1Key,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                screen1Key.currentState
                    .showSnackBar(SnackBar(content: Text('Screen 1 SnackBar')));
              },
              child: Text('Show SnackBar'),
            ),
            RaisedButton(
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) {
                  return Screen2();
                }));
              },
              child: Text('Navigate forward'),
            ),
          ],
        ),
      ),
    );
  }
}

class Screen2 extends StatefulWidget {
  @override
  _Screen2State createState() => _Screen2State();
}

class _Screen2State extends State<Screen2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: screen2Key,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                screen2Key.currentState
                    .showSnackBar(SnackBar(content: Text('Screen 2 SnackBar')));
              },
              child: Text('Show SnackBar'),
            ),
            RaisedButton(
              onPressed: () {
                screen1Key.currentState.removeCurrentSnackBar();
                Navigator.pop(context);
              },
              child: Text('Navigate Back'),
            ),
          ],
        ),
      ),
    );
  }
}

I hope I understand well your problem.