Taha Tesser
2c71881f50
Fix Scrollable TabBar for Material 3 ( #131409 )
...
fixes [Material 3 `TabBar` does not take full width when `isScrollable: true`](https://github.com/flutter/flutter/issues/117722 )
### Description
1. Fixed the divider doesn't stretch to take all the available width in the scrollable tab bar in M3
2. Added `dividerHeight` property.
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
/// Flutter code sample for [TabBar].
void main() => runApp(const TabBarApp());
class TabBarApp extends StatelessWidget {
const TabBarApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: TabBarExample(),
);
}
}
class TabBarExample extends StatefulWidget {
const TabBarExample({super.key});
@override
State<TabBarExample> createState() => _TabBarExampleState();
}
class _TabBarExampleState extends State<TabBarExample> {
bool rtl = false;
bool customColors = false;
bool removeDivider = false;
Color dividerColor = Colors.amber;
Color indicatorColor = Colors.red;
@override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 1,
length: 3,
child: Directionality(
textDirection: rtl ? TextDirection.rtl : TextDirection.ltr,
child: Scaffold(
appBar: AppBar(
title: const Text('TabBar Sample'),
actions: <Widget>[
IconButton.filledTonal(
tooltip: 'Switch direction',
icon: const Icon(Icons.swap_horiz),
onPressed: () {
setState(() {
rtl = !rtl;
});
},
),
IconButton.filledTonal(
tooltip: 'Use custom colors',
icon: const Icon(Icons.color_lens),
onPressed: () {
setState(() {
customColors = !customColors;
});
},
),
IconButton.filledTonal(
tooltip: 'Show/hide divider',
icon: const Icon(Icons.remove_rounded),
onPressed: () {
setState(() {
removeDivider = !removeDivider;
});
},
),
],
),
body: Column(
children: <Widget>[
const Spacer(),
const Text('Scrollable - TabAlignment.start'),
TabBar(
isScrollable: true,
tabAlignment: TabAlignment.start,
dividerColor: customColors ? dividerColor : null,
indicatorColor: customColors ? indicatorColor : null,
dividerHeight: removeDivider ? 0 : null,
tabs: const <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
const Text('Scrollable - TabAlignment.startOffset'),
TabBar(
isScrollable: true,
tabAlignment: TabAlignment.startOffset,
dividerColor: customColors ? dividerColor : null,
indicatorColor: customColors ? indicatorColor : null,
dividerHeight: removeDivider ? 0 : null,
tabs: const <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
const Text('Scrollable - TabAlignment.center'),
TabBar(
isScrollable: true,
tabAlignment: TabAlignment.center,
dividerColor: customColors ? dividerColor : null,
indicatorColor: customColors ? indicatorColor : null,
dividerHeight: removeDivider ? 0 : null,
tabs: const <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
const Spacer(),
const Text('Non-scrollable - TabAlignment.fill'),
TabBar(
tabAlignment: TabAlignment.fill,
dividerColor: customColors ? dividerColor : null,
indicatorColor: customColors ? indicatorColor : null,
dividerHeight: removeDivider ? 0 : null,
tabs: const <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
const Text('Non-scrollable - TabAlignment.center'),
TabBar(
tabAlignment: TabAlignment.center,
dividerColor: customColors ? dividerColor : null,
indicatorColor: customColors ? indicatorColor : null,
dividerHeight: removeDivider ? 0 : null,
tabs: const <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
const Spacer(),
const Text('Secondary - TabAlignment.fill'),
TabBar.secondary(
tabAlignment: TabAlignment.fill,
dividerColor: customColors ? dividerColor : null,
indicatorColor: customColors ? indicatorColor : null,
dividerHeight: removeDivider ? 0 : null,
tabs: const <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
const Text('Secondary - TabAlignment.center'),
TabBar.secondary(
tabAlignment: TabAlignment.center,
dividerColor: customColors ? dividerColor : null,
indicatorColor: customColors ? indicatorColor : null,
dividerHeight: removeDivider ? 0 : null,
tabs: const <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
const Spacer(),
],
),
),
),
);
}
}
```
</details>
### Before
### After
This also contains regression test for https://github.com/flutter/flutter/pull/125974#discussion_r1239089151
```dart
// This is a regression test for https://github.com/flutter/flutter/pull/125974#discussion_r1239089151 .
testWidgets('Divider can be constrained', (WidgetTester tester) async {
```
2023-08-02 00:48:06 +00:00
Taha Tesser
32fde139bc
Fix Material 3 Scrollable TabBar ( #125974 )
...
fix https://github.com/flutter/flutter/issues/117722
### Description
1. Fix the divider doesn't stretch to take all the available width in the scrollable tab bar in M3
2. Add `dividerHeight` property.
3. Update the default tab alignment for the scrollable tab bar to match the specs (this is backward compatible for M2 with the new `tabAlignment` property).
### Bug (default tab alignment)
### Fix (default tab alignment)
### Code sample
<details>
<summary>code sample</summary>
```dart
import 'package:flutter/material.dart';
/// Flutter code sample for [TabBar].
void main() => runApp(const TabBarApp());
class TabBarApp extends StatelessWidget {
const TabBarApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
// tabBarTheme: const TabBarTheme(tabAlignment: TabAlignment.start),
useMaterial3: true,
),
home: const TabBarExample(),
);
}
}
class TabBarExample extends StatefulWidget {
const TabBarExample({super.key});
@override
State<TabBarExample> createState() => _TabBarExampleState();
}
class _TabBarExampleState extends State<TabBarExample> {
bool rtl = false;
@override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 1,
length: 3,
child: Directionality(
textDirection: rtl ? TextDirection.rtl : TextDirection.ltr,
child: Scaffold(
appBar: AppBar(
title: const Text('TabBar Sample'),
),
body: const Column(
children: <Widget>[
Text('Scrollable-TabAlignment.start'),
TabBar(
isScrollable: true,
tabAlignment: TabAlignment.start,
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
Text('Scrollable-TabAlignment.startOffset'),
TabBar(
isScrollable: true,
tabAlignment: TabAlignment.startOffset,
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
Text('Scrollable-TabAlignment.center'),
TabBar(
isScrollable: true,
tabAlignment: TabAlignment.center,
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
Spacer(),
Text('Non-scrollable-TabAlignment.fill'),
TabBar(
tabAlignment: TabAlignment.fill,
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
Text('Non-scrollable-TabAlignment.center'),
TabBar(
tabAlignment: TabAlignment.center,
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
Spacer(),
],
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
setState(() {
rtl = !rtl;
});
},
label: const Text('Switch Direction'),
icon: const Icon(Icons.swap_horiz),
),
),
),
);
}
}
```
</details>
2023-06-22 17:30:46 +00:00
