Flutter : handling multiple navigation screen in CupertinoTabScaffold

Question

Hello I am new to Flutter and I am trying to implement a bottom tab bar with multiple navigation screen for each tab.

Here is my initial set up

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return CupertinoApp(home: HomeScreen(),
        routes: {
          Screen1.id: (context) => Screen1(),
          Screen2.id: (context) => Screen1(),
          DetailScreen3.id: (context) => DetailScreen3(),
          DetailScreen4.id: (context) => DetailScreen4(),
        });
  }
}

Here is my HomeScreen

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.book_solid),
            title: Text('Articles'),
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.eye_solid),
            title: Text('Views'),
          ),
        ],
      ),
      tabBuilder: (context, index) {
        if (index == 0) {
          return Screen1();
        } else {
          return Screen2();
        }
      },
    );
  }
}

Here is my screen1

class Screen1 extends StatelessWidget {
  static const String id = 'screen1';

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(),
      child: GestureDetector(
        onTap: () {
          Navigator.pushNamed(context, DetailScreen3.id);
        },
        child: Center(
          child: Text('Screen 1',),
        ),
      ),
    );
  }
}

and here is my screen3

class DetailScreen3 extends StatelessWidget {
  static const String id = 'screen3';

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(),
      child: Center(
        child: Text('terzo schermo',),
      ),
    );
  }
}

The tabBar work ok and I am able to swap between the 2 tabs but I am not able to navigate from screen 1 to screen 3. When I tap on screen1 Center widget, the screen start to navigate but half way it stops and then the screen become all black...

Here is the error

There are multiple heroes that share the same tag within a subtree. Within each subtree for which heroes are to be animated (i.e. a PageRoute subtree), each Hero must have a unique non-null tag. In this case, multiple heroes had the following tag: Default Hero tag for Cupertino navigation bars with navigator NavigatorState#05492(tickers: tracking 2 tickers)

I understand the problem is related to the hero tag of the navigation bar which must have a unique identifier. How should I fix this problem? should I assign an heroTag to all navigation bar???

Many thanks in advance for the help

Answer 1

I resolved by setting the following properties for each CupertinoNavigationBar

heroTag: 'screen1', // a different string for each navigationBar
transitionBetweenRoutes: false,

Answer 2

As an iOS developer, I tried flutter for the first time, this thing caused a black screen after jumping the page, and also troubled me for two days

heroTag: 'screen1', // a different string for each navigationBar
transitionBetweenRoutes: false,