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

Fix tab bar center alignment

Browse Source
This commit is contained in:
Shawn 2022-10-24 15:42:06 -06:00
parent c0ef12e158
commit 24f82bba46
1 changed files with 56 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,14 +4,12 @@ class WonderDetailsTabMenu extends StatelessWidget {
static double bottomPadding = 0; static double bottomPadding = 0;
static double buttonInset = 12; static double buttonInset = 12;
const WonderDetailsTabMenu( const WonderDetailsTabMenu({Key? key, required this.tabController, this.showBg = false, required this.wonderType})
{Key? key, required this.tabController, this.showBg = false, required this.wonderType, required this.showHomeBtn})
: super(key: key); : super(key: key);
final TabController tabController; final TabController tabController;
final bool showBg; final bool showBg;
final WonderType wonderType; final WonderType wonderType;
final bool showHomeBtn;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -38,18 +36,20 @@ class WonderDetailsTabMenu extends StatelessWidget {
// TabButtons are a Stack with a row of icon buttons, and an illustrated home button sitting on top. // 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 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. // The row contains an animated placeholder gap which makes room for the icon as it transitions in.
child: IntrinsicHeight(
child: Stack( child: Stack(
children: [ children: [
// Main tab btns + animated gap // Main tab btns + animated gap
Row( Center(
crossAxisAlignment: CrossAxisAlignment.end, child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [ children: [
// Holds a gap for the Home button which pushed the other icons to the side // Home btn
AnimatedContainer( _WonderHomeBtn(
curve: Curves.easeOut, size: homeBtnSize,
duration: $styles.times.fast, wonderType: wonderType,
width: showHomeBtn ? homeBtnSize : 0, borderSize: showBg ? 6 : 2,
height: 0,
), ),
_TabBtn(0, tabController, _TabBtn(0, tabController,
iconImg: 'editorial', label: $strings.wonderDetailsTabLabelInformation, color: iconColor), iconImg: 'editorial', label: $strings.wonderDetailsTabLabelInformation, color: iconColor),
@ -61,35 +61,11 @@ class WonderDetailsTabMenu extends StatelessWidget {
iconImg: 'timeline', label: $strings.wonderDetailsTabLabelEvents, color: iconColor), iconImg: 'timeline', label: $strings.wonderDetailsTabLabelEvents, color: iconColor),
], ],
), ),
// Home btn
TweenAnimationBuilder<double>(
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!,
),
),
);
},
// Wonder Button
), ),
], ],
), ),
), ),
),
], ],
); );
} }
@ -149,8 +125,7 @@ class _TabBtn extends StatelessWidget {
final iconImgPath = '${ImagePaths.common}/tab-$iconImg${selected ? '-active' : ''}.png'; final iconImgPath = '${ImagePaths.common}/tab-$iconImg${selected ? '-active' : ''}.png';
String tabLabel = localizations.tabLabel(tabIndex: index + 1, tabCount: tabController.length); String tabLabel = localizations.tabLabel(tabIndex: index + 1, tabCount: tabController.length);
tabLabel = '$label: $tabLabel'; tabLabel = '$label: $tabLabel';
return Expanded( return MergeSemantics(
child: MergeSemantics(
child: Semantics( child: Semantics(
selected: selected, selected: selected,
label: tabLabel, label: tabLabel,
@ -159,29 +134,29 @@ class _TabBtn extends StatelessWidget {
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, onPressed: () => tabController.index = index,
semanticLabel: label, semanticLabel: label,
minimumSize: Size(100, 0),
child: Stack( child: Stack(
children: [ children: [
/// Image icon /// Image icon
Image.asset(iconImgPath, height: 32, width: 32, color: selected ? null : color), Image.asset(iconImgPath, height: 32, width: 32, color: selected ? null : color),
if (selected) // if (selected)
Positioned.fill( // Positioned.fill(
child: BottomCenter( // child: BottomCenter(
child: Transform.translate( // child: Transform.translate(
offset: Offset(0, $styles.insets.xxs), // offset: Offset(0, $styles.insets.xxs),
child: Animate().custom( // child: Animate().custom(
curve: Curves.easeOutCubic, // curve: Curves.easeOutCubic,
end: 24, // end: 24,
builder: (_, v, __) => Container(height: 3, width: v, color: $styles.colors.accent1), // builder: (_, v, __) => Container(height: 3, width: v, color: $styles.colors.accent1),
), // ),
), // ),
), // ),
), // ),
], ],
), ),
), ),
), ),
), ),
),
); );
} }
} }