How to Page Route In Bottom Navigation In Different File/Page

Question

I want to add Bottom Navigation in my app but when I want to add this line _children[_selectedIndex], but how I add this line because I am in different file where I create a navigation but in home.dart file how I add this line in the body? Home dart page code :

import 'package:flutter/material.dart';
import 'package:try_custom_list_view/widget/bottom_nav.dart';
import 'package:try_custom_list_view/widget/drawer.dart';
import 'package:try_custom_list_view/widget/list_view.dart';

class SampleApp extends StatefulWidget {
  @override
  _SampleAppState createState() => _SampleAppState();
}

class _SampleAppState extends State<SampleApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Gaming Shayari"),
      ),
      body: ListViewFromApi(),
      drawer: MyDrawer(),
      bottomNavigationBar: MyNavBar(),
    );
  }
}

Bottom Nav dart file Code :

import 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:line_icons/line_icons.dart';
import 'package:try_custom_list_view/trending.dart';
import 'package:try_custom_list_view/widget/list_view.dart';

class MyNavBar extends StatefulWidget {
  @override
  _MyNavBarState createState() => _MyNavBarState();
}

class _MyNavBarState extends State<MyNavBar> {
  int _selectedIndex = 0;
  final List<Widget> _children = <Widget>[
    ListViewFromApi(),
    MyTrending(),
  ];
  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              blurRadius: 20,
              color: Colors.black.withOpacity(.1),
            )
          ],
        ),
        child: SafeArea(
            child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 8),
          child: GNav(
            gap: 12,
            activeColor: Colors.white,
            iconSize: 24,
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
            duration: Duration(milliseconds: 600),
            tabBackgroundColor: Colors.grey[800],
            tabs: [
              GButton(
                icon: LineIcons.home,
                text: 'Home',
                backgroundColor: Colors.purple,
              ),
              GButton(
                icon: LineIcons.plus_circle,
                text: 'Add Your Poetry',
                backgroundColor: Colors.green,
              ),
              GButton(
                icon: LineIcons.fire,
                text: 'Trending',
                backgroundColor: Colors.red,
              ),
            ],
            selectedIndex: _selectedIndex,
            onTabChange: (index) {
              setState(() {
                _selectedIndex = index;
              });
            },
          ),
        )));
  }
}

Where I placed this code to navigate between pages? _children[_selectedIndex],

Answer 1

You have three GButtons in GNav. So you need to use three widgets in the _children list. Then, you can use app state provider to set and get the selected index of bottom navigation in different files. Look here how to use simple app state management.