From 24f82bba46f3570f178cfaf325c93562a6e87ec8 Mon Sep 17 00:00:00 2001 From: Shawn Date: Mon, 24 Oct 2022 15:42:06 -0600 Subject: [PATCH] Fix tab bar center alignment --- .../wonder_details_tab_menu.dart | 137 +++++++----------- 1 file changed, 56 insertions(+), 81 deletions(-) diff --git a/lib/ui/screens/wonder_details/wonder_details_tab_menu.dart b/lib/ui/screens/wonder_details/wonder_details_tab_menu.dart index 112480e0..c9f12096 100644 --- a/lib/ui/screens/wonder_details/wonder_details_tab_menu.dart +++ b/lib/ui/screens/wonder_details/wonder_details_tab_menu.dart @@ -4,14 +4,12 @@ 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, required this.showHomeBtn}) + const WonderDetailsTabMenu({Key? key, required this.tabController, this.showBg = false, required this.wonderType}) : super(key: key); final TabController tabController; final bool showBg; final WonderType wonderType; - final bool showHomeBtn; @override Widget build(BuildContext context) { @@ -38,56 +36,34 @@ class WonderDetailsTabMenu extends StatelessWidget { // 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. - child: Stack( - children: [ - // Main tab btns + animated gap - Row( - crossAxisAlignment: CrossAxisAlignment.end, - children: [ - // Holds a gap for the Home button which pushed the other icons to the side - AnimatedContainer( - curve: Curves.easeOut, - duration: $styles.times.fast, - width: showHomeBtn ? homeBtnSize : 0, - height: 0, - ), - _TabBtn(0, tabController, - iconImg: 'editorial', label: $strings.wonderDetailsTabLabelInformation, color: iconColor), - _TabBtn(1, tabController, - iconImg: 'photos', label: $strings.wonderDetailsTabLabelImages, color: iconColor), - _TabBtn(2, tabController, - iconImg: 'artifacts', label: $strings.wonderDetailsTabLabelArtifacts, color: iconColor), - _TabBtn(3, tabController, - iconImg: 'timeline', label: $strings.wonderDetailsTabLabelEvents, color: iconColor), - ], - ), - - // Home btn - TweenAnimationBuilder( - duration: $styles.times.fast, - tween: Tween(begin: 0, end: showHomeBtn ? 1 : 0), - child: _WonderHomeBtn( - size: homeBtnSize, - wonderType: wonderType, - borderSize: showBg ? 6 : 2, - ), - builder: (_, value, child) { - final curvedValue = Curves.easeOut.transform(value); - return Transform.scale( - scale: .5 + .5 * curvedValue, - child: Transform.translate( - offset: Offset(0, 100 * (1 - curvedValue)), - child: AnimatedOpacity( - opacity: showHomeBtn ? 1 : 0, - duration: $styles.times.fast, - child: child!, + child: IntrinsicHeight( + child: Stack( + children: [ + // Main tab btns + animated gap + Center( + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + // Home btn + _WonderHomeBtn( + size: homeBtnSize, + wonderType: wonderType, + borderSize: showBg ? 6 : 2, ), - ), - ); - }, - // Wonder Button - ), - ], + _TabBtn(0, tabController, + iconImg: 'editorial', label: $strings.wonderDetailsTabLabelInformation, color: iconColor), + _TabBtn(1, tabController, + iconImg: 'photos', label: $strings.wonderDetailsTabLabelImages, color: iconColor), + _TabBtn(2, tabController, + iconImg: 'artifacts', label: $strings.wonderDetailsTabLabelArtifacts, color: iconColor), + _TabBtn(3, tabController, + iconImg: 'timeline', label: $strings.wonderDetailsTabLabelEvents, color: iconColor), + ], + ), + ), + ], + ), ), ), ], @@ -149,35 +125,34 @@ class _TabBtn extends StatelessWidget { final iconImgPath = '${ImagePaths.common}/tab-$iconImg${selected ? '-active' : ''}.png'; String tabLabel = localizations.tabLabel(tabIndex: index + 1, tabCount: tabController.length); tabLabel = '$label: $tabLabel'; - return Expanded( - child: MergeSemantics( - child: Semantics( - selected: selected, - label: tabLabel, - child: ExcludeSemantics( - child: AppBtn.basic( - padding: EdgeInsets.only(top: $styles.insets.md + $styles.insets.xs, bottom: $styles.insets.sm), - onPressed: () => tabController.index = index, - semanticLabel: label, - child: Stack( - children: [ - /// Image icon - Image.asset(iconImgPath, height: 32, width: 32, color: selected ? null : color), - if (selected) - Positioned.fill( - child: BottomCenter( - child: Transform.translate( - offset: Offset(0, $styles.insets.xxs), - child: Animate().custom( - curve: Curves.easeOutCubic, - end: 24, - builder: (_, v, __) => Container(height: 3, width: v, color: $styles.colors.accent1), - ), - ), - ), - ), - ], - ), + return MergeSemantics( + child: Semantics( + selected: selected, + label: tabLabel, + child: ExcludeSemantics( + child: AppBtn.basic( + padding: EdgeInsets.only(top: $styles.insets.md + $styles.insets.xs, bottom: $styles.insets.sm), + onPressed: () => tabController.index = index, + semanticLabel: label, + minimumSize: Size(100, 0), + child: Stack( + children: [ + /// Image icon + Image.asset(iconImgPath, height: 32, width: 32, color: selected ? null : color), + // if (selected) + // Positioned.fill( + // child: BottomCenter( + // child: Transform.translate( + // offset: Offset(0, $styles.insets.xxs), + // child: Animate().custom( + // curve: Curves.easeOutCubic, + // end: 24, + // builder: (_, v, __) => Container(height: 3, width: v, color: $styles.colors.accent1), + // ), + // ), + // ), + // ), + ], ), ), ),