Skip to content

TabBar indicator's alignment is not proper when there is a label padding applied to the labels #63700

@vaibhav891

Description

@vaibhav891

When we provide some padding to the TabBar labels, the tabbar indicators alignment is disturbed and is not properly aligned with labels.

Steps to Reproduce

  1. create a simple tabbar with defaultTabController and TabBarView.
  2. give some asymmetrical paddings to the labels of tabbar using labelPadding property.
  3. notice that the indicator's alignment is not proper.
    Simulator Screen Shot - iPhone 11 - 2020-08-14 at 01 22 07

sample code:-

`class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        backgroundColor: Colors.amber,
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TabBar(
              indicatorWeight: 4.0,
              labelStyle: TextStyle(fontSize: 20),
              labelPadding: EdgeInsets.only(right: 32),
              indicatorSize: TabBarIndicatorSize.label,
              isScrollable: true,
              tabs: [
                Text('TabBar1'),
                Text('TabBar2'),
                Text('TabBar3'),
                Text('TabBar4'),
              ],
            ),
            Container(
              height: 400,
              child: TabBarView(
                children: [
                  Container(
                    child: Icon(
                      Icons.person,
                      size: 40,
                    ),
                  ),
                  Container(
                    child: Icon(
                      Icons.card_giftcard,
                      size: 40,
                    ),
                  ),
                  Container(
                    child: Icon(
                      Icons.add_alert,
                      size: 40,
                    ),
                  ),
                  Container(
                    child: Icon(
                      Icons.zoom_out_map,
                      size: 40,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
`

Expected results:
tabbar indicator should be properly aligned to the label

Actual results:
tabbar indicator is not properly aligned to the label

Flutter doctor -v output

[✓] Flutter (Channel stable, 1.20.1, on Mac OS X 10.15.5 19F101, locale en-IN)
    • Flutter version 1.20.1 at /Users/vaibhav/Documents/flutter
    • Framework revision 2ae34518b8 (8 days ago), 2020-08-05 19:53:19 -0700
    • Engine revision c8e3b94853
    • Dart version 2.9.0

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/vaibhav/Library/Android/sdk
    • Platform android-30, build-tools 30.0.1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.3

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (1 available)
    • iPhone 11 (mobile) • 8F609EB6-6129-4CF3-82AD-6381BAF858D4 • ios •
      com.apple.CoreSimulator.SimRuntime.iOS-13-6 (simulator)

• No issues found!

Metadata

Metadata

Assignees

Labels

f: material designflutter/packages/flutter/material repository.found in release: 3.3Found to occur in 3.3found in release: 3.5Found to occur in 3.5frameworkflutter/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

Issue closed with comment

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions