TabBar tabs hover effect isn't clipping to container #141269
Description
Steps to reproduce
1: Create a Scaffold which contains a Row with a SizedBox(width: 100) and an Expanded TabBar which has isScrollable: true, and enough tabs to scroll, as the children
2: Scroll so the one of the tabs is half visible
3: Hover the mouse over the tab
Expected results
The Hover effect is clipped to the containing area
Actual results
The hover effect is still visible outside of the containing area.
Code sample
Code sample
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.max,
children: [
const SizedBox(width: 200),
Expanded(
child: DefaultTabController(
length: 20,
child: TabBar(
isScrollable: true,
tabs: List.generate(
20,
(index) => Tab(text: 'Tab Index $index'),
).toList(),
tabAlignment: TabAlignment.start,
),
),
),
],
);
}
}
Screenshots or Video
Screenshots / Video demonstration
Flutter Doctor output
Doctor output
[√] Flutter (Channel stable, 3.16.5, on Microsoft Windows [Version 10.0.22621.2861], locale en-GB)
• Flutter version 3.16.5 on channel stable at C:\tools\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 78666c8dc5 (3 weeks ago), 2023-12-19 16:14:14 -0800
• Engine revision 3f3e560236
• Dart version 3.2.3
• DevTools version 2.28.4
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at C:\Users\lpick\AppData\Local\Android\sdk
• Platform android-34, build-tools 34.0.0
• Java binary at:
C:\Users\lpick\AppData\Local\JetBrains\Toolbox\apps\AndroidStudio\ch-0\223.8836.35.2231.10406996\jbr\
bin\java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)
• All Android licenses accepted.
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[√] Visual Studio - develop Windows apps (Visual Studio Community 2019 16.11.17)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
• Visual Studio Community 2019 version 16.11.32630.194
• Windows 10 SDK version 10.0.19041.0
[√] Android Studio (version 2022.2)
• Android Studio at
C:\Users\lpick\AppData\Local\JetBrains\Toolbox\apps\AndroidStudio\ch-0\222.4459.24.2221.10121639
• Flutter plugin version 75.0.1
• Dart plugin version 222.4582
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)
[√] Android Studio (version 2022.3)
• Android Studio at
C:\Users\lpick\AppData\Local\JetBrains\Toolbox\apps\AndroidStudio\ch-0\223.8836.35.2231.10406996
• Flutter plugin version 76.3.2
• Dart plugin version 223.8977
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)
[√] VS Code (version 1.85.1)
• VS Code at C:\Users\lpick\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.80.0
[√] Connected device (2 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22621.2861]
• Edge (web) • edge • web-javascript • Microsoft Edge 120.0.2210.121
[√] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listflutter/packages/flutter/material repository.Viewports, list views, slivers, etc.Found to occur in 3.16Found to occur in 3.19flutter/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 teamThere is a workaround available to overcome the issue
Type
Projects
Status