flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
166.65k stars 27.6k forks source link

Dialog animations not following Material Design Specification #155890

Open JHubi1 opened 1 month ago

JHubi1 commented 1 month ago

Steps to reproduce

  1. Create a dialog
  2. Open the dialog (and see)
  3. Close the dialog (and see)

Expected results

The Material Design Specification states, "android components expand and collapse along the x or y axis as they enter and exit". The dialog widget should expand from the top to the bottom and collapse from the bottom to the top. I attached an example in the screenshot section.

https://m3.material.io/styles/motion/transitions/transition-patterns#a8acc8d4-8de2-4602-a9a3-945d44d08bad

Actual results

The dialog fades into the view. This does not meet the requirements given by the specification, and more looks like a relict from MD2.

Code sample

Code sample ```dart import 'package:flutter/material.dart'; void main() { runApp(const MainApp()); } class MainApp extends StatelessWidget { const MainApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( home: MainScaffold(), ); } } class MainScaffold extends StatelessWidget { const MainScaffold({ super.key, }); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: TextButton( onPressed: () { showDialog( context: context, builder: (context) { return AlertDialog( icon: const Icon(Icons.delete), title: const Text("Permanently delete?"), content: const Text( "Deleting the selected messages will also remove them from synced devices."), actions: [ TextButton( onPressed: () => Navigator.pop(context), child: const Text("Cancel")), FilledButton.tonal( onPressed: () => Navigator.pop(context), child: const Text("Delete")), ]); }); }, child: const Text("Open Dialog")), ), ); } } ```

Screenshots or Video

Screenshots / Video demonstration | Flutter behavior | Material specification (1 is android) | |-|-| | ![](https://github.com/user-attachments/assets/59474d57-3a12-4e2d-aa34-9867e05b441c) | ![dialogMaterial-ezgif com-resize](https://github.com/user-attachments/assets/bac3b1ee-cad6-4783-840d-041673302339) |

Logs

Logs > Not required

Flutter Doctor output

Doctor output ```console [√] Flutter (Channel stable, 3.22.2, on Microsoft Windows [Version 10.0.22631.4169], locale de-DE) • Flutter version 3.22.2 on channel stable at E:\dev\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 761747bfc5 (4 months ago), 2024-06-05 22:15:13 +0200 • Engine revision edd8546116 • Dart version 3.4.3 • DevTools version 2.34.3 [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at C:\Users\jakob\AppData\Local\Android\sdk • Platform android-34, build-tools 34.0.0 • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874) • All Android licenses accepted. [√] Android Studio (version 2023.2) • Android Studio at C:\Program Files\Android\Android Studio • 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 17.0.9+0--11185874) [√] VS Code (version 1.93.1) • VS Code at C:\Users\jakob\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.86.0 [√] Connected device (1 available) • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64 • Android 14 (API 34) (emulator) [√] Network resources • All expected network resources are available. • No issues found! ```
huycozy commented 1 month ago

As I can see, showDialog uses FadeTransition to open a DialogRoute currently:

https://github.com/flutter/flutter/blob/10ece6191adf0f96e8bb566a1ed02b251df37276/packages/flutter/lib/src/material/dialog.dart#L1616-L1622

There is also a proposal for using Fade transition on Dialogs at https://github.com/flutter/flutter/issues/68360, which seems outdated.

Reproduced this on Flutter 3.24.3 and 3.26.0-1.0.pre.263.