Skip to content

[IOS]No Hero animation with SnackBar on drag to pop gesture #100782

@letsar

Description

@letsar

Steps to Reproduce

On iOS, while using the drag to pop gesture, the SnackBar appears on both Scaffold during the transition.

  1. Execute flutter run on the code sample, on an iOS device (or simulator)
  2. Click on the PageTwo button
  3. Click on the Show SnackBar button
  4. Use the drag to pop gesture while the SnackBar is still displayed

Expected results:

snackbar_hero_ok.mp4

Actual results:

snackbar_hero_ko.mp4

We can fix it by adding transitionOnUserGestures: true, to the Hero created by the SnackBar, but I don't know if we should set true by default or not.

If we always want this behavior, we can simply set the Hero like that:

return Hero(
  tag: '<SnackBar Hero tag - ${widget.content}>',
  transitionOnUserGestures: true,
  child: snackBarTransition,
);
Code sample
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: PageOne(),
    );
  }
}

class PageOne extends StatelessWidget {
  const PageOne({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text('Page Two'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const PageTwo(),
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }
}

class PageTwo extends StatelessWidget {
  const PageTwo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Builder(builder: (context) {
        return Center(
          child: ElevatedButton(
            child: const Text('Show SnackBar'),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(
                  content: Text('SnackBar!'),
                  behavior: SnackBarBehavior.floating,
                ),
              );
            },
          ),
        );
      }),
    );
  }
}
Logs
[✓] Flutter (Channel stable, 2.10.2, on macOS 12.2.1 21D62 darwin-arm, locale fr-FR)
    • Flutter version 2.10.2 at /Users/romain.rastel/dev/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 097d3313d8 (il y a 5 semaines), 2022-02-18 19:33:08 -0600
    • Engine revision a83ed0e5e3
    • Dart version 2.16.1
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/romain.rastel/Library/Android/sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)

[✓] VS Code (version 1.64.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.36.0

[✓] Connected device (3 available)
    • iPhone (mobile)    • 00008030-000139323E86402E            • ios            • iOS 14.8.1 18H107
    • iPhone 13 (mobile) • 7F4ADD7F-5E90-4286-8263-68F02BBF524B • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator)
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome 99.0.4844.83

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Metadata

Metadata

Assignees

No one assigned

    Labels

    a: animationAnimation APIsf: material designflutter/packages/flutter/material repository.found in release: 2.10Found to occur in 2.10found in release: 2.13Found to occur in 2.13good first issueRelatively approachable for first-time contributorshas reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyr: fixedIssue is closed as already fixed in a newer version

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions