Unverified Commit bead3432 authored by Chinmoy's avatar Chinmoy Committed by GitHub

Adds BorderStyle property to TabPageSelector (#92436)

parent 8d30177f
...@@ -1508,7 +1508,8 @@ class _TabBarViewState extends State<TabBarView> { ...@@ -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. /// Used by [TabPageSelector] to indicate the selected page.
class TabPageSelectorIndicator extends StatelessWidget { class TabPageSelectorIndicator extends StatelessWidget {
...@@ -1520,6 +1521,7 @@ class TabPageSelectorIndicator extends StatelessWidget { ...@@ -1520,6 +1521,7 @@ class TabPageSelectorIndicator extends StatelessWidget {
required this.backgroundColor, required this.backgroundColor,
required this.borderColor, required this.borderColor,
required this.size, required this.size,
this.borderStyle = BorderStyle.solid,
}) : assert(backgroundColor != null), }) : assert(backgroundColor != null),
assert(borderColor != null), assert(borderColor != null),
assert(size != null), assert(size != null),
...@@ -1534,6 +1536,11 @@ class TabPageSelectorIndicator extends StatelessWidget { ...@@ -1534,6 +1536,11 @@ class TabPageSelectorIndicator extends StatelessWidget {
/// The indicator circle's diameter. /// The indicator circle's diameter.
final double size; final double size;
/// The indicator circle's border style.
///
/// Defaults to [BorderStyle.solid] if value is not specified.
final BorderStyle borderStyle;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
...@@ -1542,14 +1549,15 @@ class TabPageSelectorIndicator extends StatelessWidget { ...@@ -1542,14 +1549,15 @@ class TabPageSelectorIndicator extends StatelessWidget {
margin: const EdgeInsets.all(4.0), margin: const EdgeInsets.all(4.0),
decoration: BoxDecoration( decoration: BoxDecoration(
color: backgroundColor, color: backgroundColor,
border: Border.all(color: borderColor), border: Border.all(color: borderColor, style: borderStyle),
shape: BoxShape.circle, 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} /// {@youtube 560 315 https://www.youtube.com/watch?v=Q628ue9Cq7U}
/// ///
...@@ -1566,6 +1574,7 @@ class TabPageSelector extends StatelessWidget { ...@@ -1566,6 +1574,7 @@ class TabPageSelector extends StatelessWidget {
this.indicatorSize = 12.0, this.indicatorSize = 12.0,
this.color, this.color,
this.selectedColor, this.selectedColor,
this.borderStyle,
}) : assert(indicatorSize != null && indicatorSize > 0.0), }) : assert(indicatorSize != null && indicatorSize > 0.0),
super(key: key); super(key: key);
...@@ -1590,6 +1599,11 @@ class TabPageSelector extends StatelessWidget { ...@@ -1590,6 +1599,11 @@ class TabPageSelector extends StatelessWidget {
/// [ColorScheme.secondary]. /// [ColorScheme.secondary].
final Color? selectedColor; final Color? selectedColor;
/// The indicator circle's border style.
///
/// Defaults to [BorderStyle.solid] if value is not specified.
final BorderStyle? borderStyle;
Widget _buildTabIndicator( Widget _buildTabIndicator(
int tabIndex, int tabIndex,
TabController tabController, TabController tabController,
...@@ -1624,6 +1638,7 @@ class TabPageSelector extends StatelessWidget { ...@@ -1624,6 +1638,7 @@ class TabPageSelector extends StatelessWidget {
backgroundColor: background, backgroundColor: background,
borderColor: selectedColorTween.end!, borderColor: selectedColorTween.end!,
size: indicatorSize, size: indicatorSize,
borderStyle: borderStyle ?? BorderStyle.solid,
); );
} }
......
...@@ -8,7 +8,7 @@ import 'package:flutter_test/flutter_test.dart'; ...@@ -8,7 +8,7 @@ import 'package:flutter_test/flutter_test.dart';
const Color kSelectedColor = Color(0xFF00FF00); const Color kSelectedColor = Color(0xFF00FF00);
const Color kUnselectedColor = Colors.transparent; 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( return Localizations(
locale: const Locale('en', 'US'), locale: const Locale('en', 'US'),
delegates: const <LocalizationsDelegate<dynamic>>[ delegates: const <LocalizationsDelegate<dynamic>>[
...@@ -31,6 +31,7 @@ Widget buildFrame(TabController tabController, { Color? color, Color? selectedCo ...@@ -31,6 +31,7 @@ Widget buildFrame(TabController tabController, { Color? color, Color? selectedCo
color: color, color: color,
selectedColor: selectedColor, selectedColor: selectedColor,
indicatorSize: indicatorSize, indicatorSize: indicatorSize,
borderStyle: borderStyle,
), ),
Flexible( Flexible(
child: TabBarView( child: TabBarView(
...@@ -225,4 +226,46 @@ void main() { ...@@ -225,4 +226,46 @@ void main() {
expect(tester.getSize(find.byType(TabPageSelector)).height, 24.0); 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);
});
} }
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