Repository navigation
IconButton's splash radius is too large on an AppBar #64702
Description
The IconButton does follow the default material specs and has a splash radius of about 24px. This is definitely not suitable for auto generated icons like the back button and the scaffold drawer button.
Though the material design does specify a set splash radius, an overflow is definitely not intended. The icon button's splash always overflows in AppBars.
Possible solutions -
-
Allow setting the default splash radius for all auto generated icon buttons in
AppBars. -
Set the default splash radius so that it doesnt overflow atleast - in the defaul
AppBar
Activity
sidrao2006 commentedon Aug 27, 2020
Possibly related to inactive issue - #31194
darshankawar commentedon Aug 27, 2020
Hi @sidrao2006,
Can you provide a screenshot of the splash effect that overflows the app bar ?
Also, provide
flutter doctor -v.Thanks.
sidrao2006 commentedon Aug 27, 2020
It was easier to use a dartpad for this as there were very few changes needed.
Link to dartpad
Changes made
sidrao2006 commentedon Aug 27, 2020
CC @pedromassango, @TahaTesser
dnfield commentedon Aug 27, 2020
Why not just set the splashSize property to your desired value?
sidrao2006 commentedon Aug 27, 2020
@dnfield it is not possible to the
splashRadiusin auto generatedIconButtons like the back button and the open drawer button.dnfield commentedon Aug 27, 2020
Ahh, ok. It sounds like
appBarmay need to have some extra property to pass through toiconButtons it creates.I did check on some other Android apps and it looks ike the splash does not typically overflow the bar.
That said, app bars can be different sizes, and some people may want the overflow, so whatever is done here shouldn't be a change to defaults on
IconButton./cc @willlarche @rami-a who might know the right person on the Material team to look at this.
[-]IconButton's splash radius is too large[/-][+]IconButton's splash radius is too large on an AppBar[/+]dnfield commentedon Aug 27, 2020
Also, based on a quick look at this code: https://github.com/flutter/flutter/tree/master/packages/flutter/lib/src/material/ink_highlight.dart#L122
Seems a little fishy to me - I wonder if there's some way we should be making sure that the highlight is drawn as a percentage of the constraints rather than as a fixed amount.
30 remaining items
Enzodtz commentedon Feb 15, 2022
What is the status of this? Thanks
GayatriDunakhe commentedon Jul 27, 2022
The icon splashRadius look this so
I try to do this -
splashRadius: Material.defaultSplashRadius / 2
then it dosen't show any click moment on that app bar
How I deal with this?
QuncCccccc commentedon Jul 27, 2022
Hi! The IconButton component is recently updated to the Material Design 3 spec, so the splash radius issue will no longer exist. Here's the issue link which contains the related PRs: #103528
Please let me know if there are any questions:) Thanks!
FeodorFitsner commentedon Aug 2, 2022
Is it by design that
IconButtoninAppBaris not having a round splash now?QuncCccccc commentedon Aug 25, 2022
The PR is reverted, so I re-opened this issue. Will add a reland soon.
github-actions commentedon Sep 16, 2022
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.