samples icon indicating copy to clipboard operation
samples copied to clipboard
verified publisher icon flutter

Identify M3 demo sample issues, determine source of each, and file relevant issues

Open parlough opened this issue 2 years ago • 2 comments

I'm going to be using this issue to find and track issues with the sample, then determine if they're caused by wasm compilation, skwasm, the sample itself, browser support, or Flutter. If an issue is not open for any issues found, I will open one in the appropriate repository and link to it from here.

Code: https://github.com/flutter/samples/tree/main/material_3_demo Version: HEAD on main Staged: https://parlough-testing-skwasm.web.app/

Determined issues

Wasm build

These issues happen with flutter build web --wasm (using CanvasKit).

  • [x] Time picker shows 03:54 Dec 24 if it's currently 15:54 Dec 23
    • So time picker thought it was 12 hours later (later learned because I am in UTC-6)
    • Issue: https://github.com/dart-lang/sdk/issues/54448
    • Fix: https://dart-review.googlesource.com/c/sdk/+/343520

skwasm renderer

These issues happen with flutter build web --wasm --web-renderer=skwasm.

  • [ ] Selecting image doesn't change color scheme
    • Issue: https://github.com/flutter/flutter/issues/141326
  • [ ] Typed text doesn't render in any text field or search bar
    • Issue: https://github.com/flutter/flutter/issues/141001
  • [ ] Disabled ActionChip and disabled InputChip aren't rendering their contents
    • Issue: https://github.com/flutter/flutter/issues/140999
  • [ ] Background of "x" on hover of InputChip is improperly located
    • Issue: https://github.com/flutter/flutter/issues/141000

Flutter (framework or engine)

I determined these issues affect all Flutter backends, at least web and desktop.

  • [ ] x/delete button on InputChip has square background on hover inconsistent with ink splash.
    • Ink splash on holding the "x" is too big
    • According to https://m3.material.io/components/chips/specs#4d4c1079-e4e7-4e03-9a17-9a8f09c06e85, it looks like it should be circular
    • Issue: https://github.com/flutter/flutter/issues/141335
  • [ ] Hovering over where "Delete" would be in the disabled InputChip shows delete even though it's not interactable
    • Issue: https://github.com/flutter/flutter/issues/141336
  • [ ] Wide screen date picker "Switch to input" button is too close to corner
    • Issue: https://github.com/flutter/flutter/issues/141338
  • [ ] Narrow screen date picker has vertical scroll bar that does nothing even if not needed on 6 row months
    • Issue: https://github.com/flutter/flutter/issues/141348
  • [ ] Holding a day in the date picker results in a bigger inkwell than the button
    • Issue: https://github.com/flutter/flutter/issues/141350
  • [ ] The progress bars/indicators don't fit in well with the rest of the widgets.
    • Perhaps because of lack of round ends? Or colors too harsh?
    • Issue: https://github.com/flutter/flutter/issues/141340
  • [ ] SnackBar "Close" text hover surface is (almost) impossible to see in light and dark themes
    • Issue: https://github.com/flutter/flutter/issues/141343
  • [ ] Cursor in filled text fields with label too big, clips with text
    • Issue: https://github.com/flutter/flutter/issues/141354
  • [ ] In the search bar search menu, the "X" is confusing when you haven't typed anything. Seems like it should exit.
    • Issue: https://github.com/flutter/flutter/issues/141346
    • Issue: https://github.com/flutter/flutter/issues/141347
  • [ ] If you make a selection in the search bar, leave it with tab focus, then return with tab focus and push "Enter", focus is lost? If you focus the search bar, then press "Enter", focus is lost and returned to the beginning of the app.
    • Issue: https://github.com/flutter/flutter/issues/141395
  • [ ] The non-modal bottom sheet doesn't have a drag handle, but the modal one does.
    • Issue: https://github.com/flutter/flutter/issues/141353
  • [ ] Circle when hovering back button of medium and large top app bars is too big
    • https://github.com/flutter/flutter/issues/141361

Sample

I determined these issues are likely because of the sample itself.

  • [ ] Tab order in wide screen/expanded navigation menu is wrong.
    • It seems to be going by column rather than row?
  • [ ] In the search anchor search view, "No search history" is too low contrast and positioned too close to the divider.
  • [ ] If you open "Show bottom sheet" then close it by dragging or the back button in the upper right, the text button will still say "Hide bottom sheet" despite it already being hidden.
  • [ ] In the "Text fields" section, the X/close buttons added to each should only appear once text is added and they should have a little margin from the right.

Browser(s)

  • Annoying warning about WebGL extension support from Chrome
    • WebGL: this extension has very low support on mobile devices; do not rely on it for rendering effects: WEBGL_polygon_mode

Undetermined issues

Not sure

  • [ ] Uncaught TypeError: Cannot read properties of null (reading 'ds'...
    • I can't reproduce. Might have been fixed.
  • [ ] Still working to find more discrepancies
  • [ ] Typing in text input boxes on narrow, short screen moves page up

Sample or Flutter

I determined these issues impact the sample whether running with Wasm or not. I still need to determine if they are because of Flutter or because of the sample.

  • [ ] Sometimes after resizing the window, can't scroll down all the way
    • Video: https://github.com/flutter/samples/assets/18372958/6d6b0727-ae93-46eb-9877-336135c3f84a

parlough avatar Dec 23 '23 21:12 parlough

Hi all! I've gone through the Material 3 demo sample to find various issues, then determine if they are caused by dart2wasm compilation, the skwasm renderer, Flutter, or the sample itself.

You can find each of these issues above organized within those categories. Each issue has a link to the corresponding Flutter or Dart issue(s) I filed for them, as well as to the relevant fix if that's been made.

\cc @kevmoo For awareness about the various skwasm issues. As for dart2wasm with or without skwasm, it resulted in only one issue unique to it, and I was able to fix that in the SDK. \cc @QuncCccccc For awareness and potentially help with resolving the sample and framework issues.

Thanks!

parlough avatar Jan 11 '24 19:01 parlough

@parlough – you rock SOOO MUCH 🤘

kevmoo avatar Jan 11 '24 19:01 kevmoo

Thanks everyone! I'm going to close this as resolved as the last major skwasm issue (https://github.com/flutter/flutter/issues/141326) has been resolved in main and the other still relevant issues are now tracked elsewhere.

parlough avatar Jun 25 '24 22:06 parlough

Confirmed deploy here! https://flutterweb-wasm.web.app/

kevmoo avatar Jun 25 '24 22:06 kevmoo