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

137
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 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<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!,
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),
// ),
// ),
// ),
// ),
],
),
),
),