Add tooltips for SegmentedButton
(#128501)
This commit is contained in:
parent
a08a211040
commit
e84fa2ce47
@ -17,6 +17,7 @@ import 'segmented_button_theme.dart';
|
|||||||
import 'text_button.dart';
|
import 'text_button.dart';
|
||||||
import 'text_button_theme.dart';
|
import 'text_button_theme.dart';
|
||||||
import 'theme.dart';
|
import 'theme.dart';
|
||||||
|
import 'tooltip.dart';
|
||||||
|
|
||||||
/// Data describing a segment of a [SegmentedButton].
|
/// Data describing a segment of a [SegmentedButton].
|
||||||
class ButtonSegment<T> {
|
class ButtonSegment<T> {
|
||||||
@ -27,6 +28,7 @@ class ButtonSegment<T> {
|
|||||||
required this.value,
|
required this.value,
|
||||||
this.icon,
|
this.icon,
|
||||||
this.label,
|
this.label,
|
||||||
|
this.tooltip,
|
||||||
this.enabled = true,
|
this.enabled = true,
|
||||||
}) : assert(icon != null || label != null);
|
}) : assert(icon != null || label != null);
|
||||||
|
|
||||||
@ -41,6 +43,9 @@ class ButtonSegment<T> {
|
|||||||
/// Optional label displayed in the segment.
|
/// Optional label displayed in the segment.
|
||||||
final Widget? label;
|
final Widget? label;
|
||||||
|
|
||||||
|
/// Optional tooltip for the segment
|
||||||
|
final String? tooltip;
|
||||||
|
|
||||||
/// Determines if the segment is available for selection.
|
/// Determines if the segment is available for selection.
|
||||||
final bool enabled;
|
final bool enabled;
|
||||||
}
|
}
|
||||||
@ -335,11 +340,18 @@ class SegmentedButton<T> extends StatelessWidget {
|
|||||||
child: label,
|
child: label,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
final Widget buttonWithTooltip = (segment.tooltip != null)
|
||||||
|
? Tooltip(
|
||||||
|
message: segment.tooltip,
|
||||||
|
child: button,
|
||||||
|
)
|
||||||
|
: button;
|
||||||
|
|
||||||
return MergeSemantics(
|
return MergeSemantics(
|
||||||
child: Semantics(
|
child: Semantics(
|
||||||
checked: segmentSelected,
|
checked: segmentSelected,
|
||||||
inMutuallyExclusiveGroup: multiSelectionEnabled ? null : true,
|
inMutuallyExclusiveGroup: multiSelectionEnabled ? null : true,
|
||||||
child: button,
|
child: buttonWithTooltip,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -533,4 +533,59 @@ testWidgets('SegmentedButton shows checkboxes for selected segments', (WidgetTes
|
|||||||
expect(overlayColor(), paints..rect()..rect(color: theme.colorScheme.onSurface.withOpacity(0.12)));
|
expect(overlayColor(), paints..rect()..rect(color: theme.colorScheme.onSurface.withOpacity(0.12)));
|
||||||
expect(material.textStyle?.color, theme.colorScheme.onSurface);
|
expect(material.textStyle?.color, theme.colorScheme.onSurface);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
testWidgets('SegmentedButton has no tooltips by default', (WidgetTester tester) async {
|
||||||
|
final ThemeData theme = ThemeData(useMaterial3: true);
|
||||||
|
await tester.pumpWidget(
|
||||||
|
MaterialApp(
|
||||||
|
theme: theme,
|
||||||
|
home: Scaffold(
|
||||||
|
body: Center(
|
||||||
|
child: SegmentedButton<int>(
|
||||||
|
segments: const <ButtonSegment<int>>[
|
||||||
|
ButtonSegment<int>(value: 1, label: Text('1')),
|
||||||
|
ButtonSegment<int>(value: 2, label: Text('2')),
|
||||||
|
ButtonSegment<int>(value: 3, label: Text('3'), enabled: false),
|
||||||
|
],
|
||||||
|
selected: const <int>{2},
|
||||||
|
onSelectionChanged: (Set<int> selected) { },
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(find.byType(Tooltip), findsNothing);
|
||||||
|
});
|
||||||
|
|
||||||
|
testWidgets('SegmentedButton has correct tooltips', (WidgetTester tester) async {
|
||||||
|
final ThemeData theme = ThemeData(useMaterial3: true);
|
||||||
|
await tester.pumpWidget(
|
||||||
|
MaterialApp(
|
||||||
|
theme: theme,
|
||||||
|
home: Scaffold(
|
||||||
|
body: Center(
|
||||||
|
child: SegmentedButton<int>(
|
||||||
|
segments: const <ButtonSegment<int>>[
|
||||||
|
ButtonSegment<int>(value: 1, label: Text('1')),
|
||||||
|
ButtonSegment<int>(value: 2, label: Text('2'), tooltip: 't2'),
|
||||||
|
ButtonSegment<int>(
|
||||||
|
value: 3,
|
||||||
|
label: Text('3'),
|
||||||
|
tooltip: 't3',
|
||||||
|
enabled: false,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
selected: const <int>{2},
|
||||||
|
onSelectionChanged: (Set<int> selected) { },
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(find.byType(Tooltip), findsNWidgets(2));
|
||||||
|
expect(find.byTooltip('t2'), findsOneWidget);
|
||||||
|
expect(find.byTooltip('t3'), findsOneWidget);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user