github/flutter
7
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2025-06-03 00:51:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix transparent dividerColor breaks TabBar.tabAlignment (#150350)

Browse Source 
fixes [`TabBar.tabAlignment` property does't work when `dividerColor` is transparent](https://github.com/flutter/flutter/issues/150316)

### Code sample

<details>
<summary>expand to view the code sample</summary> 

```dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('TabBar'),
            bottom: const TabBar(
              dividerColor: Colors.transparent,
              tabAlignment: TabAlignment.start,
              isScrollable: true,
              tabs: <Widget>[
                Tab(text: 'TAB 1'),
                Tab(text: 'TAB 2'),
              ],
            ),
          ),
          body: const TabBarView(
            children: <Widget>[
              SizedBox.expand(),
              SizedBox.expand(),
            ],
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {},
            child: const Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}
```

</details>

### Before (`dividerColor: Colors.transparent`, `tabAlignment: TabAlignment.start`)

![Screenshot 2024-06-17 at 15 44 33](https://github.com/flutter/flutter/assets/48603081/a60e88c7-fd99-4444-b7e5-1bceacc22f4c)

### After (`dividerColor: Colors.transparent`, `tabAlignment: TabAlignment.start`)

![Screenshot 2024-06-17 at 15 44 55](https://github.com/flutter/flutter/assets/48603081/aa003d65-107f-4618-be29-095ab2660374)
This commit is contained in:
Taha Tesser 2024-06-18 15:05:05 +03:00 committed by GitHub
parent a9f554ac39
commit 33599006e7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 54 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/flutter/lib/src/material/tabs.dart
View File

@ -1025,6 +1025,8 @@ class TabBar extends StatefulWidget implements PreferredSizeWidget {
/// The color of the divider.
///
/// If the [dividerColor] is [Colors.transparent], then the divider will not be drawn.
///
/// If null and [ThemeData.useMaterial3] is false, [TabBarTheme.dividerColor]
/// color is used. If that is null and [ThemeData.useMaterial3] is true,
/// [ColorScheme.outlineVariant] will be used, otherwise divider will not be drawn.
@ -1032,6 +1034,8 @@ class TabBar extends StatefulWidget implements PreferredSizeWidget {
/// The height of the divider.
///
/// If the [dividerHeight] is zero or negative, then the divider will not be drawn.
///
/// If null and [ThemeData.useMaterial3] is true, [TabBarTheme.dividerHeight] is used.
/// If that is also null and [ThemeData.useMaterial3] is true, 1.0 will be used.
/// Otherwise divider will not be drawn.
@ -1813,19 +1817,18 @@ class _TabBarState extends State<TabBar> {
final Color dividerColor = widget.dividerColor ?? tabBarTheme.dividerColor ?? _defaults.dividerColor!;
final double dividerHeight = widget.dividerHeight ?? tabBarTheme.dividerHeight ?? _defaults.dividerHeight!;
final bool showDivider = dividerColor != Colors.transparent && dividerHeight > 0;
tabBar = Align(
heightFactor: 1.0,
widthFactor: showDivider ? null : 1.0,
widthFactor: dividerHeight > 0 ? null : 1.0,
alignment: effectiveAlignment,
child: tabBar,
);
if (showDivider) {
if (dividerColor != Colors.transparent && dividerHeight > 0) {
tabBar = CustomPaint(
painter: _DividerPainter(
dividerColor: widget.dividerColor ?? tabBarTheme.dividerColor ?? _defaults.dividerColor!,
dividerColor: dividerColor,
dividerHeight: widget.dividerHeight ?? tabBarTheme.dividerHeight ?? _defaults.dividerHeight!,
),
child: tabBar,

71
packages/flutter/test/material/tabs_test.dart
View File

@ -6722,30 +6722,6 @@ void main() {
tabAlignment: TabAlignment.center,
));
expect(tester.getSize(find.byType(TabBar)).width, 307.5);
// Test default tab bar width when the divider color is set to transparent
// and tabAlignment is set to startOffset.
await tester.pumpWidget(buildTabBar(
dividerColor: Colors.transparent,
tabAlignment: TabAlignment.startOffset,
));
expect(tester.getSize(find.byType(TabBar)).width, 359.5);
// Test default tab bar width when the divider color is set to transparent
// and tabAlignment is set to start.
await tester.pumpWidget(buildTabBar(
dividerColor: Colors.transparent,
tabAlignment: TabAlignment.start,
));
expect(tester.getSize(find.byType(TabBar)).width, 307.5);
// Test default tab bar width when the divider color is set to transparent
// and tabAlignment is set to center.
await tester.pumpWidget(buildTabBar(
dividerColor: Colors.transparent,
tabAlignment: TabAlignment.center,
));
expect(tester.getSize(find.byType(TabBar)).width, 307.5);
});
group('Material 2', () {
@ -7250,4 +7226,51 @@ void main() {
expect(find.text('Page 3'), findsOneWidget);
expect(scrollable.controller!.position.pixels, equals(0.0));
});
// This is a regression test for https://github.com/flutter/flutter/issues/150316.
testWidgets('Scrollable TabBar wuth transparent divider expands to full width', (WidgetTester tester) async {
Widget buildTabBar({ Color? dividerColor, TabAlignment? tabAlignment }) {
return boilerplate(
child: Center(
child: DefaultTabController(
length: 3,
child: TabBar(
dividerColor: dividerColor,
tabAlignment: tabAlignment,
isScrollable: true,
tabs: const <Widget>[
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
),
),
),
);
}
// Test default tab bar width when the divider color is set to transparent
// and tabAlignment is set to startOffset.
await tester.pumpWidget(buildTabBar(
dividerColor: Colors.transparent,
tabAlignment: TabAlignment.startOffset,
));
expect(tester.getSize(find.byType(TabBar)).width, 800.0);
// Test default tab bar width when the divider color is set to transparent
// and tabAlignment is set to start.
await tester.pumpWidget(buildTabBar(
dividerColor: Colors.transparent,
tabAlignment: TabAlignment.start,
));
expect(tester.getSize(find.byType(TabBar)).width, 800.0);
// Test default tab bar width when the divider color is set to transparent
// and tabAlignment is set to center.
await tester.pumpWidget(buildTabBar(
dividerColor: Colors.transparent,
tabAlignment: TabAlignment.center,
));
expect(tester.getSize(find.byType(TabBar)).width, 800.0);
});
}