AppBar shape disappears on AppBar elevation change when scrolling #145945
Description
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
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(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
shape: CustomAppBarShape(),
),
body: SingleChildScrollView(
primary: true,
child: Column(
children: [
for (var i = 0; i < 100; i++)
ListTile(
title: Text('Test $i'),
leading: Text('$_counter'),
),
],
),
),
// The bug happens both with SingleChildScrollView and ListView scrolling
// body: ListView(
// primary: true,
// children: [
// for (var i = 0; i < 1000; i++)
// ListTile(
// title: Text('Test $i'),
// leading: Text('$_counter'),
// ),
// ],
// ),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
class CustomAppBarShape extends ContinuousRectangleBorder {
@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;
}
}
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
[✓] Flutter (Channel master, 3.21.0-17.0.pre.19, on macOS 14.3.1 23D60 darwin-arm64, locale en-GB)
• Flutter version 3.21.0-17.0.pre.19 on channel master at /Users/kristijanzic/Library/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 11d632e5dd (40 minutes ago), 2024-03-28 19:21:34 -0400
• Engine revision b917b24836
• Dart version 3.4.0 (build 3.4.0-282.0.dev)
• DevTools version 2.34.1
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
• Android SDK at /Users/kristijanzic/Library/Android/sdk
• Platform android-34, build-tools 33.0.1
• 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.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15E204a
• 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
• Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
[✓] IntelliJ IDEA Community Edition (version 2023.1)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• 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
[✓] VS Code (version 1.87.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.84.0
[✓] Connected device (4 available)
• iPhone 15 Pro (mobile) • 6C492229-B053-4C1A-ADE2-785A83F06908 • ios •
com.apple.CoreSimulator.SimRuntime.iOS-17-4 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 14.3.1 23D60
darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.3.1 23D60
darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 122.0.6261.57
[✓] Network resources
• All expected network resources are available.
• No issues found!Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listIssues with https://api.flutter.dev/Sample code and demosflutter/packages/flutter/material repository.Viewports, list views, slivers, etc.Found to occur in 3.19Found to occur in 3.21flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onIssue is closed as already fixed in a newer versionOwned by Design Languages teamTriaged by Design Languages team
Type
Projects
Status