-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
AppBar shape disappears on AppBar elevation change when scrolling #145945
Comments
I've dug some more into this and it seems that the flicker of the AppBar shape happens on AppBar elevation change when the content get's scrolled underneath the AppBar. A workaround would be to set |
Thanks for the report. I'm able to reproduce the issue as well. flutter doctor -v (stable and master)[✓] Flutter (Channel stable, 3.19.5, on macOS 14.1 23B74 darwin-x64, locale en-VN)
• Flutter version 3.19.5 on channel stable at /Users/huynq/Documents/GitHub/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 300451adae (25 hours ago), 2024-03-27 21:54:07 -0500
• Engine revision e76c956498
• Dart version 3.3.3
• DevTools version 2.31.1
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/huynq/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• ANDROID_HOME = /Users/huynq/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15C500b
• CocoaPods version 1.15.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2023.2)
• 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
• android-studio-dir = /Applications/Android Studio.app/
• Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
[✓] VS Code (version 1.87.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.84.0
[✓] Connected device (3 available)
• Pixel 7 (mobile) • 2B171FDH20084L • android-arm64 • Android 14 (API 34)
• macOS (desktop) • macos • darwin-x64 • macOS 14.1 23B74 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 123.0.6312.86
[✓] Network resources
• All expected network resources are available.
• No issues found! [!] Flutter (Channel master, 3.21.0-17.0.pre.24, on macOS 14.1 23B74 darwin-x64, locale en-VN)
• Flutter version 3.21.0-17.0.pre.24 on channel master at /Users/huynq/Documents/GitHub/flutter_master
! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 1a2f34ab5b (63 minutes ago), 2024-03-28 19:39:17 -0700
• Engine revision 68aa9ba386
• Dart version 3.4.0 (build 3.4.0-282.0.dev)
• DevTools version 2.34.1
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/huynq/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• ANDROID_HOME = /Users/huynq/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15C500b
• CocoaPods version 1.15.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2023.2)
• 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
• android-studio-dir = /Applications/Android Studio.app/
• Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
[✓] VS Code (version 1.87.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.84.0
[✓] Connected device (3 available)
• Pixel 7 (mobile) • 2B171FDH20084L • android-arm64 • Android 14 (API 34)
• macOS (desktop) • macos • darwin-x64 • macOS 14.1 23B74 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 123.0.6312.86
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category. |
CC @Piinks |
Up on investigating this issue, this looks this is reproduced due to custom shape having incomplete implementation, without lerp functions or a const constructor. This can be reproduced with just The custom shape without lerp functions fails to be identified by Complete custom shappe implementation should have lerp functions to identify the custom shape and lerp it's properties.
expand to view the code sampleimport 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _elevation = 0;
void _incrementElevation() {
setState(() {
_elevation++;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(useMaterial3: false),
home: Scaffold(
body: Center(
child: GestureDetector(
onTap: () {
_incrementElevation();
},
child: Material(
elevation: _elevation.toDouble(),
color: Colors.red,
shape: CustomShape(),
child: const SizedBox(
width: 100,
height: 100,
child: Center(child: Text('Tap me')),
),
),
),
),
),
);
}
}
class CustomShape extends ContinuousRectangleBorder {
// const CustomShape();
@override
Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
double height = rect.height + 80;
double width = rect.width;
// print('SHAPE CALLED');
var path = Path();
path.lineTo(0, 0);
path.lineTo(width, 0);
path.lineTo(width, height + 40);
path.lineTo(0, height - 100);
path.close();
return path;
}
// @override
// ShapeBorder? lerpFrom(ShapeBorder? a, double t) {
// if (a is CustomShape) {
// return CustomShape();
// }
// return super.lerpFrom(a, t);
// }
// @override
// ShapeBorder? lerpTo(ShapeBorder? b, double t) {
// if (b is CustomShape) {
// return CustomShape();
// }
// return super.lerpTo(b, t);
// }
}
To fix this please implement lerp functions. class CustomAppBarShape extends ContinuousRectangleBorder {
const CustomAppBarShape({super.borderRadius = BorderRadius.zero});
@override
Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
double height = rect.height + 80;
double width = rect.width;
print('SHAPE CALLED');
var path = Path();
path.lineTo(0, 0);
path.lineTo(width, 0);
path.lineTo(width, height + 40);
path.lineTo(0, height - 100);
path.close();
return path;
}
@override
ShapeBorder? lerpFrom(ShapeBorder? a, double t) {
if (a is CustomAppBarShape) {
return CustomAppBarShape(borderRadius: BorderRadiusGeometry.lerp(a.borderRadius, borderRadius, t)!);
}
return super.lerpFrom(a, t);
}
@override
ShapeBorder? lerpTo(ShapeBorder? b, double t) {
if (b is CustomAppBarShape) {
return CustomAppBarShape(borderRadius: BorderRadiusGeometry.lerp(b.borderRadius, borderRadius, t)!);
}
return super.lerpTo(b, t);
}
} Fixed code sample for
|
class StadiumBorder extends OutlinedBorder { | |
/// Create a stadium border. | |
const StadiumBorder({ super.side }); | |
@override | |
ShapeBorder scale(double t) => StadiumBorder(side: side.scale(t)); | |
@override | |
ShapeBorder? lerpFrom(ShapeBorder? a, double t) { | |
if (a is StadiumBorder) { | |
return StadiumBorder(side: BorderSide.lerp(a.side, side, t)); | |
} |
@HansMuller Should we add an example for using custom shapes with |
I would never say no to adding an example. In this case I think it would be particularly worthwhile! |
I can confirm that this was in fact...a skill issue and it works perfectly fine with Taha's example. That said no linter has complained about the original example. |
These are optional methods. The constructor alone would've fixed the issue, as it allows |
fixes [AppBar shape disappears on AppBar elevation change when scrolling](#145945) ### Description This PR adds an example for complete custom app bar for the `AppBar.shape` property. ### Preview ![Screenshot 2024-04-08 at 14 21 04](https://github.com/flutter/flutter/assets/48603081/ae3eda2b-b709-4652-9f2c-dd7b7dcfeb5c)
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 |
Steps to reproduce
Following any setState (in app or via hot reloading) the AppBar shape will suddenly disappear when a SingleChildScrollView or a ListView in the same view moves from 0 or reaches 0. For the bug to happen again, setState has to be called again and the ScrollView/ListView has to move away from 0, if it was 0 initially, or reach 0 if it wasn't.
This bug only seems to be present in material 3, not material 2.
tested platforms: iOS, Android, Linux, macOS, web
affected platforms: iOS, Android, Linux, macOS, web
affected channels: stable, master
affected renderers: skia, impeller
Expected results
The AppBar shape should not ever disappear when set.
Actual results
AppBar shape clipper disappears when scrolling
Code sample
Code sample
Screenshots or Video
Screenshots / Video demonstration
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-03-29.at.00.43.49.mp4
Logs
Logs
[Paste your logs here]
Flutter Doctor output
Doctor output
The text was updated successfully, but these errors were encountered: