Skip to content

SliverAppBar.medium & SliverAppBar.large have fixed padding when leading widget isn't provided #120603

@TahaTesser

Description

@TahaTesser

Both SliverAppBar.medium & SliverAppBar.large have fixed padding in the collapsed state even when the leading widget isn't provided and this is also not removed when overriding the leadingWidth parameter.

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true),
      home: const SliverAppBarExample(),
    );
  }
}

class SliverAppBarExample extends StatefulWidget {
  const SliverAppBarExample({super.key});

  @override
  State<SliverAppBarExample> createState() => _SliverAppBarExampleState();
}

class _SliverAppBarExampleState extends State<SliverAppBarExample> {
  bool hideLeading = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            leading: hideLeading
                ? IconButton(
                    icon: const Icon(Icons.menu),
                    onPressed: () {},
                  )
                : null,
            // leadingWidth: 0,
            title: const Text('Sliver App Bar'),
            centerTitle: false,
            pinned: true,
            actions: <Widget>[
              IconButton(icon: const Icon(Icons.favorite), onPressed: () {}),
              IconButton(icon: const Icon(Icons.favorite), onPressed: () {}),
            ],
          ),
          SliverAppBar.medium(
            leading: hideLeading
                ? IconButton(
                    icon: const Icon(Icons.menu),
                    onPressed: () {},
                  )
                : null,
            // leadingWidth: 0,
            title: const Text('Medium App Bar'),
            centerTitle: false,
            actions: <Widget>[
              IconButton(icon: const Icon(Icons.favorite), onPressed: () {}),
              IconButton(icon: const Icon(Icons.favorite), onPressed: () {}),
            ],
          ),
          SliverAppBar.large(
            leading: hideLeading
                ? IconButton(
                    icon: const Icon(Icons.menu),
                    onPressed: () {},
                  )
                : null,
            automaticallyImplyLeading: false,
            // leadingWidth: 0,
            title: const Text('Large App Bar'),
            centerTitle: false,
            actions: <Widget>[
              IconButton(icon: const Icon(Icons.favorite), onPressed: () {}),
              IconButton(icon: const Icon(Icons.favorite), onPressed: () {}),
            ],
          ),
          const SliverFillRemaining(
            child: Center(
              child: Text(
                'Scroll down to collapse the app bar',
              ),
            ),
          )
        ],
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          setState(() {
            hideLeading = !hideLeading;
          });
        },
        label: const Text('Toggle leading'),
      ),
    );
  }
}
Expected results
With a leading widget Without a leading widget

Actual results

Without a leading widget Inspector

Metadata

Metadata

Assignees

Labels

f: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions