bachelor/wonders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a FocusTraversalGroup

Browse Source
This commit is contained in:
Shawn 2023-03-01 14:32:00 -07:00
parent cda6d7cbaa
commit 4661f6997c
3 changed files with 75 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/ui/screens/editorial/editorial_screen.dart
View File

@ -102,7 +102,7 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
/// Scrolling content - Includes an invisible gap at the top, and then scrolls over the illustration
TopCenter(
child: SizedBox(
//width: $styles.sizes.maxContentWidth1,
child: FocusTraversalGroup(
child: CustomScrollView(
primary: false,
controller: _scroller,
@ -153,6 +153,7 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
),
),
),
),
/// Home Btn
AnimatedBuilder(

54
lib/ui/screens/wonder_details/wonder_details_tab_menu.dart
View File

@ -4,11 +4,7 @@ class WonderDetailsTabMenu extends StatelessWidget {
static double bottomPadding = 0;
static double buttonInset = 12;
const WonderDetailsTabMenu(
{Key? key,
required this.tabController,
this.showBg = false,
required this.wonderType})
const WonderDetailsTabMenu({Key? key, required this.tabController, this.showBg = false, required this.wonderType})
: super(key: key);
final TabController tabController;
@ -36,10 +32,7 @@ class WonderDetailsTabMenu extends StatelessWidget {
),
// Buttons
Padding(
padding: EdgeInsets.only(
left: $styles.insets.sm,
right: $styles.insets.xxs,
bottom: bottomPadding),
padding: EdgeInsets.only(left: $styles.insets.sm, right: $styles.insets.xxs, bottom: bottomPadding),
// TabButtons are a Stack with a row of icon buttons, and an illustrated home button sitting on top.
// The home buttons shows / hides itself based on `showHomeBtn`
// The row contains an animated placeholder gap which makes room for the icon as it transitions in.
@ -48,6 +41,7 @@ class WonderDetailsTabMenu extends StatelessWidget {
children: [
// Main tab btns + animated gap
Center(
child: FocusTraversalGroup(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
@ -59,24 +53,17 @@ class WonderDetailsTabMenu extends StatelessWidget {
borderSize: showBg ? 6 : 2,
),
_TabBtn(0, tabController,
iconImg: 'editorial',
label: $strings.wonderDetailsTabLabelInformation,
color: iconColor),
iconImg: 'editorial', label: $strings.wonderDetailsTabLabelInformation, color: iconColor),
_TabBtn(1, tabController,
iconImg: 'photos',
label: $strings.wonderDetailsTabLabelImages,
color: iconColor),
iconImg: 'photos', label: $strings.wonderDetailsTabLabelImages, color: iconColor),
_TabBtn(2, tabController,
iconImg: 'artifacts',
label: $strings.wonderDetailsTabLabelArtifacts,
color: iconColor),
iconImg: 'artifacts', label: $strings.wonderDetailsTabLabelArtifacts, color: iconColor),
_TabBtn(3, tabController,
iconImg: 'timeline',
label: $strings.wonderDetailsTabLabelEvents,
color: iconColor),
iconImg: 'timeline', label: $strings.wonderDetailsTabLabelEvents, color: iconColor),
],
),
),
),
],
),
),
@ -87,11 +74,7 @@ class WonderDetailsTabMenu extends StatelessWidget {
}
class _WonderHomeBtn extends StatelessWidget {
const _WonderHomeBtn(
{Key? key,
required this.size,
required this.wonderType,
required this.borderSize})
const _WonderHomeBtn({Key? key, required this.size, required this.wonderType, required this.borderSize})
: super(key: key);
final double size;
@ -113,8 +96,7 @@ class _WonderHomeBtn extends StatelessWidget {
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(99),
color: wonderType.fgColor,
image: DecorationImage(
image: AssetImage(wonderType.homeBtn), fit: BoxFit.fill),
image: DecorationImage(image: AssetImage(wonderType.homeBtn), fit: BoxFit.fill),
),
),
);
@ -143,12 +125,9 @@ class _TabBtn extends StatelessWidget {
@override
Widget build(BuildContext context) {
bool selected = tabController.index == index;
final MaterialLocalizations localizations =
MaterialLocalizations.of(context);
final iconImgPath =
'${ImagePaths.common}/tab-$iconImg${selected ? '-active' : ''}.png';
String tabLabel = localizations.tabLabel(
tabIndex: index + 1, tabCount: tabController.length);
final MaterialLocalizations localizations = MaterialLocalizations.of(context);
final iconImgPath = '${ImagePaths.common}/tab-$iconImg${selected ? '-active' : ''}.png';
String tabLabel = localizations.tabLabel(tabIndex: index + 1, tabCount: tabController.length);
tabLabel = '$label: $tabLabel';
final double btnWidth = (context.widthPx / 6).clamp(_minWidth, _maxWidth);
return MergeSemantics(
@ -157,15 +136,12 @@ class _TabBtn extends StatelessWidget {
label: tabLabel,
child: ExcludeSemantics(
child: AppBtn.basic(
padding: EdgeInsets.only(
top: $styles.insets.md + $styles.insets.xs,
bottom: $styles.insets.sm),
padding: EdgeInsets.only(top: $styles.insets.md + $styles.insets.xs, bottom: $styles.insets.sm),
onPressed: () => tabController.index = index,
semanticLabel: label,
minimumSize: Size(btnWidth, 0),
// Image icon
child: Image.asset(iconImgPath,
height: 32, width: 32, color: selected ? null : color),
child: Image.asset(iconImgPath, height: 32, width: 32, color: selected ? null : color),
),
),
),

2
lib/ui/screens/wonder_events/widgets/_events_list.dart
View File

@ -32,7 +32,7 @@ class _EventsListState extends State<_EventsList> {
@override
Widget build(BuildContext context) {
return widget.blurOnScroll ? _buildScrollingListWithBlur() : _buildScrollingList();
return FocusTraversalGroup(child: widget.blurOnScroll ? _buildScrollingListWithBlur() : _buildScrollingList());
}
/// The actual content of the scrolling list