Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in
Toggle navigation
F
Front-End
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
abdullh.alsoleman
Front-End
Commits
bead3432
Unverified
Commit
bead3432
authored
Jan 19, 2022
by
Chinmoy
Committed by
GitHub
Jan 19, 2022
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Adds BorderStyle property to TabPageSelector (#92436)
parent
8d30177f
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
62 additions
and
4 deletions
+62
-4
tabs.dart
packages/flutter/lib/src/material/tabs.dart
+18
-3
page_selector_test.dart
packages/flutter/test/material/page_selector_test.dart
+44
-1
No files found.
packages/flutter/lib/src/material/tabs.dart
View file @
bead3432
...
@@ -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
,
);
);
}
}
...
...
packages/flutter/test/material/page_selector_test.dart
View file @
bead3432
...
@@ -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
);
});
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment