Repository navigation
Button splash radius does not update when pressed #121626
Description
Steps to Reproduce
- Update buttons border radius when pressed.
Expected results:
Buttons splash border radius updates when pressed.
Actual results:
Buttons splash border radius does not update when pressed.
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark(
useMaterial3: true,
),
home: Scaffold(
body: Center(
child: FilledButton(
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(const Size(80, 80)),
shape: MaterialStateProperty.resolveWith(
(states) => RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
states.contains(MaterialState.pressed) ? 20 : 50,
),
),
),
),
child: const Text('Button'),
onPressed: () {},
),
),
),
);
}
}Logs
[√] Flutter (Channel stable, 3.7.3, on Microsoft Windows [Version 10.0.22623.1325], locale en-US)
• Flutter version 3.7.3 on channel stable at C:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 9944297138 (3 weeks ago), 2023-02-08 15:46:04 -0800
• Engine revision 248290d6d5
• Dart version 2.19.2
• DevTools version 2.20.1
This circular button that changes border radius when pressed is found in many of googles apps.
Metadata
Metadata
Assignees
Labels
Type
Projects
- Status
Activity
[-]Buttons splash border radius does not update when pressed[/-][+]Buttons splash radius does not update when pressed[/+][-]Buttons splash radius does not update when pressed[/-][+]Button splash radius does not update when pressed[/+]danagbemava-nc commentedon Mar 1, 2023
I can reproduce the issue using the code sample provided above.
It seems like when the shape changes before the button is pressed, the splash is properly updated but when the button is actively pressed, the shape doesn't properly update. I tested this by changing the state in the sample above to check for
hoveredinstead ofpressed.recordings
Screen.Recording.2023-03-01.at.07.43.57.mov
Screen.Recording.2023-03-01.at.07.44.16.mov
Looking at the timer in the clock app where this is likely to be easily visible, it looks like the shape changes before the splash is drawn but in the flutter app, the splash is drawn at almost the exact same time the shape is being changed. The pin input screen on the pixel also has this effect but the animation is faster on that side.
timer app recording
telegram-cloud-document-4-6051046017355222600.mp4
Labeling for further investigation
flutter doctor -v
bleroux commentedon Mar 1, 2023
FYI, there was a similar issue about button shape not being updated when hovered (#114301).
I will try to figure out a fix for this one.
InkWelldraws highlights for each state and also a splash when pressed. The objects describing what should be drawn (color, shape, etc) have to be replaced when one of those properties is updated.mikuhl-dev commentedon Mar 5, 2023
Looked into what this type of button is called, it is called a MotionButton.
github-actions commentedon Apr 10, 2023
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.