TabBar.height adds a gap between the AppBar.toolbar and AppBar.bottom

Use case

If we add a smaller height to TabBar, E.G:

AppBar(
  bottom: const TabBar(
    tabs: [
      Tab(
        text: 'Profile',
        height: 30,
      ),
      Tab(
        text: 'Appearance',
        height: 30,
      ),
    ],
  ),

It adds a gap between the `AppBar` `toolbar` and the `bottom`:

And without the height specified on the Tab, it has no gap:

I don't want the gap. So i want this:

Proposal

Ideally we should be able to control the padding between them but i found just adding mainAxisSize: MainAxisSize.min, below to app_bar.dart at least removed the gap entirely which is better than mandatory gap:

if (widget.bottom != null) {
  appBar = Column(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Flexible(
        child: ConstrainedBox(
          constraints: BoxConstraints(maxHeight: toolbarHeight),
          child: appBar,
        ),
      ),
      if (widget.bottomOpacity == 1.0)
        widget.bottom!
      else
        Opacity(
          opacity: const Interval(0.25, 1.0, curve: Curves.fastOutSlowIn).transform(widget.bottomOpacity),
          child: widget.bottom,
        ),
    ],
  );

Adding this between them gave the padding desired: SizedBox(height: 5), so ideally you would add bottomSpacer as a parameter to customise: SizedBox(height: bottomSpacer), or make it EdgeInsets and wrap the bottom with it.

@Piinks

@Piinks

This is by design. When the tabs height is less than the default _kTabHeight then it defaults to the value of _kTabHeight (46 pixels)

flutter/packages/flutter/lib/src/material/tabs.dart

Lines 1290 to 1298 in 71ddc68

    
             @override 
        
             Size get preferredSize { 
        
               double maxHeight = _kTabHeight; 
        
               for (final Widget item in tabs) { 
        
                 if (item is PreferredSizeWidget) { 
        
                   final double itemHeight = item.preferredSize.height; 
        
                   maxHeight = math.max(itemHeight, maxHeight); 
        
                 } 
        
               }

If we want to change this behavior, to avoid breaking change we would need to some sort of parameter.

Ah right, thanks for taking a look. Should we add to the docs that TabBars cannot be less than 46 pixels in height?

Ah right, thanks for taking a look. Should we add to the docs that TabBars cannot be less than 46 pixels in height?

+1 and I remember folks using PreferredSize for a custom tab bar. It can be leveraged to get a smaller than default tab bar.

            bottom: const PreferredSize(
              preferredSize: Size.fromHeight(20),
              child: TabBar(
                tabs: [
                  Tab(
                    text: 'Profile',
                    height: 20,
                  ),
                  Tab(
                    text: 'Appearance',
                    height: 20,
                  ),
                ],
              ),
            ),

Update `Tab.height` parameter doc for tab height lower than default (#…

Update `Tab.height` parameter doc for tab height lower than default (f…

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 flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

TabBar.height adds a gap between the AppBar.toolbar and AppBar.bottom #156200

Use case

Proposal

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	@override
	Size get preferredSize {
	double maxHeight = _kTabHeight;
	for (final Widget item in tabs) {
	if (item is PreferredSizeWidget) {
	final double itemHeight = item.preferredSize.height;
	maxHeight = math.max(itemHeight, maxHeight);
	}
	}

TabBar.height adds a gap between the AppBar.toolbar and AppBar.bottom #156200

Description

Use case

Proposal

Activity

TahaTesser commented on Oct 22, 2024

Piinks commented on Oct 22, 2024

TahaTesser commented on Oct 22, 2024

github-actions commented on Nov 7, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions