Hoist tabPress logic to the screen level. Move go() call to onTap from onChange. prevents errors during route changes.

This commit is contained in:
Shawn 2024-01-17 10:50:43 -07:00
parent c450c71d05
commit 537d2ed9e4
2 changed files with 25 additions and 12 deletions

View File

@ -6,13 +6,14 @@ class WonderDetailsTabMenu extends StatelessWidget {
static const double minTabSize = 25;
static const double maxTabSize = 100;
const WonderDetailsTabMenu(
{Key? key,
const WonderDetailsTabMenu({
Key? key,
required this.tabController,
this.showBg = false,
required this.wonderType,
this.axis = Axis.horizontal})
: super(key: key);
this.axis = Axis.horizontal,
required this.onTap,
}) : super(key: key);
final TabController tabController;
final bool showBg;
@ -20,6 +21,8 @@ class WonderDetailsTabMenu extends StatelessWidget {
final Axis axis;
bool get isVertical => axis == Axis.vertical;
final void Function(int index) onTap;
@override
Widget build(BuildContext context) {
Color iconColor = showBg ? $styles.colors.black : $styles.colors.white;
@ -103,6 +106,7 @@ class WonderDetailsTabMenu extends StatelessWidget {
color: iconColor,
axis: axis,
mainAxisSize: tabBtnSize,
onTap: onTap,
),
_TabBtn(
1,
@ -112,6 +116,7 @@ class WonderDetailsTabMenu extends StatelessWidget {
color: iconColor,
axis: axis,
mainAxisSize: tabBtnSize,
onTap: onTap,
),
_TabBtn(
2,
@ -121,6 +126,7 @@ class WonderDetailsTabMenu extends StatelessWidget {
color: iconColor,
axis: axis,
mainAxisSize: tabBtnSize,
onTap: onTap,
),
_TabBtn(
3,
@ -130,6 +136,7 @@ class WonderDetailsTabMenu extends StatelessWidget {
color: iconColor,
axis: axis,
mainAxisSize: tabBtnSize,
onTap: onTap,
),
]),
),
@ -184,6 +191,7 @@ class _TabBtn extends StatelessWidget {
required this.label,
required this.axis,
required this.mainAxisSize,
required this.onTap,
}) : super(key: key);
static const double crossBtnSize = 60;
@ -195,14 +203,12 @@ class _TabBtn extends StatelessWidget {
final String label;
final Axis axis;
final double mainAxisSize;
final void Function(int index) onTap;
bool get _isVertical => axis == Axis.vertical;
@override
Widget build(BuildContext context) {
// return _isVertical
// ? SizedBox(height: mainAxisSize, width: crossBtnSize, child: Placeholder())
// : SizedBox(height: crossBtnSize, width: mainAxisSize, child: Placeholder());
bool selected = tabController.index == index;
final MaterialLocalizations localizations = MaterialLocalizations.of(context);
final iconImgPath = '${ImagePaths.common}/tab-$iconImg${selected ? '-active' : ''}.png';
@ -217,7 +223,7 @@ class _TabBtn extends StatelessWidget {
label: tabLabel,
child: ExcludeSemantics(
child: AppBtn.basic(
onPressed: () => tabController.index = index,
onPressed: () => onTap(index),
semanticLabel: label,
minimumSize: _isVertical ? Size(crossBtnSize, mainAxisSize) : Size(mainAxisSize, crossBtnSize),
// Image icon

View File

@ -1,3 +1,5 @@
import 'dart:async';
import 'package:wonders/common_libs.dart';
import 'package:wonders/ui/common/lazy_indexed_stack.dart';
import 'package:wonders/ui/common/measurable_widget.dart';
@ -43,11 +45,15 @@ class _WonderDetailsScreenState extends State<WonderDetailsScreen>
}
void _handleTabChanged() {
context.go(ScreenPaths.wonderDetails(widget.type, tabIndex: _tabController.index));
_fade?.forward(from: 0);
setState(() {});
}
void _handleTabTapped(int index) {
_tabController.index = index;
context.go(ScreenPaths.wonderDetails(widget.type, tabIndex: _tabController.index));
}
void _handleTabMenuSized(Size size) {
setState(() {
_tabBarSize = (_useNavRail ? size.width : size.height) - WonderDetailsTabMenu.buttonInset;
@ -85,6 +91,7 @@ class _WonderDetailsScreenState extends State<WonderDetailsScreen>
onChange: _handleTabMenuSized,
child: WonderDetailsTabMenu(
tabController: _tabController,
onTap: _handleTabTapped,
wonderType: wonder.type,
showBg: showTabBarBg,
axis: _useNavRail ? Axis.vertical : Axis.horizontal),