Skip to content

FlexibleSpaceBar title is misaligned without the leading widget #138608

@TahaTesser

Description

@TahaTesser

Is there an existing issue for this?

Steps to reproduce

#132573 fixed an issue where title doesn't account for leading widget, similar to AppBar title. However, SliverAppBar doesn't check for the actual leading widget, wether it's a provided leading widget, drawer icon, close button. etc.

Currently, SliverAppBar simply checks if leading is not null or automaticallyImplyLeading is true. This doesn't necessarily mean there will be a widget.

hasLeading: leading != null || automaticallyImplyLeading,

We need to have similar checks as AppBar for SliverAppBar widget so FlexibleSpaceBar correctly aligns the title.

To reproduce the issue run the code sample below and compare the alignment with window title.

I've found this bug while fixing #138296

Expected results

This is how it should be like after this issue and #138296 are fixed.

Screenshot 2023-11-17 at 12 23 34

Actual results

Title color issue is tracked in #138296

Screenshot 2023-11-17 at 12 23 19

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 const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Example(),
    );
  }
}

class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
          child: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            flexibleSpace: FlexibleSpaceBar(
              title: ColoredBox(
                color: Color(0xff00ff00),
                child: Text('SliverAppBar'),
              ),
            ),
          ),
        ],
      )),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
[✓] Flutter (Channel master, 3.17.0-10.0.pre.42, on macOS 14.1.1 23B81 darwin-arm64, locale en-US)
    • Flutter version 3.17.0-10.0.pre.42 on channel master at /Users/tahatesser/Code/flutter
    • Upstream repository [email protected]:TahaTesser/flutter.git
    • FLUTTER_GIT_URL = [email protected]:TahaTesser/flutter.git
    • Framework revision e9de448420 (9 hours ago), 2023-11-17 02:08:13 +0100
    • Engine revision 5064aeff00
    • Dart version 3.3.0 (build 3.3.0-143.0.dev)
    • DevTools version 2.30.0-dev.4

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/tahatesser/Code/android-sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_SDK_ROOT = /Users/tahatesser/Code/android-sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.1)
    • Xcode at /Applications/Xcode-15.1.0-Beta.3.app/Contents/Developer
    • Build 15C5059c
    • CocoaPods version 1.13.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.3)
    • 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.6+0-17.0.6b829.9-10027231)

[✓] VS Code (version 1.84.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.76.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 14.1.1 23B81 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 119.0.6045.159

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listc: regressionIt was better in the past than it is nowf: material designflutter/packages/flutter/material repository.found in release: 3.13Found to occur in 3.13found in release: 3.16Found to occur in 3.16frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions