Snackbar not working as expected

[Alabhya268]

Describe the bug
Snackbar not working as expected .
Whenever snackbar shows up , Its shows 2 snackbar both of different looks and size,
one uses whole app and other uses only demo section .

To switch channel run:

flutter channel master
flutter upgrade

Flutter doctor
Copy and paste the output of flutter doctor -v here

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, 1.24.0-8.0.pre.266, on Microsoft Windows [Version 10.0.19042.630], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.8.1)
[√] Android Studio (version 4.1.0)
[√] VS Code (version 1.51.1)
[√] Connected device (1 available)

• No issues found!

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Material demo section'
2. Click on 'snackbar demo'
3. Click on 'SHOW A SNACKBAR' button
4. See error

Expected behavior
Only one snackbar should show up and it should only use demo area .

Screenshots

Desktop (please complete the following information):

• OS: Windows, Android

Smartphone (please complete the following information):

• Device: Oneplus 7 pro
• OS: Android 10

Additional context
Issue caused after merging this PR #343 .

[rami-a]

hmm interesting, I guess this is an unintended side effect of the new snackbar messenger system. Perhaps because this screen contains two scaffolds, it is doing this.

@Piinks do you happen to know if there is away around this?

[Piinks]

Hey @Alabhya268 thanks for reporting this! Yes, this is an unintended consequence of the ScaffoldMessenger. We are adding some error handling to prevent this in flutter/flutter#70227 and updating the migration guide in flutter/website#4977

Since there are nested Scaffolds, when the ScaffoldMessenger is called upon to show a snackbar, both the inner and outer scaffold receive the snackbar. This can be fixed by scoping these nested Scaffolds - by placing a scaffoldMessenger in between. That way, each scaffold will listen to a separate messenger, and there won't be duplication.

In short:

// Nested Scaffolds are listening to the same messenger, resulting in duplication
ScaffoldMessenger
  |__Scaffold (outer)
       |__Scaffold (inner)

// Adding another ScaffoldMessenger in between
// sets a new scope, so they are listening to different
// messengers.
ScaffoldMessenger
  |__Scaffold (outer)
       |__ ScaffoldMessenger
             |__Scaffold (inner)

[Piinks]

Fix is in #377 :)