Skip to content

F
Front-End
Unverified Commit 32fde139 authored by Taha Tesser's avatar Taha Tesser Committed by GitHub
Browse files
Options

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)

![Screenshot 2023-05-05 at 19 04 40](https://user-images.githubusercontent.com/48603081/236509483-1d03af21-a764-4776-acef-2126560f0d51.png)

### Fix (default tab alignment)

![Screenshot 2023-05-05 at 19 04 15](https://user-images.githubusercontent.com/48603081/236509513-2426d456-c54f-42bd-9545-a14dc6ee7e69.png)

### 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>

![Screenshot 2023-06-06 at 18 06 12](https://github.com/flutter/flutter/assets/48603081/5ee5386d-cc64-4025-a020-ed2222cb6031)
parent 0da8012c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 624 additions and 43 deletions
dev/tools/gen_defaults/generated/used_tokens.csv
View file @ 32fde139
......@@ -529,6 +529,7 @@ md.comp.primary-navigation-tab.active.hover.state-layer.opacity,
md.comp.primary-navigation-tab.active.pressed.state-layer.color,
md.comp.primary-navigation-tab.active.pressed.state-layer.opacity,
md.comp.primary-navigation-tab.divider.color,
md.comp.primary-navigation-tab.divider.height,
md.comp.primary-navigation-tab.inactive.focus.state-layer.color,
md.comp.primary-navigation-tab.inactive.focus.state-layer.opacity,
md.comp.primary-navigation-tab.inactive.hover.state-layer.color,
......@@ -588,6 +589,7 @@ md.comp.search-view.header.supporting-text.color,
md.comp.search-view.header.supporting-text.text-style,
md.comp.secondary-navigation-tab.active.label-text.color,
md.comp.secondary-navigation-tab.divider.color,
md.comp.secondary-navigation-tab.divider.height,
md.comp.secondary-navigation-tab.focus.state-layer.color,
md.comp.secondary-navigation-tab.focus.state-layer.opacity,
md.comp.secondary-navigation-tab.hover.state-layer.color,
......
dev/tools/gen_defaults/lib/tabs_template.dart
View file @ 32fde139
......@@ -24,6 +24,9 @@ class _${blockName}PrimaryDefaultsM3 extends TabBarTheme {
@override
Color? get dividerColor => ${componentColor("md.comp.primary-navigation-tab.divider")};
@override
double? get dividerHeight => ${getToken('md.comp.primary-navigation-tab.divider.height')};
@override
Color? get indicatorColor => ${componentColor("md.comp.primary-navigation-tab.active-indicator")};
......@@ -71,7 +74,7 @@ class _${blockName}PrimaryDefaultsM3 extends TabBarTheme {
InteractiveInkFeatureFactory? get splashFactory => Theme.of(context).splashFactory;
@override
TabAlignment? get tabAlignment => isScrollable ? TabAlignment.start : TabAlignment.fill;
TabAlignment? get tabAlignment => isScrollable ? TabAlignment.startOffset : TabAlignment.fill;
static double indicatorWeight = ${getToken('md.comp.primary-navigation-tab.active-indicator.height')};
}
......@@ -88,6 +91,9 @@ class _${blockName}SecondaryDefaultsM3 extends TabBarTheme {
@override
Color? get dividerColor => ${componentColor("md.comp.secondary-navigation-tab.divider")};
@override
double? get dividerHeight => ${getToken('md.comp.secondary-navigation-tab.divider.height')};
@override
Color? get indicatorColor => ${componentColor("md.comp.primary-navigation-tab.active-indicator")};
......@@ -135,7 +141,7 @@ class _${blockName}SecondaryDefaultsM3 extends TabBarTheme {
InteractiveInkFeatureFactory? get splashFactory => Theme.of(context).splashFactory;
@override
TabAlignment? get tabAlignment => isScrollable ? TabAlignment.start : TabAlignment.fill;
TabAlignment? get tabAlignment => isScrollable ? TabAlignment.startOffset : TabAlignment.fill;
}
''';
......
packages/flutter/lib/src/material/tab_bar_theme.dart
View file @ 32fde139
......@@ -32,6 +32,7 @@ class TabBarTheme with Diagnosticable {
this.indicatorColor,
this.indicatorSize,
this.dividerColor,
this.dividerHeight,
this.labelColor,
this.labelPadding,
this.labelStyle,
......@@ -55,6 +56,9 @@ class TabBarTheme with Diagnosticable {
/// Overrides the default value for [TabBar.dividerColor].
final Color? dividerColor;
/// Overrides the default value for [TabBar.dividerHeight].
final double? dividerHeight;
/// Overrides the default value for [TabBar.labelColor].
///
/// If [labelColor] is a [MaterialStateColor], then the effective color will
......@@ -101,6 +105,7 @@ class TabBarTheme with Diagnosticable {
Color? indicatorColor,
TabBarIndicatorSize? indicatorSize,
Color? dividerColor,
double? dividerHeight,
Color? labelColor,
EdgeInsetsGeometry? labelPadding,
TextStyle? labelStyle,
......@@ -116,6 +121,7 @@ class TabBarTheme with Diagnosticable {
indicatorColor: indicatorColor ?? this.indicatorColor,
indicatorSize: indicatorSize ?? this.indicatorSize,
dividerColor: dividerColor ?? this.dividerColor,
dividerHeight: dividerHeight ?? this.dividerHeight,
labelColor: labelColor ?? this.labelColor,
labelPadding: labelPadding ?? this.labelPadding,
labelStyle: labelStyle ?? this.labelStyle,
......@@ -147,6 +153,7 @@ class TabBarTheme with Diagnosticable {
indicatorColor: Color.lerp(a.indicatorColor, b.indicatorColor, t),
indicatorSize: t < 0.5 ? a.indicatorSize : b.indicatorSize,
dividerColor: Color.lerp(a.dividerColor, b.dividerColor, t),
dividerHeight: t < 0.5 ? a.dividerHeight : b.dividerHeight,
labelColor: Color.lerp(a.labelColor, b.labelColor, t),
labelPadding: EdgeInsetsGeometry.lerp(a.labelPadding, b.labelPadding, t),
labelStyle: TextStyle.lerp(a.labelStyle, b.labelStyle, t),
......@@ -165,6 +172,7 @@ class TabBarTheme with Diagnosticable {
indicatorColor,
indicatorSize,
dividerColor,
dividerHeight,
labelColor,
labelPadding,
labelStyle,
......@@ -189,6 +197,7 @@ class TabBarTheme with Diagnosticable {
&& other.indicatorColor == indicatorColor
&& other.indicatorSize == indicatorSize
&& other.dividerColor == dividerColor
&& other.dividerHeight == dividerHeight
&& other.labelColor == labelColor
&& other.labelPadding == labelPadding
&& other.labelStyle == labelStyle
......
packages/flutter/lib/src/material/tabs.dart
View file @ 32fde139
......@@ -397,6 +397,8 @@ class _IndicatorPainter extends CustomPainter {
required this.indicatorPadding,
required this.labelPaddings,
this.dividerColor,
this.dividerHeight,
required this.width,
}) : super(repaint: controller.animation) {
if (old != null) {
saveTabOffsets(old._currentTabOffsets, old._currentTextDirection);
......@@ -408,8 +410,10 @@ class _IndicatorPainter extends CustomPainter {
final TabBarIndicatorSize? indicatorSize;
final EdgeInsetsGeometry indicatorPadding;
final List<GlobalKey> tabKeys;
final Color? dividerColor;
final List<EdgeInsetsGeometry> labelPaddings;
final Color? dividerColor;
final double? dividerHeight;
final double width;
// _currentTabOffsets and _currentTextDirection are set each time TabBar
// layout is completed. These values can be null when TabBar contains no
......@@ -502,8 +506,10 @@ class _IndicatorPainter extends CustomPainter {
textDirection: _currentTextDirection,
);
if (dividerColor != null) {
final Paint dividerPaint = Paint()..color = dividerColor!..strokeWidth = 1;
canvas.drawLine(Offset(0, size.height), Offset(size.width, size.height), dividerPaint);
final Paint dividerPaint = Paint()..color = dividerColor!..strokeWidth = dividerHeight!;
final Offset dividerP1 = Offset(-width, size.height - (dividerPaint.strokeWidth / 2));
final Offset dividerP2 = Offset(width, size.height - (dividerPaint.strokeWidth / 2));
canvas.drawLine(dividerP1, dividerP2, dividerPaint);
}
_painter!.paint(canvas, _currentRect!.topLeft, configuration);
}
......@@ -718,6 +724,7 @@ class TabBar extends StatefulWidget implements PreferredSizeWidget {
this.indicator,
this.indicatorSize,
this.dividerColor,
this.dividerHeight,
this.labelColor,
this.labelStyle,
this.labelPadding,
......@@ -768,6 +775,7 @@ class TabBar extends StatefulWidget implements PreferredSizeWidget {
this.indicator,
this.indicatorSize,
this.dividerColor,
this.dividerHeight,
this.labelColor,
this.labelStyle,
this.labelPadding,
......@@ -895,6 +903,13 @@ class TabBar extends StatefulWidget implements PreferredSizeWidget {
/// [ColorScheme.surfaceVariant] will be used, otherwise divider will not be drawn.
final Color? dividerColor;
/// The height of the divider.
///
/// 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.
final double? dividerHeight;
/// The color of selected tab labels.
///
/// If null, then [TabBarTheme.labelColor] is used. If that is also null and
......@@ -1154,8 +1169,8 @@ class _TabBarState extends State<TabBar> {
TabBarTheme get _defaults {
if (Theme.of(context).useMaterial3) {
return widget._isPrimary
? _TabsPrimaryDefaultsM3(context, widget.isScrollable)
: _TabsSecondaryDefaultsM3(context, widget.isScrollable);
? _TabsPrimaryDefaultsM3(context, widget.isScrollable)
: _TabsSecondaryDefaultsM3(context, widget.isScrollable);
} else {
return _TabsDefaultsM2(context, widget.isScrollable);
}
......@@ -1269,8 +1284,10 @@ class _TabBarState extends State<TabBar> {
indicatorPadding: widget.indicatorPadding,
tabKeys: _tabKeys,
old: _indicatorPainter,
dividerColor: theme.useMaterial3 ? widget.dividerColor ?? tabBarTheme.dividerColor ?? _defaults.dividerColor : null,
labelPaddings: _labelPaddings,
dividerColor: theme.useMaterial3 ? widget.dividerColor ?? tabBarTheme.dividerColor ?? _defaults.dividerColor : null,
dividerHeight: theme.useMaterial3 ? widget.dividerHeight ?? tabBarTheme.dividerHeight ?? _defaults.dividerHeight : null,
width: MediaQuery.sizeOf(context).width,
);
}
......@@ -1475,6 +1492,7 @@ class _TabBarState extends State<TabBar> {
Widget build(BuildContext context) {
assert(debugCheckHasMaterialLocalizations(context));
assert(_debugScheduleCheckHasValidTabsCount());
final ThemeData theme = Theme.of(context);
final TabBarTheme tabBarTheme = TabBarTheme.of(context);
final TabAlignment effectiveTabAlignment = widget.tabAlignment ?? tabBarTheme.tabAlignment ?? _defaults.tabAlignment!;
assert(_debugTabAlignmentIsValid(effectiveTabAlignment));
......@@ -1627,6 +1645,17 @@ class _TabBarState extends State<TabBar> {
child: tabBar,
),
);
if (theme.useMaterial3) {
final AlignmentGeometry effectiveAlignment = switch (effectiveTabAlignment) {
TabAlignment.center => Alignment.center,
TabAlignment.start || TabAlignment.startOffset || TabAlignment.fill => AlignmentDirectional.centerStart,
};
tabBar = Align(
heightFactor: 1.0,
alignment: effectiveAlignment,
child: tabBar,
);
}
} else if (widget.padding != null) {
tabBar = Padding(
padding: widget.padding!,
......@@ -2177,6 +2206,9 @@ class _TabsPrimaryDefaultsM3 extends TabBarTheme {
@override
Color? get dividerColor => _colors.surfaceVariant;
@override
double? get dividerHeight => 1.0;
@override
Color? get indicatorColor => _colors.primary;
......@@ -2224,7 +2256,7 @@ class _TabsPrimaryDefaultsM3 extends TabBarTheme {
InteractiveInkFeatureFactory? get splashFactory => Theme.of(context).splashFactory;
@override
TabAlignment? get tabAlignment => isScrollable ? TabAlignment.start : TabAlignment.fill;
TabAlignment? get tabAlignment => isScrollable ? TabAlignment.startOffset : TabAlignment.fill;
static double indicatorWeight = 3.0;
}
......@@ -2241,6 +2273,9 @@ class _TabsSecondaryDefaultsM3 extends TabBarTheme {
@override
Color? get dividerColor => _colors.surfaceVariant;
@override
double? get dividerHeight => 1.0;
@override
Color? get indicatorColor => _colors.primary;
......@@ -2288,7 +2323,7 @@ class _TabsSecondaryDefaultsM3 extends TabBarTheme {
InteractiveInkFeatureFactory? get splashFactory => Theme.of(context).splashFactory;
@override
TabAlignment? get tabAlignment => isScrollable ? TabAlignment.start : TabAlignment.fill;
TabAlignment? get tabAlignment => isScrollable ? TabAlignment.startOffset : TabAlignment.fill;
}
// END GENERATED TOKEN PROPERTIES - Tabs
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab