Navigate to a specific page within a new screen in Flutter

Question

On the Home screen of my app, I have different genre buttons 'Reggae', 'Electronic' .etc

When I press a genre button, I want it to take me to that specific page I have already created within my BeatsPage

Both HomeScreen and BeatsPage are accessible from my bottom navigation bar.

The BeatsPage contains a list of PageView slides in the top half of the screen, as well as a ListView in the bottom half. The PageView widgets can be swiped horizontally to change page with page dot indicators and uses a _pageController. When the PageView is changed, the corresponding ListView widgets change with it.

The issue is that I have been unable to find a way of navigating to a specific page within my BeatsPage, from my HomeScreen.

I have tried using a named route and a GestureDetector on my genre's Container, so that I could navigate to the BeatsPage.

MaterialApp(
  ...
  routes: {
    '/beats': (context) => BeatsPage(),
  },
)

Then using 'arguments 2' I tried to route it to a specific page within BeatsPage:

onTap: () {
  Navigator.pushNamed(context, '/beats', arguments: 2);
},

After going around in circles, I have not been able to find away of achieving my goal.

Also, the navigation bar disappears when navigating from one screen to another, which I have been unable to fix.

Answer 1

as the way I understand to your problem, I think you should use 'initialPage' in PageControler,

The int value of initialPage id from the HomePage, for each genre button put a value of the PageView which it starts from 0

check out this and I hope it helps you

    Widget build(BuildContext context) {
        PageController controller = PageController(initialPage: widget.index);
....

The BeatsPage class

class BeatsPage extends StatefulWidget {
  const BeatsPageView({super.key, required this.index});
  final int index;
  @override
  State<BeatsPageView> createState() => _BeatsPageViewState();
}

the onTap of the Buttons of genre

onTap: () {
  Navigator.push(context, MaterialPageRoute(
    builder: (context) {
      return BeatsPage(
        index: 0,
      );
    },
  ));
},

2nd

onTap: () {
  Navigator.push(context, MaterialPageRoute(
    builder: (context) {
      return BeatsPage(
        index: 1,
      );
    },
  ));
},

or if the Buttons are inside a ListView.builder use the widget 'index'

onTap: () {
  Navigator.push(context, MaterialPageRoute(
    builder: (context) {
      return BeatsPage(
        index: index,
      );
    },
  ));
},