Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PlatformNavBar wrong index on swipe back in iOS #362

Open
Automatik opened this issue Oct 29, 2022 · 3 comments
Open

PlatformNavBar wrong index on swipe back in iOS #362

Automatik opened this issue Oct 29, 2022 · 3 comments

Comments

@Automatik
Copy link

Automatik commented Oct 29, 2022

I have a PlatformNavBar that when I swipe back (back button) to the previous view, in the bottom bar the tab's icon is colored on the right tab, but the tab's label is wrong. This happens only on iOS and not on Android, so this make me think it could be a bug.
So, for instance, I have a situation where I have the Tab 1 icon colored but the label disabled and the Tab 3 icon disabled but the label colored.

This is how I create the PlatformNavBar object:

PlatformNavBar getPlatformNavBar(BuildContext context, int currentIndex, Function(int) onItemChanged) {

  const double iconSize = 24;

  return PlatformNavBar(
    backgroundColor: Colors.blue,
    currentIndex: currentIndex,
    itemChanged: (newIndex) async {
      onItemChanged(newIndex);
      await _onItemTapped(context, newIndex);
    },
    material: (_, __) => MaterialNavBarData(
      type: BottomNavigationBarType.fixed,
      selectedItemColor: Colors.white,
      unselectedItemColor: textDisabledColor,
    ),
    cupertino: (_, __) => CupertinoTabBarData(
      activeColor: Colors.white,
      inactiveColor: textDisabledColor,
    ),
    items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Container(
          width: iconSize,
          height: iconSize,
          child: SvgPicture.asset("image1", color: getIconColor(context, currentIndex, 0)),
        ),
        label: "Tab1",
      ),
      BottomNavigationBarItem(
        icon: Container(
          width: iconSize,
          height: iconSize,
          child: SvgPicture.asset("image2", color: getIconColor(context, currentIndex, 1)),
        ),
        label: "Tab2",
      ),
      BottomNavigationBarItem(
          icon: Container(
            width: iconSize,
            height: iconSize,
            child: SvgPicture.asset("image3", color: getIconColor(context, currentIndex, 2)),
          ),
          label: "Tab3",
      ),
      BottomNavigationBarItem(
        icon: Container(
          width: iconSize,
          height: iconSize,
          child: SvgPicture.asset("image4", color: getIconColor(context, currentIndex, 3)),
        ),
        label: "Tab4",
      )
    ],
  );
}

Color getIconColor(BuildContext context, int currentIndex, int iconIndex) {
  if(currentIndex == iconIndex) {
    return Colors.white;
  } else {
    return textDisabledColor;
  }
}

Future<void> _onItemTapped(BuildContext context, int newIndex) async {
  String? view = _getViewFromMenu(newIndex);
  await Navigator.of(context).pushNamed(view);
}

String? _getViewFromMenu(int newIndex) {
  String? view;
  switch(newIndex) {
    case 0: view = Tab1View.routeName; break;
    case 1: view = Tab2View.routeName; break;
    case 2: view = Tab3View.routeName; break;
    case 3: view = Tab4View.routeName; break;
    default: view = null;
  }
  return view;
}

And this is how I build the PlatformNavBar object inside a StatefulWidget:

@override
  Widget build(BuildContext context) {

    assignIndex(context);

    final platformNavBar = getPlatformNavBar(context, widget._myService.bottomBarSelectedIndex, (index) {
      setState(() {
        assignIndex(context);
      });
    });

    return PlatformScaffold(
      bottomNavBar: platformNavBar,
      backgroundColor: Colors.white,
      body: _ScaffoldBody(
          baseScaffoldService: widget._myService,
          childBuilder: widget.childBuilder,
        ),
    );

  }

  void assignIndex(BuildContext context) {
    final int currentIndex = NavUtils.getCurrentMenuIndex(context); //a method that get the name of the route from ModalRoute and map it to an index
    if(currentIndex > -1) {
      widget._myService.bottomBarSelectedIndex = currentIndex;
    }
  }

Flutter version:

Flutter 3.3.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 6928314d50 (4 days ago) • 2022-10-25 16:34:41 -0400
Engine • revision 3ad69d7be3
Tools • Dart 2.18.2 • DevTools 2.15.0

Flutter Platform Widget version: ^2.0.0

Do you have any clue about this? Am I doing something wrong or is it a bug?

@aqwert
Copy link
Collaborator

aqwert commented Jan 29, 2023

When it comes to bottom tabs it is best to use PlatformTabScaffold. Can you use that to see if you still have the issue. If so can you produce a complete example instead of snippets. Thanks

@Automatik
Copy link
Author

Automatik commented Jan 31, 2023

I will try with PlatformTabScaffold, in the meantime I leave here a complete example that shows this issue with PlatformScaffold

Here's a screenshot where you can see that the app is showing the Second Tab and in the bottom bar the icon is correctly colored, but the label is wrong
image

flutter_platform_navbar_bug_working_example.zip

@collieryroad
Copy link

Try Adding a HeroTag to you pages like CupertinoNavigationBarData(
heroTag: AuniqueHeroTag,)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants