Long FlexibleSpaceBar.title doesn't respect the leading widget #132030
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
Take a look at the FlexibleAppBar in this picture, it's title is too big, and it covers the back arrow, and ignores the app's safe area.
Expected results
IMO the title of the FlexibleSpaceBar should not occupy the space of the leading back arrow or the trailing actions. As it is, unfortunately, it can't be used reliably for large text, and we are forced to create our own custom solution.
Actual results
As you can see, a large title on the FlexibleSpaceBar will not only not respect the SafeArea, but also will not respect the area of the back arrow.
Code sample
Code sample
```dart
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
theme: ThemeData.dark(useMaterial3: true),
home: const FlexibleSpaceBarExampleApp(),
),
);
}
class FlexibleSpaceBarExampleApp extends StatelessWidget {
const FlexibleSpaceBarExampleApp({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics()),
slivers: <Widget>[
const SliverAppBar(
expandedHeight: 120,
pinned: true,
stretch: true,
flexibleSpace: FlexibleSpaceBar(
title: Text(
'ajshdf ajkshdfkjahsdkf hasklhf laksjhfk aajshdf ajkshdfkjahsdkf hasklhf laksjhfk aajshdf ajkshdfkjahsdkf hasklhf laksjhfk aajshdf ajkshdfkjahsdkf hasklhf laksjhfk a'),
),
),
SliverList(
delegate: SliverChildListDelegate(
<Widget>[
const ListTile(
leading: Icon(Icons.wb_sunny),
title: Text('Sunday'),
subtitle: Text('sunny, h: 80, l: 65'),
),
const ListTile(
leading: Icon(Icons.wb_sunny),
title: Text('Monday'),
subtitle: Text('sunny, h: 80, l: 65'),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => const SecondPage()));
},
child: const Text('Navigate'),
),
],
),
),
],
),
);
}
}
class SecondPage extends StatelessWidget {
const SecondPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics()),
slivers: <Widget>[
const SliverAppBar(
expandedHeight: 120,
pinned: true,
stretch: true,
flexibleSpace: FlexibleSpaceBar(
title: Text(
'ajshdf ajkshdfkjahsdkf hasklhf laksjhfk aajshdf ajkshdfkjahsdkf hasklhf laksjhfk aajshdf ajkshdfkjahsdkf hasklhf laksjhfk aajshdf ajkshdfkjahsdkf hasklhf laksjhfk a'),
),
),
SliverList(
delegate: SliverChildListDelegate(
<Widget>[
const ListTile(
leading: Icon(Icons.wb_sunny),
title: Text('Sunday'),
subtitle: Text('sunny, h: 80, l: 65'),
),
const ListTile(
leading: Icon(Icons.wb_sunny),
title: Text('Monday'),
subtitle: Text('sunny, h: 80, l: 65'),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => const SecondPage()));
},
child: const Text('Navigate'),
),
],
),
),
],
),
);
}
}
</details>
### Logs
<details><summary>Logs</summary>
```console
[Paste your logs here]
Flutter Doctor output
Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.6, on macOS 13.4.1 22F770820d darwin-arm64, locale en-AU)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] VS Code (version 1.81.0)
[✓] Connected device (3 available)
[✓] Network resources
• No issues found!Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listflutter/packages/flutter/material repository.Found to occur in 3.10Found to occur in 3.13flutter/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