Material 3 TabBar does not take full width when isScrollable: true #117722
Description
Steps to Reproduce
- Execute
flutter runon the code sample
Expected results:
The bottom divider of the TabBar taking the full width available
Actual results:
The TabBar taking minimum possible width.
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatefulWidget {
const MainApp({super.key});
@override
State<MainApp> createState() => _MainAppState();
}
class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
late TabController controller;
final tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
@override
void initState() {
super.initState();
controller = TabController(length: 3, vsync: this);
}
@override
void dispose() {
super.dispose();
controller.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
useMaterial3: true,
),
home: Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: controller,
tabs: tabs.map((name) => Tab(text: name)).toList(),
isScrollable: true,
),
),
body: TabBarView(
controller: controller,
children: tabs.map((name) => Center(child: Text(name))).toList(),
),
),
);
}
}
Logs
No issues found! (ran in 5.3s)
[✓] Flutter (Channel beta, 3.7.0-1.2.pre, on Microsoft Windows [Version 10.0.19043.2075], locale en-US)
• Flutter version 3.7.0-1.2.pre on channel beta at C:\src\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision c29b09b878 (8 days ago), 2022-12-19 18:30:12 -0600
• Engine revision 8c99b0feaf
• Dart version 2.19.0 (build 2.19.0-444.2.beta)
• DevTools version 2.20.0
[✓] Windows Version (Installed version of Windows is version 10 or higher)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
• Android SDK at C:\Users\mohamed.haisham\AppData\Local\Android\sdk
• Platform android-33, build-tools 33.0.1
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[✓] Visual Studio - develop for Windows (Visual Studio Community 2022 17.3.5)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.3.32922.545
• Windows 10 SDK version 10.0.19041.0
[✓] Android Studio (version 2021.3)
• Android Studio at C:\Program Files\Android\Android Studio
• 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 11.0.13+0-b1751.21-8125866)
[✓] VS Code (version 1.74.2)
• VS Code at C:\Users\mohamed.haisham\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.56.0
[✓] Connected device (4 available)
• sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64 • Android 13 (API 33) (emulator)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19043.2075]
• Chrome (web) • chrome • web-javascript • Google Chrome 108.0.5359.125
• Edge (web) • edge • web-javascript • Microsoft Edge 108.0.1462.54
[✓] HTTP Host Availability
• All required HTTP hosts are available
Metadata
Metadata
Assignees
Labels
High-priority issues at the top of the work listflutter/packages/flutter/material repository.Found to occur in 3.7flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onIssue is closed as already fixed in a newer versionOwned by Design Languages teamTriaged by Design Languages team
Type
Projects
Status