mirror of
https://github.com/flutter/flutter
synced 2024-08-27 12:00:58 +00:00
Adds BorderStyle property to TabPageSelector (#92436)
This commit is contained in:
parent
8d30177f4c
commit
bead3432b7
|
@ -1508,7 +1508,8 @@ class _TabBarViewState extends State<TabBarView> {
|
|||
}
|
||||
}
|
||||
|
||||
/// Displays a single circle with the specified border and background colors.
|
||||
/// Displays a single circle with the specified size, border style, border color
|
||||
/// and background colors.
|
||||
///
|
||||
/// Used by [TabPageSelector] to indicate the selected page.
|
||||
class TabPageSelectorIndicator extends StatelessWidget {
|
||||
|
@ -1520,6 +1521,7 @@ class TabPageSelectorIndicator extends StatelessWidget {
|
|||
required this.backgroundColor,
|
||||
required this.borderColor,
|
||||
required this.size,
|
||||
this.borderStyle = BorderStyle.solid,
|
||||
}) : assert(backgroundColor != null),
|
||||
assert(borderColor != null),
|
||||
assert(size != null),
|
||||
|
@ -1534,6 +1536,11 @@ class TabPageSelectorIndicator extends StatelessWidget {
|
|||
/// The indicator circle's diameter.
|
||||
final double size;
|
||||
|
||||
/// The indicator circle's border style.
|
||||
///
|
||||
/// Defaults to [BorderStyle.solid] if value is not specified.
|
||||
final BorderStyle borderStyle;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
|
@ -1542,14 +1549,15 @@ class TabPageSelectorIndicator extends StatelessWidget {
|
|||
margin: const EdgeInsets.all(4.0),
|
||||
decoration: BoxDecoration(
|
||||
color: backgroundColor,
|
||||
border: Border.all(color: borderColor),
|
||||
border: Border.all(color: borderColor, style: borderStyle),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Displays a row of small circular indicators, one per tab.
|
||||
/// Uses [TabPageSelectorIndicator] to display a row of small circular
|
||||
/// indicators, one per tab.
|
||||
///
|
||||
/// {@youtube 560 315 https://www.youtube.com/watch?v=Q628ue9Cq7U}
|
||||
///
|
||||
|
@ -1566,6 +1574,7 @@ class TabPageSelector extends StatelessWidget {
|
|||
this.indicatorSize = 12.0,
|
||||
this.color,
|
||||
this.selectedColor,
|
||||
this.borderStyle,
|
||||
}) : assert(indicatorSize != null && indicatorSize > 0.0),
|
||||
super(key: key);
|
||||
|
||||
|
@ -1590,6 +1599,11 @@ class TabPageSelector extends StatelessWidget {
|
|||
/// [ColorScheme.secondary].
|
||||
final Color? selectedColor;
|
||||
|
||||
/// The indicator circle's border style.
|
||||
///
|
||||
/// Defaults to [BorderStyle.solid] if value is not specified.
|
||||
final BorderStyle? borderStyle;
|
||||
|
||||
Widget _buildTabIndicator(
|
||||
int tabIndex,
|
||||
TabController tabController,
|
||||
|
@ -1624,6 +1638,7 @@ class TabPageSelector extends StatelessWidget {
|
|||
backgroundColor: background,
|
||||
borderColor: selectedColorTween.end!,
|
||||
size: indicatorSize,
|
||||
borderStyle: borderStyle ?? BorderStyle.solid,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -8,7 +8,7 @@ import 'package:flutter_test/flutter_test.dart';
|
|||
const Color kSelectedColor = Color(0xFF00FF00);
|
||||
const Color kUnselectedColor = Colors.transparent;
|
||||
|
||||
Widget buildFrame(TabController tabController, { Color? color, Color? selectedColor, double indicatorSize = 12.0 }) {
|
||||
Widget buildFrame(TabController tabController, { Color? color, Color? selectedColor, double indicatorSize = 12.0, BorderStyle? borderStyle }) {
|
||||
return Localizations(
|
||||
locale: const Locale('en', 'US'),
|
||||
delegates: const <LocalizationsDelegate<dynamic>>[
|
||||
|
@ -31,6 +31,7 @@ Widget buildFrame(TabController tabController, { Color? color, Color? selectedCo
|
|||
color: color,
|
||||
selectedColor: selectedColor,
|
||||
indicatorSize: indicatorSize,
|
||||
borderStyle: borderStyle,
|
||||
),
|
||||
Flexible(
|
||||
child: TabBarView(
|
||||
|
@ -225,4 +226,46 @@ void main() {
|
|||
expect(tester.getSize(find.byType(TabPageSelector)).height, 24.0);
|
||||
});
|
||||
|
||||
testWidgets('PageSelector circle border', (WidgetTester tester) async {
|
||||
final TabController tabController = TabController(
|
||||
vsync: const TestVSync(),
|
||||
initialIndex: 1,
|
||||
length: 3,
|
||||
);
|
||||
|
||||
Iterable<TabPageSelectorIndicator> indicators;
|
||||
|
||||
// Default border
|
||||
await tester.pumpWidget(buildFrame(tabController));
|
||||
indicators = tester.widgetList(
|
||||
find.descendant(
|
||||
of: find.byType(TabPageSelector),
|
||||
matching: find.byType(TabPageSelectorIndicator),
|
||||
),
|
||||
);
|
||||
for (final TabPageSelectorIndicator indicator in indicators)
|
||||
expect(indicator.borderStyle, BorderStyle.solid);
|
||||
|
||||
// No border
|
||||
await tester.pumpWidget(buildFrame(tabController, borderStyle: BorderStyle.none));
|
||||
indicators = tester.widgetList(
|
||||
find.descendant(
|
||||
of: find.byType(TabPageSelector),
|
||||
matching: find.byType(TabPageSelectorIndicator),
|
||||
),
|
||||
);
|
||||
for (final TabPageSelectorIndicator indicator in indicators)
|
||||
expect(indicator.borderStyle, BorderStyle.none);
|
||||
|
||||
// Solid border
|
||||
await tester.pumpWidget(buildFrame(tabController, borderStyle: BorderStyle.solid));
|
||||
indicators = tester.widgetList(
|
||||
find.descendant(
|
||||
of: find.byType(TabPageSelector),
|
||||
matching: find.byType(TabPageSelectorIndicator),
|
||||
),
|
||||
);
|
||||
for (final TabPageSelectorIndicator indicator in indicators)
|
||||
expect(indicator.borderStyle, BorderStyle.solid);
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue