-
Notifications
You must be signed in to change notification settings - Fork 29.8k
Closed as not planned
Closed as not planned
Copy link
Labels
f: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.found in release: 3.3Found to occur in 3.3Found to occur in 3.3found in release: 3.5Found to occur in 3.5Found to occur in 3.5frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
Description
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
- create a simple tabbar with defaultTabController and TabBarView.
- give some asymmetrical paddings to the labels of tabbar using labelPadding property.
- notice that the indicator's alignment is not proper.

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!
moehmeni
Metadata
Metadata
Assignees
Labels
f: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.found in release: 3.3Found to occur in 3.3Found to occur in 3.3found in release: 3.5Found to occur in 3.5Found to occur in 3.5frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
Type
Projects
Status
Issue closed with comment